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 相关文章推荐
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
Mar 06 Javascript
javascript 设置文本框中焦点的位置
Nov 20 Javascript
基于jquery的关于动态创建DOM元素的问题
Dec 24 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
Sep 05 Javascript
js中的如何定位固定层的位置
Jun 15 Javascript
在Google 地图上实现做的标记相连接
Jan 05 Javascript
浅谈javascript 迭代方法
Jan 21 Javascript
原生js和css实现图片轮播效果
Feb 07 Javascript
js实现抽奖效果
Mar 27 Javascript
JS实现碰撞检测的方法分析
Jan 19 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
Feb 10 Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 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
跟我学Laravel之路由
2014/10/15 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
php7 参数、整形及字符串处理机制修改实例分析
2020/05/25 PHP
使弱类型的语言JavaScript变强势
2009/06/22 Javascript
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
ajax更新数据后,jquery、jq失效问题
2011/03/16 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
2013/06/05 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
2013/12/31 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
2014/06/30 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
2015/04/16 Javascript
js实现不重复导入的方法
2016/03/02 Javascript
Bootstrap 附加导航(Affix)插件实例详解
2016/06/01 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
2016/11/24 Javascript
Vue数据驱动模拟实现5
2017/01/13 Javascript
从parcel.js打包出错到选择nvm的全部过程
2018/01/23 Javascript
使用node.js实现微信小程序实时聊天功能
2018/08/13 Javascript
在主机商的共享服务器上部署Django站点的方法
2015/07/22 Python
Python实现自动添加脚本头信息的示例代码
2016/09/02 Python
Python实现抢购IPhone手机
2018/02/07 Python
python语音识别实践之百度语音API
2018/08/30 Python
在Python中使用Neo4j的方法
2019/03/14 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
python 三种方法提取pdf中的图片
2021/02/07 Python
html5新增的定时器requestAnimationFrame实现进度条功能
2018/12/13 HTML / CSS
elf彩妆英国官网:e.l.f. Cosmetics英国(美国平价彩妆品牌)
2017/11/02 全球购物
远程调用的原理
2014/07/05 面试题
测试工程师程序员求职信范文
2014/02/20 职场文书
团组织推荐意见
2015/06/05 职场文书
2016中秋晚会开幕词
2016/03/03 职场文书
2016年离婚协议书范文
2016/03/18 职场文书
入党申请书怎么写?
2019/06/11 职场文书
MySQL触发器的使用
2021/05/24 MySQL
MySQL连表查询分组去重的实现示例
2021/07/01 MySQL