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

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

　　演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /> <title>下拉缓冲</title><br /> <script><br /> function fx(el,attr,to){<br /> el=typeof el=='string'?document.getElementById(el):el;<br /> if(to>0)el.style.display='block';<br /> var w=el['offset'+attr.replace(/^(.)/,new Function('return arguments[1].toUpperCase()'))];<br /> var Int=Math[to-w>0?'ceil':'floor'];<br /> clearInterval(el.timer);<br /> el.timer=setInterval(function(){<br /> w+=Int((to-w)*0.1);<br /> el.style[attr]=w+'px';<br /> if(w==to){<br /> if(to==0)el.style.display='none';<br /> clearInterval(el.timer);<br /> };<br /> },10);<br /> };<br /> window.onload = function (){<br /> var a=document.getElementById("t1");<br /> var b=document.getElementById("t2");<br /> var c=document.getElementById("t3");<br /> var d=document.getElementById("t4");<br /> var d1=document.getElementById("div1");<br /> var d2=document.getElementById("div2");<br /> var d3=document.getElementById("div3");<br /> var d4=document.getElementById("div4");<br /> d1.onmouseover=a.onmouseover=function (){fx('div1','height',300)};<br /> d1.onmouseout=a.onmouseout=function (){fx('div1','height',0)};<br /> d2.onmouseover=b.onmouseover=function (){fx('div2','height',300)};<br /> d2.onmouseout=b.onmouseout=function (){fx('div2','height',0)};<br /> d3.onmouseover=c.onmouseover=function (){fx('div3','height',300)};<br /> d3.onmouseout=c.onmouseout=function (){fx('div3','height',0)};<br /> d4.onmouseover=d.onmouseover=function (){fx('div4','height',300)};<br /> d4.onmouseout=d.onmouseout=function (){fx('div4','height',0)};<br /> }<br /> </script><br /> </head><br /> <body><br /> <div id="t1" style=" position:absolute;background:black; left: 579px; top: 34px; width: 149px; height: 35px;"></div><br /> <div id="div1" style="position:absolute;background:aqua;left:579px;overflow:hidden;top:70px;width:349px;display:none" ></div><br /> <div id="t2" style=" position:absolute;background:black; left: 0px; top: 34px; width: 149px; height: 35px;"></div><br /> <div id="div2" style="position:absolute;background:red;left:0px;overflow:hidden;top:70px;width:349px;display:none" ></div><br /> <div id="t3" style=" position:absolute;background:black; left: 200px; top: 34px; width: 149px; height: 35px;"></div><br /> <div id="div3" style="position:absolute;background:blue;left:200px;overflow:hidden;top:70px;width:349px;display:none" ></div><br /> <div id="t4" style="position:absolute;background:black; left: 900px; top: 34px; width: 149px; height: 35px;"></div><br /> <div id="div4" style="position:absolute;background:blue;left:200px;overflow:hidden;top:70px;width:349px;display:none" ></div><br /> </body><br /> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

热点

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

由 dawei

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀

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

由 dawei

相关文章

网站优化的整个完整步骤

基于PHP实现发微博动态代码实例

PHP文件操作简单介绍及函数汇总

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀