js之任意值运动框架
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js之任意值运动框架相关的知识，希望对你有一定的参考价值。
<!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> <style> div{width:200px;height:200px;background:red;float:left;border:10px black solid;margin:50px;font-size:50px;color:yellow;} #div4{filter:alpha(opacity:30);opacity:0.3;} </style> <script> window.onload=function (){ var oDiv1=document.getElementById(‘div1‘); var oDiv2=document.getElementById(‘div2‘); var oDiv3=document.getElementById(‘div3‘); var oDiv4=document.getElementById(‘div4‘); oDiv1.onmouseover=function (){ StartMove(this,‘width‘,500); }; oDiv1.onmouseout=function (){ StartMove(this,‘width‘,200); }; oDiv2.onmouseover=function (){ StartMove(this,‘height‘,500); }; oDiv2.onmouseout=function (){ StartMove(this,‘height‘,100); }; oDiv3.onmouseover=function (){ StartMove(this,‘font-size‘,100); }; oDiv3.onmouseout=function (){ StartMove(this,‘font-size‘,50); }; oDiv4.onmouseover=function (){ StartMove(this,‘opacity‘,100); }; oDiv4.onmouseout=function (){ StartMove(this,‘opacity‘,30); }; }; function getstyle(obj,name) { if(obj.currentStyle) //针对ie获取 { return obj.currentStyle[name]; } else //针对非行间样式 { return getComputedStyle(obj,null)[name]; } }; function StartMove(obj,ss,itarget) { clearInterval(obj.timer); obj.timer=setInterval(function (){ var cur=0; if(ss==‘opacity‘){ cur=parseFloat(getstyle(obj,ss))*100 } else { cur=parseInt(getstyle(obj,ss)); } var speed=(itarget-cur)/4; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(itarget-cur==0){ clearInterval(obj.timer); } else{ if(ss==‘opacity‘) { obj.style.filter=‘alpha(opacity=‘+(cur+speed)+‘)‘; //通过if-else里的取整解决ie里透明度获取值存在偏差问题 if((cur+speed)>=30) { obj.style.opacity=Math.ceil((cur+speed))/100; } else { obj.style.opacity=Math.floor((cur+speed))/100; } document.getElementById(‘txt1‘).value=cur+speed; } else { obj.style[ss]=cur+speed+‘px‘; } } },30); }; </script> </head> <body> <div id="div1"> 变宽</div> <div id="div2"> 变高</div> <div id="div3"> 字符变大</div> <div id="div4"> <input id="txt1" type="text" ? /> </div> </body> </html>
本文出自 “12380959” 博客，请务必保留此出处http://12390959.blog.51cto.com/12380959/1910003
以上是关于js之任意值运动框架的主要内容，如果未能解决你的问题，请参考以下文章