一、布局
<!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, width: 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, width: 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, width: 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, width: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, width: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>
4452
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
