设为首页
|
加入收藏
您好,欢迎来到点滴吧!
手机版
www.diandiba.com
记录点点滴滴,尽在点滴吧
文章
文章
特效
素材
景点
首页
手机
建站
源码
服务器
生活
常识
健康
美食
美容
旅游
景点
攻略
游记
特产
知识
笑话
名句
散文
故事
编程
ASP
PHP
.NET
SQL
软件
Office
QQ
Photoshop
特效
幻灯片
图片相册
播放器
素材
图片
PSD素材
网页模板
您现在的位置:
首页
>
导航菜单
> 特效详情
带缓冲效果的下拉菜单效果
更新时间:2015/7/16 9:50:23 下载:6379次
<!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" /> <title>下拉缓冲</title> <script> function fx(el,attr,to){ el=typeof el=='string'?document.getElementById(el):el; if(to>0)el.style.display='block'; var w=el['offset'+attr.replace(/^(.)/,new Function('return arguments[1].toUpperCase()'))]; var Int=Math[to-w>0?'ceil':'floor']; clearInterval(el.timer); el.timer=setInterval(function(){ w+=Int((to-w)*0.1); el.style[attr]=w+'px'; if(w==to){ if(to==0)el.style.display='none'; clearInterval(el.timer); }; },10); }; window.onload = function (){ var a=document.getElementById("t1"); var b=document.getElementById("t2"); var c=document.getElementById("t3"); var d=document.getElementById("t4"); var d1=document.getElementById("div1"); var d2=document.getElementById("div2"); var d3=document.getElementById("div3"); var d4=document.getElementById("div4"); d1.onmouseover=a.onmouseover=function (){fx('div1','height',300)}; d1.onmouseout=a.onmouseout=function (){fx('div1','height',0)}; d2.onmouseover=b.onmouseover=function (){fx('div2','height',300)}; d2.onmouseout=b.onmouseout=function (){fx('div2','height',0)}; d3.onmouseover=c.onmouseover=function (){fx('div3','height',300)}; d3.onmouseout=c.onmouseout=function (){fx('div3','height',0)}; d4.onmouseover=d.onmouseover=function (){fx('div4','height',300)}; d4.onmouseout=d.onmouseout=function (){fx('div4','height',0)}; } </script> </head> <body> <div id="t1" style=" position:absolute;background:black; left: 579px; top: 34px; width: 149px; height: 35px;"></div> <div id="div1" style="position:absolute;background:aqua;left:579px;overflow:hidden;top:70px;width:349px;display:none" ></div> <div id="t2" style=" position:absolute;background:black; left: 0px; top: 34px; width: 149px; height: 35px;"></div> <div id="div2" style="position:absolute;background:red;left:0px;overflow:hidden;top:70px;width:349px;display:none" ></div> <div id="t3" style=" position:absolute;background:black; left: 200px; top: 34px; width: 149px; height: 35px;"></div> <div id="div3" style="position:absolute;background:blue;left:200px;overflow:hidden;top:70px;width:349px;display:none" ></div> <div id="t4" style="position:absolute;background:black; left: 900px; top: 34px; width: 149px; height: 35px;"></div> <div id="div4" style="position:absolute;background:blue;left:200px;overflow:hidden;top:70px;width:349px;display:none" ></div> </body> </html>
预览效果
复制代码
保存代码
提示:可以先修改部分代码后再运行
上一个素材:
没有了
下一个素材:
防刷新的导航菜单
相关特效
带缓冲效果的下拉菜单效果
zepto手机端固定层图标导
顶部固定导航菜单代码
jQuery背景可滑动的导航菜
导航分类
热门文章
1
带缓冲效果的下拉菜单效果
2
顶部固定导航菜单代码
3
jQuery左侧垂直四级导航菜单特
4
防刷新的导航菜单
5
jQuery背景可滑动的导航菜单
6
跳转菜单代码
7
zepto手机端固定层图标导航菜
关于我们
|
联系我们
|
免责声明
|
网站地图
|
CopyRight 2012-2015 www.diandiba.com - 点滴吧 All Rights Reserved
滇ICP备09005765号-2