响应鼠标向下缓冲打开的层，JavaScript代码

发布时间：2018-09-02 09:22:15 所属栏目：聚会来源：站长网

导读：网页上响应鼠标向下缓冲打开的层， Java Script代码，有不少的菜单都是基于此原理哦，本示例仅是演示如何缓冲下拉的，没有实质性的内容，主要是用JavaScript代码完成，效果平滑，推荐参阅使用。演示： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transi

　　网页上响应鼠标向下缓冲打开的层，JavaScript代码，有不少的菜单都是基于此原理哦，本示例仅是演示如何缓冲下拉的，没有实质性的内容，主要是用JavaScript代码完成，效果平滑，推荐参阅使用。

　　演示：

<!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><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：济源站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!