jQuery火焰灯动画导航条特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery火焰灯动画导航条特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery火焰灯动画导航条</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{background:#eeeeee;color:#333333;font-family:'宋体',Verdana, Geneva, sans-serif;}
.zxx_test_list{width:520px;margin:40px auto;}
.zxx_test_list{border-bottom:0; padding-bottom:40px;}
.zxx_test_list h3{margin-top:35px;margin-bottom:20px;}
</style>

<link rel="stylesheet" href="css/lava_lamp_demo.css" type="text/css" />

<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#1, #2, #3").lavaLamp({
		fx: "backout", //缓动类型
		speed: 700, //缓动时间
		click: function(event, menuItem) {
			return false; //单击触发事件
		}
	});
});
</script>

</head>

<body>


<div class="zxx_test_list">
	<h3>1.背景图片</h3>
	<ul class="lava_with_image fix" id="1">
		<li class="current"><a href="#zhangxinxu">圣诞节</a></li>
		<li><a href="#zhangxinxu">地震</a></li>
		<li><a href="#zhangxinxu">股市</a></li>
		<li><a href="#zhangxinxu">《十月围城》</a></li>
		<li><a href="#zhangxinxu">无线音乐咪咕汇</a></li>
	</ul>
	<h3>2.没有背景图片</h3>
	<ul class="lava_no_image fix" id="2">
		<li class="current"><a href="#zhangxinxu">圣诞节</a></li>
		<li><a href="#zhangxinxu">地震</a></li>
		<li><a href="#zhangxinxu">股市</a></li>
		<li><a href="#zhangxinxu">《十月围城》</a></li>
		<li><a href="#zhangxinxu">无线音乐咪咕汇</a></li>
	</ul>
	<h3>3.下边框</h3>
	<ul class="lava_with_border fix" id="3">
		<li class="current"><a href="#zhangxinxu">圣诞节</a></li>
		<li><a href="#zhangxinxu">地震</a></li>
		<li><a href="#zhangxinxu">股市</a></li>
		<li><a href="#zhangxinxu">《十月围城》</a></li>
		<li><a href="#zhangxinxu">无线音乐咪咕汇</a></li>
	</ul>
</div>
</body>
</html>

JS代码(jquery.lavalamp.min.js):

/** * LavaLamp - A menu plugin for jQuery with cool hover effects. * @requires jQuery v1.1.3.1 or above * * http://gmarwaha.com/blog/?p=7 * * Copyright (c) 2007 Ganeshji Marwaha (gmarwaha.com) * Dual licensed under the MIT and GPL licenses:* http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html * * Version:0.2.0 * Requires Jquery 1.2.1 from version 0.2.0 onwards. * For jquery 1.1.x,use version 0.1.0 of lavalamp */
(function($){
	$.fn.lavaLamp=function(o){
	o=$.extend({
	fx:"linear",speed:500,click:function(){
}
}
,o||{
}
);
	return this.each(function(){
	var b=$(this),noop=function(){
}
,$back=$('<li class="back"><div class="left"></div></li>').appendTo(b),$li=$("li",this),curr=$("li.current",this)[0]||$($li[0]).addClass("current")[0];
	$li.not(".back").hover(function(){
	move(this)}
,noop);
	$(this).hover(noop,function(){
	move(curr)}
);
	$li.click(function(e){
	setCurr(this);
	return o.click.apply(this,[e,this])}
);
	setCurr(curr);
	function setCurr(a){
	$back.css({
	"left":a.offsetLeft+"px","width":a.offsetWidth+"px"}
);
	curr=a}
;
	function move(a){
	$back.each(function(){
	$(this).dequeue()}
).animate({
	width:a.offsetWidth,left:a.offsetLeft}
,o.speed,o.fx)}
}
)}
}
)(jQuery);

CSS代码(lava_lamp_demo.css):

@charset "utf-8";/*有背景图片*/
.lava_with_image{position:relative;width:421px;height:29px;padding:15px;background:url(../image/lava_bg.gif) no-repeat;}
.lava_with_image li{float:left;}
.lava_with_image li a{float:left;font-weight:bold;color:white;font-size:14px;top:8px;margin:auto 10px;text-decoration:none;position:relative;z-index:3;}
.lava_with_image li a:hover{text-decoration:none;color:white;}
.lava_with_image li.back{height:30px;background:url(../image/lava_menu_bg.gif) no-repeat right -30px;position:absolute;z-index:2;}
.lava_with_image li.back .left{height:100%;margin-right:9px;background:url(../image/lava_menu_bg.gif) no-repeat;}
/*无背景图片*/
.lava_no_image{position:relative;width:421px;height:29px;padding:15px;border:1px solid silver;}
.lava_no_image li{float:left;}
.lava_no_image li a{float:left;font-weight:bold;color:#333333;font-size:14px;top:8px;margin:auto 10px;text-decoration:none;position:relative;z-index:3;}
.lava_no_image li a:hover{text-decoration:none;color:#333333;}
.lava_no_image li.back{height:30px;background:#eeeeee;border:1px solid #bcbcbc;position:absolute;z-index:2;}
/*下边框*/
.lava_with_border{position:relative;width:421px;height:29px;padding:15px;border:1px solid silver;}
.lava_with_border li{float:left;}
.lava_with_border li a{float:left;font-weight:bold;color:#333333;font-size:14px;top:8px;margin:auto 10px;text-decoration:none;position:relative;z-index:3;}
.lava_with_border li a:hover{text-decoration:none;color:#333333;}
.lava_with_border li.back{height:30px;border-bottom:3px solid #34538b;position:absolute;z-index:2;}

附件:下载该文件资源,减少时间成本(增值服务)