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 25 Javascript
JavaScript触发器详解
Mar 10 Javascript
Mootools 1.2教程 类(一)
Sep 15 Javascript
JavaScript实用技巧(一)
Aug 16 Javascript
JavaScript继承方式实例
Oct 29 Javascript
jQuery lazyload 的重复加载错误以及修复方法
Nov 19 Javascript
简单js代码实现selece二级联动(推荐)
Feb 18 Javascript
jQuery队列操作方法实例
Jun 11 Javascript
jQuery中hover方法和toggle方法使用指南
Feb 27 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
Mar 20 Javascript
React 组件中的 bind(this)示例代码
Sep 16 Javascript
vue实现的下拉框功能示例
Jan 29 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
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
PHP编译安装中遇到的两个错误和解决方法
2014/08/20 PHP
实例说明js脚本语言和php脚本语言的区别
2019/04/04 PHP
使用jscript实现二进制读写脚本代码
2008/06/09 Javascript
18个非常棒的jQuery代码片段
2015/11/02 Javascript
jQuery如何获取动态添加的元素
2016/06/24 Javascript
JS DOMReady事件的六种实现方法总结
2016/11/23 Javascript
基于jQuery制作小图标上下滑动特效
2017/01/18 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
Vue二次封装axios为插件使用详解
2018/05/21 Javascript
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
react koa rematch 如何打造一套服务端渲染架子
2019/06/26 Javascript
Python的词法分析与语法分析
2013/05/18 Python
详解Python的Lambda函数与排序
2016/10/25 Python
Python3下错误AttributeError: ‘dict’ object has no attribute’iteritems‘的分析与解决
2017/07/06 Python
python实现隐马尔科夫模型HMM
2018/03/25 Python
Python对切片命名的实现方法
2018/10/16 Python
python实现石头剪刀布小游戏
2021/01/20 Python
python list数据等间隔抽取并新建list存储的例子
2019/11/27 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
tensorflow转换ckpt为savermodel模型的实现
2020/05/25 Python
python中scrapy处理项目数据的实例分析
2020/11/22 Python
纯HTML+CSS3制作导航菜单(附源码)
2013/04/24 HTML / CSS
突破canvas语法限制 让他支持链式语法
2012/12/24 HTML / CSS
介绍一下.net和Java的特点和区别
2012/09/26 面试题
联欢晚会主持词
2014/03/25 职场文书
学习经验交流会主持词
2014/04/01 职场文书
我的中国梦演讲稿800字
2014/08/19 职场文书
关于随地扔垃圾的检讨书
2014/09/30 职场文书
小学生通知书评语
2014/12/31 职场文书
实施意见格式范本
2015/06/05 职场文书
国庆节新闻稿
2015/07/17 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python
解析MySQL binlog
2021/06/11 MySQL
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL