JS下拉缓冲菜单示例代码
更新时间：2013年08月30日 16:34:32 作者：
下拉缓冲菜单效果想必大家都有见过吧，在本文使用JS轻松实现下，想学习的朋友可以参考下
复制代码 代码如下:
<!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>
相关文章
本文是函数式编程系列的第一篇文章。这里我会简要介绍一下编程范式，然后会直接介绍使用 Javascript 进行函数式编程的概念，因为 JavsScript 是最被认可的函数式程序语言之一。我们鼓励读者通过参考资料部分进一步了解这一迷人的概念2015-10-10
vite打包优化vite-plugin-compression的使用示例详解
这篇文章主要介绍了vite打包优化vite-plugin-compression的使用,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-09-09
非常不错的技术24点的游戏代码，他的算法值得学习，希望喜欢游戏的朋友，可以来看看2008-06-06
这篇文章主要介绍了ListBox实现上移,下移,左移,右移的简单实例。需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
这篇文章主要介绍了js删除对象中的某一个字段的方法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
这篇文章主要为大家详细介绍了六种javascript中实现数组扁平化的技巧,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以了解下2023-12-12
作用域是指程序源代码中定义变量的区域,作用域规定了如何查找变量，也就是确定当前执行代码对变量的访问权限,这篇文章主要给大家介绍了关于JavaScript静态作用域和动态作用域的相关资料,需要的朋友可以参考下2021-10-10
javascript正则表达式使用replace()替换手机号的方法
这篇文章主要介绍了javascript正则表达式使用replace()替换手机号的方法,可实现把手机号第4位到第7位替换成****的功能,是非常实用的技巧,需要的朋友可以参考下2015-01-01
经常有人问，百度地图JavaScript API能在同一页面显示多个地图吗？当然可以啊，为什么不可以呢？地图之于页面无非就是个div，我们可以在页面显示多个div，自然也可以显示多个地图。2013-04-04
BootStrap中的模态框（modal，弹出层）功能示例代码
bootstrap中的模态框（modal），不同于Tooltips，模态框以弹出对话框的形式出现，具有最小和最实用的功能集。这篇文章主要介绍了BootStrap中的模态框（modal，弹出层）,需要的朋友可以参考下2018-11-11
最新评论