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 相关文章推荐
DWR Ext 加载数据
Mar 22 Javascript
跨浏览器的事件对象介绍
Jun 27 Javascript
JS复制到剪贴板示例代码
Oct 30 Javascript
jquery加载图片时以淡入方式显示的方法
Jan 14 Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 Javascript
JavaScript中模拟实现jsonp
Jun 19 Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 Javascript
JavaScript学习笔记之数组的增、删、改、查
Mar 23 Javascript
Vue2单一事件管理组件通信
May 09 Javascript
JS中比较两个Object数组是否相等方法实例
Nov 11 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
Dec 30 Javascript
JavaScript canvas绘制圆弧与圆形
Feb 18 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
一个简易需要注册的留言版程序
2006/10/09 PHP
sourcesafe管理phpproj文件的补充说明(downmoon)
2009/04/11 PHP
php csv操作类代码
2009/12/14 PHP
提高php编程效率技巧
2015/08/13 PHP
PHP实现微信发红包程序
2015/08/24 PHP
将string解析为json的几种方式小结
2010/11/11 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
2013/12/11 Javascript
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
自定义事件解决重复请求BUG的问题
2017/07/11 Javascript
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
Angular事件之不同组件间传递数据的方法
2018/11/15 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
2019/02/01 Javascript
vue动态禁用控件绑定disable的例子
2019/10/28 Javascript
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
2020/09/07 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
2020/10/30 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
[32:30]夜魇凡尔赛茶话会 第一期01:谁是卧底
2021/03/11 DOTA
python实现支持目录FTP上传下载文件的方法
2015/06/03 Python
Python 内置函数complex详解
2016/10/23 Python
python 拷贝特定后缀名文件,并保留原始目录结构的实例
2018/04/27 Python
让代码变得更易维护的7个Python库
2018/10/09 Python
基于Python测试程序是否有错误
2020/05/16 Python
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
数据库什么时候应该被重组
2012/11/02 面试题
毕业生就业自荐信
2013/12/04 职场文书
科研课题实施方案
2014/03/18 职场文书
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
西安导游词
2015/02/12 职场文书
2016十一国庆节慰问信
2015/12/01 职场文书
python Polars库的使用简介
2021/04/21 Python
使用SQL实现车流量的计算的示例代码
2022/02/28 SQL Server
Spring this调用当前类方法无法拦截的示例代码
2022/03/20 Java/Android
Python基本知识点总结
2022/04/07 Python