当前位置：首页 > 网页特效 > 导航菜单 >

jQuery头部弹动的缓冲菜单

时间：2013-04-01 21:35 来源：互联网作者：源码搜藏收藏推荐

<!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" />
<style>
body,html,div,ul,li,span,img,a{
	margin:0;
	padding:0;
}
a{
	text-decoration:none;
	color:#000;
	font-weight:bold;
	width:150px;
	display:inline-block;
	text-align:center;
}
li{
	list-style:none;
}
img{
	width:0;
	height:0;
	outline:none;
}
#tab{
	margin:200px 0 0 300px;
}
#tab li{
	float:left;
	width:150px;
	height:50px;
	line-height:50px;
	position:relative;
	margin-right:30px;
}
#tab img.map,#tab span.content{
	position:absolute;
}
#tab span.content{
	background:#333;
	color:#FFF;
	font-size:14px;
	text-align:center;
	height:0;
}
#tab img.map{
	left:50%;
	bottom:0;
}
</style>
<title>头部弹动的缓冲菜单</title>
</head>

<body>
<div id="tab">
  <ul>
    <li style="background:url('http://www.codefans.net/jscss/demoimg/201210/psb1.png')">
      <a href="#">路飞</a>
      <img src="http://www.codefans.net/jscss/demoimg/201210/psb1.jpg" class="map" />
      <span class="content">草帽海贼团船长，特征是头戴草帽，天性乐观、热情、善良、天真、单纯。</span>
    </li>
    <li style="background:url('http://www.codefans.net/jscss/demoimg/201210/psb1.png')">
      <a href="#">索隆</a>
     <img src="http://www.codefans.net/jscss/demoimg/201210/psb2.jpg" class="map" />
      <span class="content">草帽海贼团剑士，绿色头发，左耳戴三只黄色露珠耳环，绿色的肚兜,路痴。</span>
    </li>
    <li style="background:url('http://www.codefans.net/jscss/demoimg/201210/psb1.png')">
      <a href="#">娜美</a>
      <img src="http://www.codefans.net/jscss/demoimg/201210/psb3.jpg" class="map" />
      <span class="content">精通气象学和航海术，擅长偷术、骗术、谈判及威胁恐吓，头脑聪明又机灵。</span>
    </li>
    <li style="background:url('http://www.codefans.net/jscss/demoimg/201210/psb1.png')">
      <a href="#">山治</a>
      <img src="http://www.codefans.net/jscss/demoimg/201210/psb4.jpg" class="map" />
      <span class="content">草帽海贼团厨师，金发，有着卷曲眉毛，永远遮住半边脸的家伙，海贼中的绅士。</span>
    </li>
  </ul>
</div>
<script type="text/javascript">
function kzxf_zoom(id)
{
	this.initialize.apply(this, arguments)	
}

kzxf_zoom.prototype = 
{
	initialize : function()
	
	{
		
		var _this = this;
		this.wrapBox = document.getElementById('tab');
		this.oLi = this.wrapBox.getElementsByTagName('li');
		this.aImg = this.wrapBox.getElementsByTagName('img');
		this.content = this.wrapBox.getElementsByTagName('span');
		for(var i=0;i<this.oLi.length;i++)
		{
			(function(i){
				_this.oLi[i].onmouseover = function()
				
				{
					_this.jump(_this.aImg[i], _this.content[i]);

};
				_this.oLi[i].onmouseout = function()
				
				{
					_this.hidden(_this.aImg[i], _this.content[i]);
					
				};
				
			})(i)
			
		}
		
	},
	jump : function(obj1, obj2)
	
	{
		
		var _this = this;
		_this.animation(obj1, {height:130, width:160, marginLeft:-78, marginTop:-128},function(){
			_this.animation(obj1, {height:115, width:140, marginLeft:-70, marginTop:-115}, function(){
			_this.animation(obj1, {height:120, width:150, marginLeft:-75, marginTop:-120})
			})
		});
		_this.animation(obj2, {height:200});
	},        
	hidden : function(obj1, obj2)
	{
		var _this = this;
		_this.animation(obj1, {width:0, height:0, marginLeft:0, marginTop:0});
		_this.animation(obj2, {height:0});
	},
	animation : function(obj, oAttr, fnCallBack)
	{
		var _this = this;
		clearInterval(obj.timer);
		obj.timer = setInterval(function()
		{
		var bStop = true;
		for(proper in oAttr)
		    {
				
				var iCur = parseFloat(_this.css(obj, proper));
				
				proper == 'opacity' && (iCur = parseInt(iCur.toFixed(2) * 100));
				
				var iSpeed = (oAttr[proper] - iCur) / 5;
				
				iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                
                if(iCur != oAttr[proper])
			
			   {
				
				  bStop = false;
				
				  _this.css(obj, proper, iCur + iSpeed);
				
			   }
				
			}
			
			if(bStop)
			
			{
				
				clearInterval(obj.timer);
				
				fnCallBack && fnCallBack.apply(_this, arguments);
				
			}
			
		},20);
		
	},
			
	css : function(obj, attr, value)
	
	{
		
		if(arguments.length == 2)
		
		{
			
			return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]
			
		}
		
		if(arguments.length == 3)
		
		{
			
			switch(attr)
			
			{
				
				case 'width' :
				
				case 'height' :
				
				case 'top' :
				
				case 'bottom' :
				
				case 'left' :
                
                case 'marginLeft':
                
			    case 'marginTop':
				
				obj.style[attr] = value + 'px';
				
				break;
				
				case 'opacity' :
				
				obj.style.filter = 'alpha(opacity = '+value+' )';
				
				obj.style.opacity = value / 100;
				
				break;
				
				default :
				
				obj.style[attr] = value;
				
				break;
				
			}
			
		}
		
	}
	
};
window.onload = function()
{
	new kzxf_zoom('tab')
	
};

</script>
</body>
</html>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

头部弹动的缓冲菜单，需要在火狐下去等才能看到正常效果，其实是一个TAB菜单，重新加入了缓冲效果和头部弹动的缓冲效果。由源码搜藏网整理,转载请注明出处https://www.codesocang.com/tx-daohang/1024.html

网页特效

jQuery头部弹动的缓冲菜单

导航菜单下载排行

最新文章