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程序设计有所帮助。