网站首页
网站导航
Ctrl+D收藏
首 页
代码段
源码包
文档库
工具箱
代码语言
.
CSharp
.
JS
Java
Asp.Net
C
MSSQL
PHP
Css
PLSQL
Python
Shell
EBS
ASP
Perl
ObjC
VB.Net
VBS
MYSQL
GO
Delphi
AS
DB2
Domino
Rails
ActionScript
Scala
代码分类
文件
系统
字符串
数据库
网络相关
图形/GUI
多媒体
算法
游戏
Jquery
Extjs
Android
HTML5
菜单
网页交互
WinForm
控件
企业应用
安全与加密
脚本/批处理
开放平台
其它
【
JS
】
jQuery头部弹动的缓冲菜单
作者:
Dezai.CN
/ 发布于
2013/4/18
/
532
头部弹动的缓冲菜单,需要在火狐下去等才能看到正常效果,其实是一个TAB菜单,重新加入了缓冲效果和头部弹动的缓冲效果。
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <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>头部弹动的缓冲菜单</title> </head> <body> <div id="tab"> <ul> <li style="background:url('/jscss/demoimg/201210/psb1.png')"> <a href="#">路飞</a> <img src="/jscss/demoimg/201210/psb1.jpg" class="map" /> <span class="content">草帽海贼团船长,特征是头戴草帽,天性乐观、热情、善良、天真、单纯。</span> </li> <li style="background:url('/jscss/demoimg/201210/psb1.png')"> <a href="#">索隆</a> <img src="/jscss/demoimg/201210/psb2.jpg" class="map" /> <span class="content">草帽海贼团剑士,绿色头发,左耳戴三只黄色露珠耳环,绿色的肚兜,路痴。</span> </li> <li style="background:url('/jscss/demoimg/201210/psb1.png')"> <a href="#">娜美</a> <img src="/jscss/demoimg/201210/psb3.jpg" class="map" /> <span class="content">精通气象学和航海术,擅长偷术、骗术、谈判及威胁恐吓,头脑聪明又机灵。</span> </li> <li style="background:url('/jscss/demoimg/201210/psb1.png')"> <a href="#">山治</a> <img src="/jscss/demoimg/201210/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> </body> </html>
评论列表
本站所提供的代码,版权归原作者所有,若有侵犯作者版权,请与我们联系,我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。
试试其它关键字
缓冲菜单
同语言下
.
Jquery搜索框获取回车事件
.
H5页面添加倒计时,然后自动跳转
.
通过user-agent判断h5页面是在哪个手机App(QQ、微信
.
nginx 禁止未绑定的域名访问
.
JavaScript 获取按键,并屏蔽系统 Window 事件
.
H5之只允许微信浏览器打开,禁止从外部浏览器访问
.
微信打开网址添加在浏览器中打开提示的办法
.
实现JS复制、粘贴,Chrome/Firefox下可用
.
video视频播放,play()、pause()、duration时长、onen
.
HTML5实现MP3上传前的预览和播放时长的获取
可能有用的
.
SQL查询 多列合并成一行用逗号隔开
.
一行一行读取txt的内容
.
C#动态修改文件夹名称(FSO实现,不移动文件)
.
c# 移动文件或文件夹
.
c#图片添加水印
.
Java PDF转换成图片并输出给前台展示
.
网站后台修改图片尺寸代码
.
处理大图片在缩略图时的展示
.
实现对图片上传的接收
.
判断用户输入的是否为IP地址
Dezai.CN
贡献的其它代码
(
4037
)
.
多线程Socket服务器模块
.
生成随机密码
.
清除浮动样式
.
弹出窗口居中
.
抓取url的函数
.
使用base HTTP验证
.
div模拟iframe嵌入效果
.
通过header转向的方法
.
Session操作类
.
执行sqlite输入插入操作后获得自动编号的ID
地图
本站
我们
服务
版权
联系
回馈
博客