一、布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src='../../package/move.js'></script>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
width: 516px;
margin: 50px auto;
}
ul li {
width: 150px;
height: 150px;
background: #ccc;
float: left;
margin: 10px;
border: 1px solid #000;
}
</style>
</head>
<body>
<input type="button" value="下一页" id="btn1" />
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
二、布局转化
//布局转化
var aPos=[];
for(var i=0;i<aLi.length;i++){ //循环遍历，将每个li的初始offsetLeft值跟offsetTop值保存起来
aPos[i]={
left:aLi[i].offsetLeft,
top: aLi[i].offsetTop
};
};
for(var i=0;i<aLi.length;i++){ //将li转换为定位布局，left值跟top值为前面保存的offsetLeft值跟offsetTop值
aLi[i].style.position='absolute';
aLi[i].style.left=aPos[i].left+'px';
aLi[i].style.top=aPos[i].top+'px';
aLi[i].style.margin=0;
};
三、给按钮添加点击事件，点击下一页的时候，第一次运动需要将本页的内容收起来，所以有如下代码：
oBtn.onclick = function() {
// 分布运动
var i = 0;
timer = setInterval(function(){ //开定时器，每200ms让一个li的 left, top， width , height, opacity 都慢慢变为0
move(aLi[i], {
left: 0, top:0, 0,
height: 0, opacity: 0
});
i++;
if (i == aLi.length) {
clearInterval(timer); // 当i == aLi.length第一次循环结束
}
},200);
};
四、第一次运动完成之后，紧接着需要马上展现下一页的内容，所以我们将上面的代码改成下面这种形式
oBtn.onclick = function() {
// 分布运动
var i = 0;
timer = setInterval(function(){
(function(index){ //这里用到封闭空间，因为循环开定时器，定时器里面的i不能用
move(aLi[i], {
left: 0, top:0, 0,
height: 0, opacity: 0
},{
complete: function() {
if (index == aLi.length-1) { //这里用到一个回调函数，当index==aLi.length-1的时候代码，第一轮运动已经完全结束
alert('ok');
}
}
})
})(i);
i++;
if (i == aLi.length) {
clearInterval(timer);
}
},200);
};
五、当第一轮运动结束之后，我们执行第一轮的运动，即展现下一页的内容，第二轮运动同样用到封闭空间，原理同四
第二轮运动，将每个li的值设置成原始值
if (index == aLi.length-1) {
// 放
for (var i = 0; i < aLi.length; i++) {
aLi[i].style.background = 'rgb('+parseInt(Math.random()*256)+','+parseInt(Math.random()*256)+','+parseInt(Math.random()*256)+')';
}
timer = setInterval(function(){
move(aLi[index], {
left: aPos[index].left, top: aPos[index].top, 150, height: 150, opacity: 1
});
index--;
if (index < 0) {
clearInterval(timer);
}
},200);
}
六、完整代码：
<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
};
};
for(var i=0;i<aLi.length;i++){
aLi[i].style.position='absolute';
aLi[i].style.left=aPos[i].left+'px';
aLi[i].style.top=aPos[i].top+'px';
aLi[i].style.margin=0;
};
var timer=null;
var bSin=false;
oBtn.onclick=function(){
if(bSin){
return;
}
bSin=true;
var i=0;
timer=setInterval(function(){
(function(index){
move(aLi[i],{
left:0,
top:0,
0,
height:0,
opacity:0
},{
complete:function(){
if(index==aLi.length-1){
//放
for(var i=0;i<aLi.length;i++){
aLi[i].style.background = 'rgb('+parseInt(Math.random()*256)+','+parseInt(Math.random()*256)+','+parseInt(Math.random()*256)+')';
}
timer=setInterval(function(){
(function(index2){
move(aLi[index],{
left:aPos[index].left,
top:aPos[index].top,
150,
height:150,
opacity:1
},{
complete:function(){
if(index2==0){
bSin=false;
}
}
});
})(index)
index--;
if(index<0){
clearInterval(timer)
}
},200)
}
},
});
})(i)
i++
if(i==aLi.length){
clearInterval(timer)
}
},200);
};
}
</script>