JS实现带缓冲效果打开、关闭、移动一个层的方法
本文实例讲述了JS带缓冲效果打开、关闭、移动一个层的方法。分享给大家供大家参考。具体实现方法如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"lang="gb2312"> <head> <title>JavaScript缓冲打开层</title> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> <styletype="text/css"> *{ margin:0;padding:0; } body{ margin:5pxauto;text-align:center;background:#f0f0f0; } #d1{ position:absolute;top:20px; left:20px;width:100px;height:60px; border:1pxsolid#808; } #d2{ position:absolute;top:100px; left:20px;width:100px;height:60px; border:1pxsolid#808; } #open1,#close1,#open2,#close2{ cursor:pointer;background:#ccf;margin:5px; } #open1,#open2{ display:block; } #close1,#close2{ display:none; } </style> </head> <body> <divid="d1"> 移动位置 <spanid="open1"onclick="fo1()">Open</span> <spanid="close1"onclick="fc1()">Close</span> </div> <divid="d2"> 改变大小 <spanid="open2"onclick="fo2()">Open</span> <spanid="close2"onclick="fc2()">Close</span> </div> <divid="debug">AAA</div> <scripttype="text/javascript"> //<[CDATA[ varsl=20;//初始left值 varel=500;//结束left值 varsw=100;//初始width值 varew=580;//结束width值 varp=10;//缓冲变量 vart=20;//时间变量 vard1=document.getElementById('d1'); vard2=document.getElementById('d2'); vardebug=document.getElementById('debug'); varopen1=document.getElementById('open1'); varclose1=document.getElementById('close1'); varopen2=document.getElementById('open2'); varclose2=document.getElementById('close2'); functionfo1(){ varcl=parseInt(getStyle(d1,'left')); //当前left值 if(cl<el){ d1.style.left=cl+Math.ceil((el-cl)/p)+'px'; //当前值+缓冲增量 debug.innerHTML=getStyle(d1,'left'); //cl+'px'; setTimeout('fo1()',t); }else{ d1.style.left=el+'px'; open1.style.display='none'; close1.style.display='block'; } } functionfc1(){ varcl=parseInt(getStyle(d1,'left')); //当前left值 if(cl>sl){ d1.style.left=cl-Math.ceil((cl-sl)/p)+'px'; //当前值-缓冲增量 debug.innerHTML=getStyle(d1,'left'); //cl+'px'; setTimeout('fc1()',t); }else{ d1.style.left=sl+'px'; open1.style.display='block'; close1.style.display='none'; } } functionfo2(){ varcw=parseInt(getStyle(d2,'width')); //当前width值 if(cw<ew){ d2.style.width=cw+Math.ceil((ew-cw)/p)+'px'; //当前值+缓冲增量 debug.innerHTML=getStyle(d2,'width'); //cw+'px'; setTimeout('fo2()',t); }else{ d2.style.width=ew+'px'; open2.style.display='none'; close2.style.display='block'; } } functionfc2(){ varcw=parseInt(getStyle(d2,'width')); //当前width值 if(cw>sw){ d2.style.width=cw-Math.ceil((cw-sw)/p)+'px'; //当前值-缓冲增量 debug.innerHTML=getStyle(d2,'width'); //cw+'px'; setTimeout('fc2()',t); }else{ d2.style.width=sw+'px'; open2.style.display='block'; close2.style.display='none'; } } functiongetStyle(elem,name){ if(elem.style[name]){returnelem.style[name];} elseif(elem.currentStyle){returnelem.currentStyle[name];} elseif(document.defaultView&&document.defaultView.getComputedStyle){ name=name.replace(/([A-Z])/g,"-$1"); name=name.toLowerCase(); vars=document.defaultView.getComputedStyle(elem,""); returns&&s.getPropertyValue(name); } else{returnnull;} } //]]> </script> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。