纯js模拟div层弹性运动的方法
本文实例讲述了纯js模拟div层弹性运动的方法。分享给大家供大家参考。具体如下:
特性:
1.支持各项常数自定义
2.理论支持所有元素,只需修改style.width,你懂得
3.已知支持浏览器:chrome/firefox/IE7、8、9
<html> <head> <metahttp-equiv=Content-Typecontent="text/html;charset=utf-8"> <scripttype="text/javascript"> vara=900;//最大距离 varb;//定时器变量 varc=-1;//下次点击运动方向-1负向运动1正向运动 vard=2;//反弹常量数值越大弹性越小取值d>1 vare=-1;//当前运动方向 varf=a;//当前位置 varg=0;//已单向运动时间 varh;//弹性体 vari=15;//运动速度数值越大,运动越慢 functionBounce(id){ h=document.getElementById(id); //终止未完成的运动 if(b)clearInterval(b); //重置时间 g=0; c=-1*c;//下次点击运动方向改变 b=setInterval('move()',i); } functionmove(){ if(c==1){ if(e==-1){ if(f-(2*g-1)>0){ f=f-(2*g-1); g++; }else{ e=1; f=1; g++; g=parseInt(g/d); g=g%2==0?(g+1):g; if(g==3)clearInterval(b); } }else{ if(g>0){ g--; f=f+2*g-1; }else{ e=-1; g=0; } } h.style.width=f.toString()+"px"; }else{ if(e==1){ if(f+(2*g-1)<a){ f=f+(2*g-1); g++; }else{ e=-1; f=a; g++; g=parseInt(g/d); g=g%2==0?(g+1):g; if(g==1)clearInterval(b); } }else{ if(g>0){ g--; f=f-(2*g-1); }else{ e=1; g=0; } } h.style.width=f.toString()+"px"; } } </script> </head> <body> <divstyle="color:red;font-size:12px;text-align:center;"> <divstyle="text-align:left;color:green;margin:50px300px;"> 特性:<br>*支持各项常数自定义<br>*理论支持所有元素,只需修改style.width,你懂得<br>*已知支持浏览器:chrome/firefox/IE7、8、9 </div> </div> <inputtype="button"value="clickme"onClick="Bounce('test');"style="text-align:center;border:1px#cccsolid;padding:5px10px;margin:0px200px100px200px;"/> <divstyle="width:900px;height:200px;margin:0px200px;background-color:#e8e8e8;border:1px#cccsolid;"id="test"onClick="Bounce('test');"></div> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。