介绍了那么多运动，這次一套代码实现所有运动
1.html代码和css代码，只是定义一个div
1 <style> 2 div{ 3 width:200px; 4 height:200px; 5 margin:20px; 6 float:left; 7 background:yellow; 8 border:10px solid black; 9 filter:alpha(opacity:30); 10 opacity:0.3; 11 } 12 </style> 13 <body> 14 <div id="div1"> 15 16 </div> 17 18 </body>
2.js代码部分
1 <script> 2 window.onload=function() 3 { 4 var div=document.getElementById('div1'); 5 div.onmouseover=function() 6 { 7 startMove(this,'height',1000); 8 } 9 div.onmouseout=function() 10 { 11 startMove(this,'height',50); 12 } 13 }; 14 function getStyle(obj,name) //兼容性问题，修改非行间的css 15 { 16 if (obj.currentStyle)//chrome和firefox 17 { 18 return obj.currentStyle[name]; 19 } 20 else//ie浏览器 21 { 22 return getComputedStyle(obj,false)[name]; 23 } 24 } 25 function startMove(obj,attr,iTarget) 26 { 27 clearInterval(obj.timer); 28 obj.timer=setInterval(function() 29 { 30 var cur=0; 31 if (attr=="opacity") //判断传入的参数是不是透明度 32 { 33 cur=parseFloat(getStyle(obj,attr))*100; //强制转换为浮点数 34 } 35 else //如果不是透明度，执行這句 36 { 37 cur=parseInt(getStyle(obj, attr)); //返回传入要修改的属性的值 38 } 39 var speed=(iTarget-cur)/100 ; //设置速度 40 speed=speed>0?Math.ceil(speed):Math.floor(speed); //取上下限 41 42 if(cur==iTarget) //当等于要实现的值时停止 43 { 44 clearInterval(obj.timer); 45 } 46 else 47 { 48 if (attr=='opacity') //如果是透明度，兼容性。写两句 49 { 50 obj.style.filter='alpha(opcity:'+(cur+speed)+')'; //chrome和firefox 51 obj.style.opacity=(cur+speed)+'px'; //ie 52 } 53 else //要修改的是其他，直接修改他的值 54 { 55 obj.style[attr]=cur+speed+'px'; 56 } 57 } 58 }, 59 30) 60 } 61 </script>