jquery导航菜单_中英文切换导航菜单特效

学无止境✅  2015-10-29
0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0046)http://www.kaiwo123.com/down/js_229/index.html -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>jquery导航菜单_中英文切换导航菜单特效</title>
<style type="text/css">
body { font-family:"微软雅黑",Arial,Helvetica; margin:0; padding:0; background:#000000; font-size:12px; color:#000000;}
img { border:0; margin:0; padding:0;}
div,span,p,h1,h2,h3,h4,h5,h6,form,label,input,ul,ol,li{margin:0; padding:0;}
a{text-decoration:none;}
h2{font-size:20px; color:#ffffff; line-height:40px; width:600px; margin:80px auto 0 auto;}


.nav{width:600px; margin:20px auto 0 auto; overflow:hidden;}
.nav li{float:left; font-size:14px; text-align:center; height:36px;  overflow:hidden;}
.nav li.nav_ch a{color:#ffffff;}
.nav li a{height:72px; display:block; color:#efefef; padding:0 10px;line-height:36px;}
.nav li a:hover{color:#ffffff;}
</style>

<script type="text/javascript" src="./890导航菜单_中英文切换导航菜单特效_files/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#nav1 li").hover(function(){
$(this).find("a").animate({marginTop:"-36px"},500);
},function(){
$(this).find("a").animate({marginTop:"0px"},500);
})
$("#nav2 li").hover(function(){
$(this).find("a").animate({lineHeight:"18px"},300);
},function(){
$(this).find("a").animate({lineHeight:"36px"},300);
})
$("#nav3 li").hover(function(){
$(this).find("a").stop(false,true).animate({marginTop:"-36px"},500);
},function(){
$(this).find("a").stop(false,true).animate({marginTop:"0px"},500);
})
$("#nav4 li").hover(function(){
$(this).find("a").stop(false,true).animate({lineHeight:"18px"},300);
},function(){
$(this).find("a").stop(false,true).animate({lineHeight:"36px"},300);
})
});
</script>
</head>
<body>
<h2>例子1:(缺点:连续多次划过就执行多次动作)</h2>
<div class="nav" id="nav1">
<ul>
<li><a href="http://www.kaiwo123.com/down/js_229/index.html#" title="">HOME<br>首 页</a></li>
<li><a href="http://www.kaiwo123.com/down/js_229/index.html#" title="">ABOUT <br>关于</a></li>
<li><a href="http://www.kaiwo123.com/down/js_229/index.html#" title="">CASE<br>案例展示</a></li>
<li><a href="http://www.kaiwo123.com/down/js_229/index.html#" title="">NEWS<br>新闻中心</a></li>
<li><a href="http://www.kaiwo123.com/down/js_229/index.html#" title="">CONTACT <br>联系</a></li>
</ul>
</div>

<div class="nav" id="nav2">
<ul>
<li><a href="http://www.kaiwo123.com/down/js_229/index.html#" title="">HOME<br>首 页</a></li>
<li><a href="http://www.kaiwo123.com/down/js_229/index.html#" title="">ABOUT <br>关于</a></li>
<li><a href="http://www.kaiwo123.com/down/js_229/index.html#" title="">CASE<br>案例展示</a></li>
<li><a href="http://www.kaiwo123.com/down/js_229/index.html#" title="">NEWS<br>新闻中心</a></li>
<li><a href="http://www.kaiwo123.com/down/js_229/index.html#" title="">CONTACT <br>联系</a></li>
</ul>
</div>

<h2>例子2:(缺点:快速经过不能完成整个动作)</h2>
<div class="nav" id="nav3">
<ul>
<li><a href="http://www.kaiwo123.com/down/js_229/index.html#" title="">HOME<br>首 页</a></li>
<li><a href="http://www.kaiwo123.com/down/js_229/index.html#" title="">ABOUT <br>关于</a></li>
<li><a href="http://www.kaiwo123.com/down/js_229/index.html#" title="">CASE<br>案例展示</a></li>
<li><a href="http://www.kaiwo123.com/down/js_229/index.html#" title="">NEWS<br>新闻中心</a></li>
<li><a href="http://www.kaiwo123.com/down/js_229/index.html#" title="">CONTACT <br>联系</a></li>
</ul>
</div>

<div class="nav" id="nav4">
<ul>
<li><a href="http://www.kaiwo123.com/down/js_229/index.html#" title="">HOME<br>首 页</a></li>
<li><a href="http://www.kaiwo123.com/down/js_229/index.html#" title="">ABOUT <br>关于</a></li>
<li><a href="http://www.kaiwo123.com/down/js_229/index.html#" title="">CASE<br>案例展示</a></li>
<li><a href="http://www.kaiwo123.com/down/js_229/index.html#" title="">NEWS<br>新闻中心</a></li>
<li><a href="http://www.kaiwo123.com/down/js_229/index.html#" title="">CONTACT <br>联系</a></li>
</ul>
</div>
<p align="center">来源:网络 代码整理:<a href="http://www.kaiwo123.com/" target="_blank">看我的特效网</a></p>
<p align="center">* 尊重他人劳动成果,转载请自觉注明出处!注:此代码仅供学习交流,请勿用于商业用途。</p>


</body></html>
回复 1   只看赞同
学无止境✅   2015-10-29
1 楼 0
/*!
* jQuery JavaScript Library v1.3.1
* http://jquery.com/
*
* Copyright (c) 2009 John Resig
* Dual licensed under the MIT and GPL licenses.
* http://docs.jquery.com/License
*
* Date: 2009-01-21 20:42:16 -0500 (Wed, 21 Jan 2009)
* Revision: 6158
*/
游客  现在