TestMove.js
View Code
function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } } function startMove(obj, json, fn) { clearInterval(obj.timer); obj.timer = setInterval(function () { var bStop = true; //停止运动的标记 for (var attr in json) { var iCurr = 0; //获取当前的值 if (attr == 'opacity') { iCurr = parseInt(Math.round(parseFloat(getStyle(obj, attr)) * 100)); } else { iCurr = parseInt(getStyle(obj, attr)); } //计算速度 var iSpeed = (json[attr] - iCurr) / 8; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); //检测是否停止 if (iCurr != json[attr]) { bStop = false; } //设置属性 if (attr == 'opacity') { obj.style.filter = 'alpha(opacity:' + iCurr + iSpeed + ')'; obj.style.opacity = (iCurr + iSpeed) / 100; } else { obj.style[attr] = iCurr + iSpeed + 'px'; } } if (bStop) { clearInterval(obj.timer); if (fn) { fn(); } } }, 30); }
TestMove.html
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApplication5.WebForm3" %> 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head runat="server"> 7 <title></title> 8 <style type="text/css"> 9 #test 10 { 11 width:100px; 12 height:100px; 13 border:1px solid black; 14 position:absolute; 15 left:0; 16 } 17 </style> 18 <script src="TestMove.js" type="text/javascript"></script> 19 <script type="text/javascript"> 20 window.onload = function () { 21 startMove(document.getElementById('test'), { 300,height:300,left:500}) 22 } 23 </script> 24 </head> 25 <body> 26 <form id="form1" runat="server"> 27 <div id="test"> 28 29 </div> 30 </form> 31 </body> 32 </html>