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 20 Javascript
js计算精度问题小结
Apr 22 Javascript
js如何获取object类型里的键值
Feb 18 Javascript
一系列Bootstrap导航条使用方法分享
Apr 29 Javascript
轻松掌握JavaScript装饰者模式
Aug 27 Javascript
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
js+canvas实现验证码功能
Sep 21 Javascript
JavaScript静态作用域和动态作用域实例详解
Jun 17 Javascript
javascript实现导航栏分页效果
Jun 27 Javascript
JS工厂模式开发实践案例分析
Oct 17 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
Aug 14 Javascript
JavaScript大数相加相乘的实现方法实例
Oct 18 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
javascript StringBuilder类实现
2008/12/22 Javascript
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
2009/11/12 Javascript
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
jQuery-ui中自动完成实现方法
2010/06/10 Javascript
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
JavaScript数组随机排列实现随机洗牌功能
2015/03/19 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
2016/02/17 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
JS简单实现获取元素的封装操作示例
2017/04/07 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
2017/09/17 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
解决element UI 自定义传参的问题
2018/08/22 Javascript
微信小程序获取用户openid的实现
2018/12/24 Javascript
微信小程序时间标签和时间范围的联动效果
2019/02/15 Javascript
js实现数字跳动到指定数字
2020/08/25 Javascript
用python登录Dr.com思路以及代码分享
2014/06/25 Python
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
实例讲解Python中global语句下全局变量的值的修改
2016/06/16 Python
解析Python中的生成器及其与迭代器的差异
2016/06/20 Python
Python元组及文件核心对象类型详解
2018/02/11 Python
详解python中sort排序使用
2019/03/23 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
Pycharm-community-2020.2.3 社区版安装教程图文详解
2020/12/08 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
python实现杨辉三角的几种方法代码实例
2021/03/02 Python
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
HTML5上传文件显示进度的实现代码
2012/08/30 HTML / CSS
宗教学大学生职业生涯规划范文
2014/02/08 职场文书
计算机学生的自我评价分享
2014/02/18 职场文书
建议书范文
2015/02/05 职场文书
2020年元旦祝福语录,总有适合你的
2019/12/31 职场文书
CSS 圆形进度栏
2021/04/06 HTML / CSS
详解MySQL多版本并发控制机制(MVCC)源码
2021/06/23 MySQL
详解Oracle块修改跟踪功能
2021/11/07 Oracle
MySQL数据库完全卸载的方法
2022/03/03 MySQL
mysql函数之截取字符串的实现
2022/08/14 MySQL