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 相关文章推荐
超轻量级的基于jquery的三级展开列表
Apr 26 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
Dec 04 Javascript
node.js中的http.get方法使用说明
Dec 14 Javascript
jquery实现搜索框常见效果的方法
Jan 22 Javascript
JavaScript微信定位功能实现方法
Nov 29 Javascript
JS设置CSS样式的方式汇总
Jan 21 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
May 22 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 Javascript
tangram.js库实现js类的方式实例分析
Jan 06 Javascript
使用js实现将后台传入的json数据放在前台显示
Aug 06 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
Jun 09 Javascript
使用JS前端技术实现静态图片局部流动效果
Aug 05 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
风味层面去分析咖啡油脂
2021/03/03 咖啡文化
PHP APC的安装与使用详解
2013/06/13 PHP
多个PHP中文字符串截取函数
2013/11/12 PHP
PHP实现微信退款功能
2018/10/02 PHP
php实现微信分享朋友链接功能
2019/02/18 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
关于锚点跳转及jQuery下相关操作与插件
2012/10/01 Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
2013/03/26 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
Knockoutjs 学习系列(一)ko初体验
2016/06/07 Javascript
通过原生JS实现为元素添加事件的方法
2016/11/23 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
BootstrapTable加载按钮功能实例代码详解
2017/09/22 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
2018/02/22 Javascript
解决Vue打包后访问图片/图标不显示的问题
2019/07/25 Javascript
javascript操作元素的常见方法小结
2019/11/13 Javascript
JavaScript中this函数使用实例解析
2020/02/21 Javascript
js在HTML的三种引用方式详解
2020/08/29 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
[01:42]TI4西雅图DOTA2前线报道 第一顿早饭哦
2014/07/08 DOTA
使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子
2014/04/15 Python
python简单实现基数排序算法
2015/05/16 Python
Python安装使用命令行交互模块pexpect的基础教程
2016/05/12 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
Python中函数的基本定义与调用及内置函数详解
2019/05/13 Python
python使用tomorrow实现多线程的例子
2019/07/20 Python
Python调用graphviz绘制结构化图形网络示例
2019/11/22 Python
django实现将后台model对象转换成json对象并传递给前端jquery
2020/03/16 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
2020/04/02 Python
Python爬虫之Selenium下拉框处理的实现
2020/12/04 Python
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
后勤园长自我鉴定
2013/10/17 职场文书
幼儿园庆六一游园活动方案
2014/01/29 职场文书
煤矿安全生产责任书
2014/04/15 职场文书
三八红旗手先进事迹材料
2014/05/13 职场文书
业务员岗位职责
2015/02/03 职场文书