• 运动-分页


    一、布局

    <!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>    
  • 相关阅读:
    我是5型
    现在的我,有两个状态。我要去找第三个
    什么是BNF范式,什么又是EBNF范式?
    又是好久不写日志
    语料库资源汇总
    原生js与css3结合的电风扇
    JavaScript基础2
    JavaScript基础1
    JavaScript基础4
    JavaScript基础3
  • 原文地址:https://www.cnblogs.com/xuxiaozhi/p/10209085.html
Copyright © 2020-2023  润新知