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 相关文章推荐
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
Aug 28 Javascript
javascript在事件监听方面的兼容性小结
Apr 07 Javascript
HTML5附件拖拽上传drop &amp; google.gears实现代码
Apr 28 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
Dec 31 Javascript
如何判断微信内置浏览器(通过User Agent实现)
Sep 01 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
6种javascript显示当前系统时间代码
Dec 01 Javascript
input file上传 图片预览功能实例代码
Oct 25 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
JavaScript生成指定范围的时间列表
Mar 19 Javascript
原生js实现轮播图特效
May 04 Javascript
vue中实现图片压缩 file文件的方法
May 28 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自定义函数实现代码
2011/12/30 PHP
用PHP提取中英文词语以及数字的首字母的方法介绍
2013/04/23 PHP
php单态设计模式(单例模式)实例
2014/11/18 PHP
Smarty模板常见的简单应用分析
2016/11/15 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
php设计模式之代理模式分析【星际争霸游戏案例】
2020/03/23 PHP
jquery $(document).ready() 与window.onload的区别
2009/12/28 Javascript
jQuery-Tools-overlay 使用介绍
2012/07/14 Javascript
D3.js实现柱状图的方法详解
2016/09/21 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
2016/11/07 Javascript
微信小程序 label 组件详解及简单实例
2017/01/10 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
详解如何在vue项目中引入elementUI组件
2018/02/11 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
2018/08/06 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
2020/02/03 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
vue 封装面包屑组件教程
2020/11/16 Javascript
python数据结构树和二叉树简介
2014/04/29 Python
python完成FizzBuzzWhizz问题(拉勾网面试题)示例
2014/05/05 Python
python使用Queue在多个子进程间交换数据的方法
2015/04/18 Python
利用python将图片转换成excel文档格式
2017/12/30 Python
Python基础教程之利用期物处理并发
2018/03/29 Python
利用Pyhton中的requests包进行网页访问测试的方法
2018/12/26 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
后勤园长自我鉴定
2013/10/17 职场文书
软件工程师岗位职责
2013/11/16 职场文书
共产党员承诺书
2014/03/25 职场文书
2014年党员创先争优承诺书
2014/05/29 职场文书
大专应届毕业生求职信
2014/07/15 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
工作失职检讨书500字
2014/10/17 职场文书
师德先进个人材料
2014/12/20 职场文书
虎兄虎弟观后感
2015/06/12 职场文书
煤矿安全生产工作总结
2015/08/13 职场文书
Jupyter notebook 更改文件打开的默认路径操作
2021/05/21 Python
Java数据结构之链表相关知识总结
2021/06/18 Java/Android