脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → 导航条动态美化

jQuery 借助插件Lavalamp实现导航条动态美化效果

 更新时间：2013年09月27日 17:43:50   作者：  
导航条动态显示效果借助插件Lavalamp可以轻松实现,以前用animate来实现，效果不是很好
借助 插件 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="#">首&nbsp;页</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库中ready方法的学习教程

    JavaScript的jQuery库中ready方法的学习教程

    这篇文章主要介绍了JavaScript的jQuery库中ready方法的学习教程,包括ready的相关简短写法,rally cool,需要的朋友可以参考下
    2015-08-08
  • jquery使用经验小结

    jquery使用经验小结

    本文给大家分享的是个人在使用jQuery的过程中总结的5点比较重要的知识点，这里推荐给小伙伴们，有需要的童鞋可以参考下。
    2015-05-05
  • jquery插件qrcode在线生成二维码

    jquery插件qrcode在线生成二维码

    jquery.qrcode是一个强大的jquery的插件,可以用来二维码图形的渲染,用于生成二维码,非常的实用，需要的朋友参考下。
    2015-04-04
  • 优化Jquery,提升网页加载速度

    优化Jquery,提升网页加载速度

    本文是对优化Jquery,提升网页加载速度方面进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2013-11-11
  • 通过点击jqgrid表格弹出需要的表格数据

    通过点击jqgrid表格弹出需要的表格数据

    在众多的表格插件中，jqgrid的特点是非常鲜明的，所以jqgrid表格插件用处非常广泛，本篇文章给大家介绍通过点击jqgrid表格弹出需要的表格数据，需要的朋友参考下
    2015-12-12
  • 基于jquery实现无限级树形菜单

    基于jquery实现无限级树形菜单

    这篇文章主要为大家详细介绍了基于jquery实现无限级树形菜单的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-03-03
  • jquery显示loading图片直到网页加载完成的方法

    jquery显示loading图片直到网页加载完成的方法

    这篇文章主要介绍了jquery显示loading图片直到网页加载完成的方法,涉及jquery页面加载与动画效果的使用技巧,需要的朋友可以参考下
    2015-06-06
  • jQuery实现点击按钮弹出可拖拽模态对话框完整实例【测试可用】

    jQuery实现点击按钮弹出可拖拽模态对话框完整实例【测试可用】

    这篇文章主要介绍了jQuery实现点击按钮弹出可拖拽模态对话框的方法,结合完整实例形式分析了jQuery调用模态对话框的基本原理、实现方法与相关操作技巧,需要的朋友可以参考下
    2023-04-04
  • JQuery筛选器全系列介绍

    JQuery筛选器全系列介绍

    jQuery提供了强大的选择器让我们获取对象。在这边，我人为地将jQuery选择器分为两大部分：选择对象和筛选条件。选择对象表示要获取什么对象，筛选条件是对获取的对象进行筛选，最终留下符合某些特征的对象
    2013-08-08
  • jQuery 操作XML入门

    jQuery 操作XML入门

    jQuery 操作Xml 入门级代码
    2008-12-12

最新评论