日期:2014-05-16 浏览次数:20386 次
<!DOCTYPE HTML> <html> <head> <meta charset="gb2312" /> <title></title> <style> .a { position:absolute; left:100px; top:100px; width:100px; height:100px; border:1px solid red; background:#ddd; opacity:1; } </style> </head> <body> <div id="a" class="a">a</div> <div id="b">b</div> <button id="pause">pause</button> <button id="move">move</button> <script> function $(o){return document.getElementById(o)} var Easing = { 'linear' : function(t){ return t; }, 'easeIn' : function(t){ return t * t; }, 'easeOut' : function(t) { return ( 2 - t) * t; }, 'easeBoth' : function(t){ return (t *= 2) < 1 ? .5 * t * t : .5 * (1 - (--t) * (t - 2)); }, 'easeInStrong' : function(t){ return t * t * t * t; }, 'easeOutStrong' : function(t){ return 1 - (--t) * t * t * t; }, 'easeBothStrong' : function(t){ return (t *= 2) < 1 ? .5 * t * t * t * t : .5 * (2 - (t -= 2) * t * t * t); }, 'elasticIn' : function(t){ var p = .3, s = p / 4; if (t === 0 || t === 1) return t; return -(Math.pow(2, 10 * (t -= 1)) * Math.sin((t - s) * (2 * Math.PI) / p)); }, 'elasticOut' : function(t){ var p = .3, s = p / 4; if (t === 0 || t === 1) return t; return Math.pow(2, -10 * t) * Math.sin((t - s) * (2 * Math.PI) / p) + 1; }, 'elasticBoth' : function(t){ var p = .45, s = p / 4; if (t === 0 || (t *= 2) === 2) return t; if (t < 1) { return -.5 * (Math.pow(2, 10 * (t -= 1)) * Math.sin((t - s) * (2 * Math.PI) / p)); } return Math.pow(2, -10 * (t -= 1)) * Math.sin((t - s) * (2 * Math.PI) / p) * .5 + 1; }, 'backIn' : function(t){ if (t === 1) t -= .001; return t * t * ((BACK_CONST + 1) * t - BACK_CONST); }, 'backOut' : function(t){ return (t -= 1) * t * ((BACK_CONST + 1) * t + BACK_CONST) + 1; }, 'backBoth' : function(t){ if ((t *= 2 ) < 1) { return .5 * (t * t * (((BACK_CONST *= (1.525)) + 1) * t - BACK_CONST)); } return .5 * ((t -= 2) * t * (((BACK_CONST *= (1.525)) + 1) * t + BACK_CONST) + 2); }, 'bounceIn' : function(t){ return 1 - Easing.bounceOut(1 - t); }, 'bounceOut' : function(t){ var s = 7.5625, r; if (t < (1 / 2.75)) { r = s * t * t; } else if (t < (2 / 2.75)) { r = s * (t -= (1.5 / 2.75)) * t + .75; } else if (t <