脚本宝典收集整理的这篇文章主要介绍了js实例教程-jQuery 借助插件Lavalamp实现导航条动态美化效果，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
借助 插件 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 -->
<p class="headerbox">
<p 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>
<p class="login"> <a href="" class="icon_login">登 录</a> <a href="" class="icon_login">注 册</a> </p>
</p>
</p>
</body>
</htML>
. 代码如下:
(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"><p class="left"></p></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);
借助 插件 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 -->
<p class="headerbox">
<p 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>
<p class="login"> <a href="" class="icon_login">登 录</a> <a href="" class="icon_login">注 册</a> </p>
</p>
</p>
</body>
</html>
. 代码如下:
(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"><p class="left"></p></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);
觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！ js技巧，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的js实例教程-jQuery 借助插件Lavalamp实现导航条动态美化效果全部内容，希望文章能够帮你解决js实例教程-jQuery 借助插件Lavalamp实现导航条动态美化效果所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。