jQuery 借助插件Lavalamp实现导航条动态美化效果


Posted in Javascript onSeptember 27, 2013

借助 插件 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","#FFF"); 
a1.css("color","#000"); 
a2.css("color","#000"); 
a3.css("color","#000"); 
a4.css("color","#000"); 
a0.css("color","#000"); 
} 
}); 
}; 

}); 
}; 
})(jQuery);

效果见http://www.uuspeed.com/
Javascript 相关文章推荐
解析使用JS 清空File控件的路径值
Jul 08 Javascript
jQuery Ajax调用WCF服务详细教程
Mar 31 Javascript
javascript实现自动输出文本(打字特效)
Aug 27 Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 Javascript
微信小程序-滚动消息通知的实例代码
Aug 03 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 Javascript
从零开始搭建一个react项目开发
Feb 09 Javascript
详解Next.js页面渲染的优化方案
Jan 27 Javascript
js module大战
Apr 19 Javascript
浅谈vue中组件绑定事件时是否加.native
Nov 09 Javascript
jQuery实现滑动开关效果
Aug 02 jQuery
Vue实现小购物车功能
Dec 21 Vue.js
jquery $.each 和for怎么跳出循环终止本次循环
Sep 27 #Javascript
jquery ajax 调用失败的原因示例介绍
Sep 27 #Javascript
写得不错的jquery table鼠标经过变色代码
Sep 27 #Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
Sep 27 #Javascript
jquery ready函数、css函数及text()使用示例
Sep 27 #Javascript
javascript full screen 全屏显示页面元素的方法
Sep 27 #Javascript
实现动画效果核心方式的js代码
Sep 27 #Javascript
You might like
纯php打造的tab选项卡效果代码(不用js)
2010/12/29 PHP
php数组函数序列之prev() - 移动数组内部指针到上一个元素的位置,并返回该元素值
2011/10/31 PHP
javascript实现的像java、c#之类的sleep暂停的函数代码
2010/03/04 Javascript
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
Webkit的跨域安全问题说明
2011/09/13 Javascript
最短的javascript:地址栏载入脚本代码
2011/10/13 Javascript
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
完美解决IE低版本不支持call与apply的问题
2013/12/05 Javascript
Array 重排序方法和操作方法的简单实例
2014/01/24 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
微信小程序 wxapp导航 navigator详解
2016/10/31 Javascript
JS基于正则表达式的替换操作(replace)用法示例
2017/04/28 Javascript
prototype.js简单实现ajax功能示例
2017/10/18 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
2017/10/31 Javascript
原生js实现拖拽功能基本思路详解
2018/04/18 Javascript
Vue项目全局配置微信分享思路详解
2018/05/04 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
2018/08/30 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
[00:20]TI9不朽观赛名额抽取
2019/08/05 DOTA
python strip()函数 介绍
2013/05/24 Python
python实现通过shelve修改对象实例
2014/09/26 Python
python opencv实现图片缺陷检测(讲解直方图以及相关系数对比法)
2020/04/07 Python
如何完美的建立一个python项目
2020/10/09 Python
python 下划线的不同用法
2020/10/24 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
AmazeUI 网格的实现示例
2020/08/13 HTML / CSS
大二学期个人自我评价
2014/01/13 职场文书
销售经理工作职责
2014/02/03 职场文书
社会学专业求职信
2014/02/24 职场文书
竞争上岗演讲稿范文
2014/05/12 职场文书
银行优秀员工事迹材料
2014/05/29 职场文书
普通党员群众路线教育实践活动心得体会
2014/11/04 职场文书
部队2014年终工作总结
2014/11/27 职场文书
2014年党风廉政工作总结
2014/12/03 职场文书