<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="智能社 - zhinengshe.com" /> <meta name="copyright" content="智能社 - zhinengshe.com" /> <title>智能社 - www.zhinengshe.com</title> <style> *{margin:0;padding:0;list-style:none;} #ul1{516px;height:516px; margin:10px auto; position:relative;} #ul1 li{float:left;150px; height:150px; border:1px solid #000; background:#ccc; margin:10px;} </style> <script src="move.js"></script> <script> window.onload = function(){ var oBtn = document.getElementById("btn1"); var oUl = document.getElementById("ul1"); var aLi = oUl.children; //布局转换 var aPos = []; for(var i = 0; i < aLi.length; i++){ aPos[i] = {left:aLi[i].offsetLeft,top:aLi[i].offsetTop}; aLi[i].style.left = aPos[i].left + "px"; aLi[i].style.top = aPos[i].top + "px"; } for(var i = 0; i < aLi.length; i++){ aLi[i].style.position = "absolute"; aLi[i].style.margin = "0"; } var timer = null; oBtn.onclick = function(){ var i = 0; clearInterval(timer); timer = setInterval(function(){ (function(index){ move(aLi[i], {20,height:20,left:200,top:200,opacity:0}, {complete:function(){ //alert(index); if(index == aLi.length - 1){ //alert("运动完成"); i = aLi.length - 1; clearInterval(timer); timer = setInterval(function(){ move(aLi[i], { 150,height:150, left:aPos[i].left,top:aPos[i].top, opacity:1 } ); i--; if(i == -1){ clearInterval(timer); } },100); } } }); })(i); i++; if(i == aLi.length){ clearInterval(timer); } },100); }; }; </script> </head> <body> <input id="btn1" type="button" value="收起来"/> <ul id="ul1"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
//版权 北京智能社©, 保留所有权利 function getStyle(obj,name){ return (obj.currentStyle || getComputedStyle(obj,false))[name]; } function move(obj,json,options){ options = options || {}; options.duration = options.duration || 700; options.easing = options.easing || "ease-out"; var start = {}; var dis = {}; for(var name in json){ start[name] = parseFloat(getStyle(obj,name)); dis[name] = json[name] - start[name]; } var count = Math.round(options.duration/30); var n = 0; clearInterval(obj.timer); obj.timer = setInterval(function(){ n++; for(var name in json){ var cur = start[name] + dis[name]/count*n; switch(options.easing){ case "linear": var a = n/count; var cur = start[name] + dis[name]*a; break; case "ease-in": var a = n/count; var cur = start[name] + dis[name]*Math.pow(a,3); break; case "ease-out": var a = 1 - n/count; var cur = start[name] + dis[name]*(1 - Math.pow(a,3)); break; } if(name == "opacity"){ obj.style.opacity = cur; obj.style.filter = "alpha(opacity:"+cur*100+")"; } else { obj.style[name] = cur + "px"; } } if(n == count){ clearInterval(obj.timer); options.complete && options.complete(); } },30); }