8.2种方式，实现某DIV元素以50px每秒的速度左移100px。
使用定时机制实现动画效果，一般把时间间隔设置为10-50毫秒（最佳30毫秒）动画效果比较平滑。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script type="text/javascript" src="jquery.js"></script> 7 8 </head> 9 <body> 10 <div id="test" style="border:1px solid red;position:relative;width:100px;height:100px;"> 11 12 </div> 13 <script type="text/javascript"> 14 /** 15 * 使用Jquery实现 16 * @param {[type]} ){ $('#test').animate({left:'+100px'} [description] 17 * @param {[type]} 2000); } [description] 18 * @return {[type]} [description] 19 */ 20 /*$(function(){ 21 $('#test').animate({left:'+100px'},2000); 22 });*/ 23 /** 24 * 使用原生js实现 25 * @type {[type]} 26 */ 27 var testDiv = document.getElementById('test'); 28 var left = testDiv.style.left; 29 if(""===left){ 30 left = '0px'; 31 } 32 var leftnum = Number(left.split('px')[0]); 33 var num = 1; 34 var animate = setInterval(function(){ 35 if(num>=100){ 36 clearInterval(animate); 37 } 38 leftnum += 1; 39 testDiv.style.left = leftnum+'px'; 40 num++; 41 },20); 42 </script> 43 </body> 44 </html>
