JS下拉缓冲菜单示例代码


Posted in Javascript onAugust 30, 2013
<!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 相关文章推荐
Mozilla中显示textarea中选择的文字
Sep 07 Javascript
用js写了一个类似php的print_r输出换行功能
Feb 18 Javascript
利用毫秒减值计算时长的js代码
Sep 22 Javascript
node.js中的fs.readdirSync方法使用说明
Dec 17 Javascript
jQuery中:radio选择器用法实例
Jan 03 Javascript
JavaSacript中charCodeAt()方法的使用详解
Jun 05 Javascript
jQuery往textarea中光标所在位置插入文本的方法
Jun 26 Javascript
jQuery实现的经典滑动门效果
Sep 22 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
Mar 25 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
Nov 29 Javascript
微信小程序实现联动选择器
Feb 15 Javascript
JavaScript的级联函数用法简单示例【链式调用】
Mar 26 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
Aug 30 #Javascript
JQuery设置文本框和密码框得到焦点时的样式
Aug 30 #Javascript
ComboBox 和 DateField 在IE下消失的解决方法
Aug 30 #Javascript
图片Slider 带左右按钮的js示例
Aug 30 #Javascript
javaScript 动态访问JSon元素示例代码
Aug 30 #Javascript
Jquery读取URL参数小例子
Aug 30 #Javascript
返回页面顶部top按钮通过锚点实现(自写)
Aug 30 #Javascript
You might like
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
关于PhpStorm设置点击编辑文件自动定位源文件的实现方式
2020/12/30 PHP
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
2007/04/12 Javascript
Jquery+JSon 无刷新分页实现代码
2010/04/01 Javascript
需要做特殊处理的DOM元素属性的访问
2010/11/05 Javascript
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
javascript自定义startWith()和endWith()的两种方法
2013/11/11 Javascript
checkbox全选所涉及到的知识点介绍
2013/12/31 Javascript
jQuery对指定元素中指定字符串进行替换的方法
2015/03/17 Javascript
微信开发 微信授权详解
2016/10/21 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
2016/12/27 Javascript
js设置文字颜色的方法示例
2016/12/30 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
2017/06/26 Javascript
详解vue2父组件传递props异步数据到子组件的问题
2017/06/29 Javascript
用jquery获取select标签中选中的option值及文本的示例
2018/01/25 jQuery
10 种最常见的 Javascript 错误(频率最高)
2018/02/08 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
2018/02/22 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
2018/04/24 Javascript
JS实现页面数据懒加载
2020/02/13 Javascript
[02:08:58]2014 DOTA2国际邀请赛中国区预选赛 Ne VS CIS
2014/05/22 DOTA
在Django的视图中使用form对象的方法
2015/07/18 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
set在python里的含义和用法
2019/06/24 Python
关于Keras模型可视化教程及关键问题的解决
2020/01/24 Python
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
超市重阳节活动方案
2014/02/10 职场文书
解除劳动合同协议书范本
2014/04/14 职场文书
热爱祖国演讲稿
2014/05/04 职场文书
上海世博会口号
2014/06/19 职场文书
检讨书格式
2015/01/23 职场文书
幼师辞职信怎么写
2015/02/27 职场文书
餐厅开业活动方案
2019/07/08 职场文书
Pytorch 中net.train 和 net.eval的使用说明
2021/05/22 Python
Python max函数中key的用法及原理解析
2021/06/26 Python