閑來無事，就寫了個比較方便調用的動畫效果
function skyAnimate(obj, options, step, callback) {if (!obj) return;var n = 0,timer = null,oStyle = [],de = [],c = [],b = 0;step = {'slow': 100,'normal': 50,'fast': 10} [step] || 64;var d = function(x) {return Math.sqrt(1 - Math.pow((x - 1), 2))}for (var i in options) {var obj_style = parseInt(sky_css(obj, i));if (!obj_style) obj_style = 0;de.push(obj_style) c.push(options[i] - obj_style);oStyle.push(i);}timer = setInterval(function() {if (n >= step) {clearInterval(timer);if (callback && callback instanceof Function) callback();}b = d(n / step);for (var j = 0,len = de.length; j < len; j++) {obj.style[oStyle[j]] = de[j] + c[j] * b + 'px';}n++;},15);}function sky_getType(o) {var t;return ((t = typeof(o)) == 'object' ? o == null && 'null' || (Object.prototype.toString.call(o)).slice(8, -1) : t).toLowerCase();}function sky_css(o, name) {if (sky_getType(name) == 'string') {if (o.style[name]) return o.style[name];if (o.currentStyle) return o.currentStyle[name];if (document.defaultView) return document.defaultView.getComputedStyle(o, "")[name];} else if (sky_getType(name) == 'object') {for (var i in name) {o.style[i] = name[i];}}}
HTML:
<!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 type="text/css">#box { width:200px; height:200px; position:absolute; top:0; left:0; background:red; overflow:hidden;}</style><script type="text/javascript" src="skyAnimate.js"></script><script type="text/javascript">window.onload = function(){var box = document.getElementById('box');skyAnimate(box,{'top':200,'left':300,'width':500,'height':400},'slow',function(){alert('oh yeah!!')})}</script></head><body><div id="box"></div></body></html>
用法：
var box = document.getElementById('box');skyAnimate(box,{'top':200,'left':300,'width':500,'height':400},'slow',function(){alert('oh yeah!!')})//box就是要執行動畫的對象了//{'top':200,'left':300,'width':0,'height':0}這是動畫參數，裡面的參數任選。//'slow' 控制動畫運行速度，有slow, normal fast三種//function(){alert('oh yeah!!')} 動畫執行完後啟動並執行參數，這個可選
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
