jQuery 导航条动态美化效果
借助 插件 Lavalamp实现导航条动态显示效果, 以前用animate来实现,效果不是很好<script src="js/jquery-2.0.0.min.js" type="text/javascript"></script><script src="js/jquery.easing.min.js" type="text/javascript"></script><script src="js/jquery.lavalamp.js" type="text/javascript"></script><script type="text/javascript">$(function() {$(".nav").lavaLamp({fx: "backout",speed: 1100,mouseover:function(event, menuItem){alert();}});});</script><style>.nav {width:650px;height:100px;float:left;position: relative;}.nav li {width:auto;min-width:40px;line-height:100px;padding:0 15px;margin:0 10px 0 0;color:#000;font-size:14px;text-align:center;float:left;}.nav li.back {background: #86bf40;-moz-border-radius: 5px;-webkit-border-radius: 5px;line-height: 2;width: 40px;height: 100px; /*----*/z-index: 1; /*----*/position: absolute; /*----*/margin-top: 0px;margin-left:5px;}.nav li a {color: #000;z-index: 2; /*----*/font-variant: small-caps;text-decoration: none;position: relative; /*----*/margin: auto 10px;}</style></head><body><!-- header --><div class="headerbox"><div class="header"> <a href="http://www.uuspeed.com/" class="logo"><img src="images/logo.png" alt="优速云" /></a><ul class="nav"><li class="current"><a href="#">首 页</a></li><li class="1"><a href="#">个人版</a></li><li class="2"><a href="#">中小版</a></li><li class="3"><a href="#">企业版</a></li><li class="4"><a href="#">服务与价格</a></li><li class="5"><a href="#">关于我们</a></li></a></ul><div class="login"> <a href="" class="icon_login">登 录</a> <a href="" class="icon_login">注 册</a> </div></div></div></body></html>//// ------lavalamp.js文件修改--------------(function($) {$.fn.lavaLamp = function(o) {o = $.extend({ fx: "linear", speed: 500, click: function(){} }, o || {});return this.each(function() {var me = $(this),noop = function(el){},$back = $('<li class="back"><div class="left"></div></li>').appendTo(me),$li = $("li", this),curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0];$li.not(".back").hover(function() { move(this);});$(".nav li:eq(0) a").css("color","#FFF");function setCurr(el) {alert(el.offsetWidth);$back.css({ "left": el.offsetLeft+"px", "width": el.offsetWidth+"px" });curr = el;};function move(el) {$back.each(function() {$.dequeue(this, "fx"); }).animate({width: el.offsetWidth-40,left: el.offsetLeft}, o.speed, o.fx,function(){var a0=$(".nav li:eq(0) a");var a1=$(".nav li:eq(1) a");var a2=$(".nav li:eq(2) a");var a3=$(".nav li:eq(3) a");var a4=$(".nav li:eq(4) a");var a5=$(".nav li:eq(5) a");if(el.offsetLeft==0){$(".nav li:eq(0) a").css("color","#FFF");a1.css("color","#000");a2.css("color","#000");a3.css("color","#000");a4.css("color","#000");a5.css("color","#000");}if(el.offsetLeft==92){$(".nav li:eq(1) a").css("color","#FFF");a0.css("color","#000");a2.css("color","#000");a3.css("color","#000");a4.css("color","#000");a5.css("color","#000");}if(el.offsetLeft==194){$(".nav li:eq(2) a").css("color","#FFF");a1.css("color","#000");a0.css("color","#000");a3.css("color","#000");a4.css("color","#000");a5.css("color","#000");}if(el.offsetLeft==296){$(".nav li:eq(3) a").css("color","#FFF");a1.css("color","#000");a2.css("color","#000");a0.css("color","#000");a4.css("color","#000");a5.css("color","#000");}if(el.offsetLeft==398){$(".nav li:eq(4) a").css("color","#FFF");a1.css("color","#000");a2.css("color","#000");a3.css("color","#000");a0.css("color","#000");a5.css("color","#000");}if(el.offsetLeft==528){$(".nav li:eq(5) a").css("color&q补充:web前端 , JavaScript ,
上一个:深入浅出JSONP--解决ajax跨域问题
下一个:Extjs实现进度条
- 更多JAVA疑问解答:
- java怎么在线读取ftp服务器上的文件内容
- 关于程序员的职业规划
- HTML和JSP矛盾吗?
- java小程序如何打包?
- java怎么split路径文件名?
- 关于Hibernate实体自身多对一的抓取问题
- 关于apache2+tomcat群集出现的问题
- SSH 导入导出excel 谁有这块的资料吗?
- springmvc 加载一个jsp页面执行多个方法 报404
- 关于用jquery 导入 excel
- java对时间进行循环放到List中
- 一个图片的输入输出程序,第一次调用某方法会中断,第二次调用则正常
- 请上过传智播客的人说一下传智播客怎么样呀!是不是像它说的那样好呀!
- spring的schema怎么配置
- 【菜鸟求助】SSH中怎么从JSP页面往后台传值呢