JS下拉缓冲菜单示例代码

前端技术 2023/09/01 JavaScript
复制代码 代码如下:

<!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>
<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>JS下拉缓冲菜单_网页代码站()</title>
</head>

<body>
<div id=\"tab\">
<ul>
<li style=\"background:url(\'/images/20130826/psb1.png\')\">
<a href=\"#\">路飞</a>
<img src=\"/jscss/demoimg/201210/psb1.jpg\" class=\"map\" />
<span class=\"content\">草帽海贼团船长，特征是头戴草帽，天性乐观、热情、善良、天真、单纯。</span>
</li>
<li style=\"background:url(\'/images/20130826/psb1.png\')\">
<a href=\"#\">索隆</a>
<img src=\"/images/20130826/psb2.jpg\" class=\"map\" />
<span class=\"content\">草帽海贼团剑士，绿色头发，左耳戴三只黄色露珠耳环，绿色的肚兜,路痴。</span>
</li>
<li style=\"background:url(\'/images/20130826/psb1.png\')\">
<a href=\"#\">娜美</a>
<img src=\"/jscss/demoimg/201210/psb3.jpg\" class=\"map\" />
<span class=\"content\">精通气象学和航海术，擅长偷术、骗术、谈判及威胁恐吓，头脑聪明又机灵。</span>
</li>
<li style=\"background:url(\'/images/20130826/psb1.png\')\">
<a href=\"#\">山治</a>
<img src=\"/images/20130826/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>
<br />
http://user.qzone.qq.com/1198772766
</body>
</html>

本文地址：https://www.stayed.cn/item/2192

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案