您的位置:首页 > Web前端 > JavaScript

基于JavaScript实现熔岩灯效果导航菜单

2017-01-04 15:07 801 查看

熔岩灯效果 就是鼠标移入的时候,背景跟着滑过去~

两方法如下:

方法一:两个文件,一个HTML,一个JS。

HTML源码,

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="favicon.ico" rel="Bookmark" type="image/x-icon" />
-->
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<link href="" rel="stylesheet" />
<style type="text/css">
#nav {
position: relative;
background: #292929;
float: left;
}
#nav li {
float: left;
list-style: none;
border-right: 1px solid #4a4a4a;
border-left: 1px solid black;
}
#nav li a {
color: #e3e3e3;
position: relative;
z-index: 2;
float: left;
font-size: 30px;
font-family: helvetica, arial, sans-serif;
text-decoration: none;
padding: 30px 45px;
}
ul, li {
margin: 0; padding: 0;
}
#blob {
border-right: 1px solid #0059ec;
border-left: 1px solid #0059ec;
position: absolute;
top: 0;
z-index : 1;
background: #0b2b61;
background: -moz-linear-gradient(top, #0b2b61, #1153c0);
background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 2px 3px 10px #011331;
-webkit-box-shadow: 2px 3px 10px #011331;
}
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.spasticNav.js"></script>
</head>
<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li id="selected"><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
<script type="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);
return this.each(function() {
var nav = $(this),
currentPageItem = $('#selected', nav),
blob,
reset;
$('<li id="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() {
// mouse over
clearTimeout(reset);
blob.animate(
{
left : $(this).position().left,
width : $(this).width()
},
{
duration : options.speed,
easing : options.easing,
queue : false
}
);
}, function() {
// mouse out
reset = setTimeout(function() {
blob.animate({
width : currentPageItem.outerWidth(),
left : currentPageItem.position().left
}, options.speed)
}, options.reset);
});
}); // end each
};
})(jQuery);

方法二,使用jquery插件 jquery.lavalamp.min.js 实现。

需要调用的文件有:jQuery库,jQuery缓动插件(jquery.easing.min.js),火焰灯效果插件(jquery.lavalamp.min.js)以及一个ul li列表的样式文件。

详情参看:https://www.geek-share.com/detail/2694512560.html

插件官网介绍:http://lavalamp.magicmediamuse.com

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  js 导航菜单