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 相关文章推荐
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
May 07 Javascript
js返回前一页刷新本页重载页面
Jul 29 Javascript
javascript实现控制div颜色
Jul 07 Javascript
javascript实现的闭包简单实例
Jul 17 Javascript
jQuery复制节点用法示例(clone方法)
Sep 08 Javascript
Angularjs之filter过滤器(推荐)
Nov 27 Javascript
浅谈React碰到v-if
Nov 04 Javascript
Vue实现简易翻页效果源码分享
Nov 08 Javascript
JS简单判断是否在微信浏览器打开的方法示例
Jan 08 Javascript
详解vue-element Tree树形控件填坑路
Mar 26 Javascript
Vue.extend 编程式插入组件的实现
Nov 18 Javascript
VSCode搭建Vue项目的方法
Apr 30 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 google或baidu分页代码
2009/11/26 PHP
php小偷相关截取函数备忘
2010/11/28 PHP
PHP使用SOAP调用API操作示例
2018/12/25 PHP
javascript 面向对象编程 万物皆对象
2009/09/17 Javascript
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
JSON.stringify 语法实例讲解
2012/03/14 Javascript
禁止选中文字兼容IE、Chrome、FF等
2013/09/04 Javascript
JS嵌套函数调用上下文的问题解决
2014/03/26 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
2014/09/24 Javascript
Javascript实现网络监测的方法
2015/07/31 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
2017/01/20 Javascript
原生JS仿QQ阅读点击展开、收起效果
2017/03/08 Javascript
实现jquery放大镜的两种方法
2018/02/22 jQuery
微信小程序按钮点击跳转页面详解
2019/05/06 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
2019/10/10 jQuery
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
2020/01/12 Javascript
javascript设计模式之装饰者模式
2020/01/30 Javascript
[02:23]2018DOTA2亚洲邀请赛趣味视频——反应测试
2018/04/04 DOTA
Python内存管理方式和垃圾回收算法解析
2017/11/11 Python
TensorFlow 滑动平均的示例代码
2018/06/19 Python
python-str,list,set间的转换实例
2018/06/27 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
在Ubuntu 20.04中安装Pycharm 2020.1的图文教程
2020/04/30 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
Linux如何为某个操作添加别名
2013/03/01 面试题
销售顾问的岗位职责
2013/11/13 职场文书
大学生毕业鉴定
2014/01/31 职场文书
中医学专业自荐信范文
2014/04/01 职场文书
小学生环保倡议书
2014/05/15 职场文书
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书
2017春节晚会开幕词
2016/03/03 职场文书
Python pygame实现中国象棋单机版源码
2021/06/20 Python
MySQL 数据库范式化设计理论
2022/04/22 MySQL