基于JavaScript实现熔岩灯效果导航菜单
熔岩灯效果就是鼠标移入的时候，背景跟着滑过去~
两方法如下：
方法一：两个文件，一个HTML，一个JS。
HTML源码，
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1">
<!--
<linkhref="favicon.ico"rel="shortcuticon"type="image/x-icon"/>
<linkhref="favicon.ico"rel="Bookmark"type="image/x-icon"/>
-->
<metaname="Generator"content="EditPlus®">
<metaname="Author"content="">
<metaname="Keywords"content="">
<metaname="Description"content="">
<title>Document</title>
<linkhref=""rel="stylesheet"/>
<styletype="text/css">
#nav{
position:relative;
background:#292929;
float:left;
}
#navli{
float:left;
list-style:none;
border-right:1pxsolid#4a4a4a;
border-left:1pxsolidblack;
}
#navlia{
color:#e3e3e3;
position:relative;
z-index:2;
float:left;
font-size:30px;
font-family:helvetica,arial,sans-serif;
text-decoration:none;
padding:30px45px;
}
ul,li{
margin:0;padding:0;
}
#blob{
border-right:1pxsolid#0059ec;
border-left:1pxsolid#0059ec;
position:absolute;
top:0;
z-index:1;
background:#0b2b61;
background:-moz-linear-gradient(top,#0b2b61,#1153c0);
background:-webkit-gradient(linear,lefttop,leftbottom,from(#0b2b61),to(#1153c0));
-moz-border-radius:4px;
-webkit-border-radius:4px;
-moz-box-shadow:2px3px10px#011331;
-webkit-box-shadow:2px3px10px#011331;
}
</style>
<scripttype="text/javascript"src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<scripttype="text/javascript"src="http://apps.bdimg.com/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<scripttype="text/javascript"src="jquery.spasticNav.js"></script>
</head>
<body>
<ulid="nav">
<li><ahref="#">Home</a></li>
<liid="selected"><ahref="#">About</a></li>
<li><ahref="#">Blog</a></li>
<li><ahref="#">Contact</a></li>
</ul>
<scripttype="text/javascript">
$('#nav').spasticNav();
</script>
</body>
</html>
JS源码，
(function($){
$.fn.spasticNav=function(options){
options=$.extend({
overlap:15,
speed:500,
reset:1500,
color:'#9f1f31',
easing:'easeOutExpo'
},options);
returnthis.each(function(){
varnav=$(this),
currentPageItem=$('#selected',nav),
blob,
reset;
$('<liid="blob"></li>').css({
width:currentPageItem.outerWidth(),
height:currentPageItem.outerHeight()+options.overlap,
left:currentPageItem.position().left,
top:currentPageItem.position().top-options.overlap/2,
backgroundColor:options.color
}).appendTo(this);
blob=$('#blob',nav);
$('li:not(#blob)',nav).hover(function(){
//mouseover
clearTimeout(reset);
blob.animate(
{
left:$(this).position().left,
width:$(this).width()
},
{
duration:options.speed,
easing:options.easing,
queue:false
}
);
},function(){
//mouseout
reset=setTimeout(function(){
blob.animate({
width:currentPageItem.outerWidth(),
left:currentPageItem.position().left
},options.speed)
},options.reset);
});
});//endeach
};
})(jQuery);
方法二，使用jquery插件jquery.lavalamp.min.js实现。
需要调用的文件有：jQuery库，jQuery缓动插件（jquery.easing.min.js），火焰灯效果插件（jquery.lavalamp.min.js）以及一个ulli列表的样式文件。
详情参看：https://www.nhooo.com/article/102028.htm
插件官网介绍：http://lavalamp.magicmediamuse.com
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。