<!DOCTYPE html> <html> <head> <title> sadsadsadsadsadsadsa </title> <style type="text/css" media="screen"> #box { width: 200px; height: 200px; background: red; } </style> <script type="text/javascript"> /** * [animate 动画效果(可操作CSS2和CSS3)直接书写CSS3动画效果就可直接识别] * @param {[type]} obj [要操作的对象] * @param {[type]} json [属性] * @param {[type]} speed [时间] * @param {Function} fn [回调] * @return {[type]} [description] */ function animate(obj ,json ,speed ,fn) { var startTime = new Date(); var iCur = 0; var iSpeed = 0; var Css3 = []; var i = 0; var px = ''; clearInterval(obj.timer); obj.timer = setInterval(function() { var iStop = true; i++; document.title = i; for (var name in json) { var iTarget = parseInt(json[name].match(/([0-9])+/g, "" )); iCur = parseInt(obj.style[name].match(/([0-9])+/g, "" )) || parseInt(css(obj ,name).match(/([0-9])+/g, "" )) || 0; var percentage = Math.min(1, (new Date - startTime) / speed); if(!inArray(name ,Css3)) { iSpeed = ( iTarget - iCur ) / 8; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); iSpeed = (iCur + (iTarget - iCur) * percentage); iValue = iSpeed + css(obj ,name).match(/([a-z])+/g, "" ); } else { } if(iCur != iTarget && json[name].match(/([a-z])+((.)+)/g, "" )) { iStop = false; iValue = json[name].replace(/([0-9])+/, iSpeed) } if(iCur != iTarget) { iStop = false; obj.style[name] = iValue; } } if(iStop) { console.log(new Date - startTime); clearInterval(obj.timer); fn && fn.call(obj); } } ,13); } function inArray(b,a){ for (var i = 0; i <= a.length - 1; i++) { if(a[i] == b){ return true; } return false; }; } function css(obj, attr) { if(obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj ,false )[attr]; } } window.onload = function() { box.onclick = function() { animate(box ,{'width':'400px','height':'600px'} ,1000 ,function() { animate(this ,{'transform':'rotate(180deg)'},1000 ,function() { animate(this ,{'width':'100px'},1000 ,function() { animate(this ,{'height':'100px'},1000 ,function() { alert(1) }) }) }) }) } } </script> </head> <body> <div id="box"> </div> </body> </html>