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项链效果
Feb 13 Javascript
Javascript中setTimeOut和setInterval的定时器用法
Jun 12 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
laypage分页控件使用实例详解
May 19 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
Nov 29 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
Nov 14 Javascript
js登录滑动验证的实现(不滑动无法登陆)
Jan 03 Javascript
监听element-ui table滚动事件的方法
Mar 26 Javascript
JS 创建对象的模式实例小结
Apr 28 Javascript
React 条件渲染最佳实践小结(7种)
Sep 27 Javascript
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实现的曲线统计图表示例
2016/11/10 PHP
php实现xml转换数组的方法示例
2017/02/03 PHP
PHP编程实现多维数组按照某个键值排序的方法小结【2种方法】
2017/04/27 PHP
PHP getName()函数讲解
2019/02/03 PHP
JS下高效拼装字符串的几种方法比较与测试代码
2010/04/15 Javascript
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
2014/12/15 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
javascript清空table表格的方法
2015/05/14 Javascript
jquery实现图片上传之前预览的方法
2015/07/11 Javascript
jQuery zclip插件实现跨浏览器复制功能
2015/11/02 Javascript
jquery实现两边飘浮可关闭的对联广告
2015/11/27 Javascript
angular实现商品筛选功能
2017/02/01 Javascript
详解http访问解析流程原理
2017/10/18 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
基于JavaScript判断两个对象内容是否相等
2020/01/10 Javascript
Vue项目中使用flow做类型检测的方法
2020/03/18 Javascript
[46:44]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第二场 3月7日
2021/03/11 DOTA
在python的类中动态添加属性与生成对象
2016/09/17 Python
详解Python字典的操作
2019/03/04 Python
Python将文字转成语音并读出来的实例详解
2019/07/15 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
python 6行代码制作月历生成器
2020/09/18 Python
任意存:BOXFUL
2018/05/21 全球购物
大学本科生的个人自我评价
2013/12/09 职场文书
煤矿机修工岗位职责
2014/02/07 职场文书
给公司的建议书范文
2014/05/13 职场文书
基层党支部公开承诺书
2014/05/29 职场文书
小区门卫的岗位职责
2014/09/26 职场文书
基层工作经历证明
2015/06/19 职场文书
公文写作:教你写“建议书”
2019/05/07 职场文书
2019年关于小学生课外阅读情况的分析报告
2019/12/02 职场文书
导游词之安徽醉翁亭
2020/01/10 职场文书
Java 中的 Lambda List 转 Map 的多种方法详解
2022/07/07 Java/Android
postgresql中如何执行sql文件
2023/05/08 PostgreSQL