<!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{width:516px;height:516px; margin:10px auto; position:relative;}
#ul1 li{float:left;width: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],
{width: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],
{
width: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);
}
转载于:https://www.cnblogs.com/heboliufengjie/p/4324010.html
相关资源：垃圾分类数据集及代码
