导航菜单效果（熔岩灯 flash效果）

最新推荐文章于 2021-03-02 12:35:13 发布

东成熙就

最新推荐文章于 2021-03-02 12:35:13 发布

阅读量1k

点赞数

分类专栏： JQuery插件 JQuery Javascript 文章标签：导航菜单效果

Javascript 同时被 3 个专栏收录

33 篇文章 1 订阅

订阅专栏

JQuery插件

8 篇文章 0 订阅

订阅专栏

JQuery

4 篇文章 0 订阅

订阅专栏

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

俩方法如下，

方法一：两个文件，一个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列表的样式文件。

详情参看：http://www.zhangxinxu.com/wordpress/2009/12/jquery-%E7%81%AB%E7%84%B0%E7%81%AF%E6%95%88%E6%9E%9C%E5%AF%BC%E8%88%AA%E8%8F%9C%E5%8D%95/

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