Community Learn Tools Library Leisure
search
English
javascript - [优化代码] 模拟数据更新的小插件
迷茫
迷茫 2017-04-11 13:05:46
0
1
885

  1. 求大神们从代码结构易读性方面 指点下 如果优化；

  2. 多次、快速点击 refresh 按钮，造成动画(函数)累积， 如何在点击时 清空？

----------------------------HTML 部分
<body>

<p class="wrap">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</p>
<button>refresh</button>

</body>

--------------------------------css样式部分

<style>
    .wrap{ width:50px; height:50px;  margin:200px auto; transform-origin:1px 30px; display:none; }
    ul,li{ padding:0; margin:0; list-style:none; }
    ul{ position:relative; }
    li{ opacity:0; display:block; width:2px; height:20px; border-radius:2px; background:red; position:absolute; transform-origin: center 30px; }
    @keyframes rolling{
        0%{ transform:rotate(0deg)}
        100%{ transform:rotate(360deg)}
    }
    @keyframes scaleing{
        0%{ transform: scale(1,1)}
        100%{ transform: scale(0,0)}
    }
    .scale{ animation:scaleing 1s linear; animation-fill-mode:forwards;}
    .roll{ animation:rolling 2s linear;}
    button{ position:absolute; top:200px; left:200px; }
</style>

--------------------------------------JS部分

<script src="js/jquery-3.1.0.js"></script>
<script>
    $(function(){
        // 组件
        for(var i=0; i<$('li').length; i++){
            $('li').eq(i).css({'transform':'rotate('+i*22.5+'deg)'});
        }
        //  刷新
        function refreshLi(){
            $('.wrap').css({display:'block'})
                    .removeClass('scale');
            $('li').css({opacity:0});
            var n=0;
            showLi();
             //   显示
            function showLi(){
                setTimeout(function(){
                    if(n==$('li').length){
                        Rotate();
                        return;
                    }
                    $('li').eq(n).animate({opacity:1},'fast',function(){
                        n++;
                        showLi()
                    });
                },10);
            }
            // 旋转
            function Rotate(){
                $('.wrap')
                        .addClass('roll');
                setTimeout(function(){
                    $('li').animate({opacity:0});
                    blink();
                },1000)
            }
            // 闪烁
            function blink(){
                var n=0;
                var k=0;
                next();
                function next(){
                    if(n==$('li').length){
                        n=0;
                    }
                    setTimeout(function(){
                        k++;
                        if(k==25){
                            $('.wrap').removeClass('roll')
                                    .addClass('scale');
                        }
                        if(k==35){
                            setTimeout(function(){
                                $('.wrap').css({display:'none'});
                            },0);
                            //  暂停递归
                            return;
                        }
                        console.log(k,n)
                        $('li').eq(n).animate({opacity:1});
                        n++;
                        next();
                        $('li').eq(n-8).animate({opacity:0});
                    },100)
                }
            }
        }
        $('button').on('click',function(){
            refreshLi();
        })
    })
</script>
迷茫
迷茫

业精于勤，荒于嬉;行成于思，毁于随。

reply all(1)
巴扎黑
巴扎黑2017-04-11 13:07:46 1 floor 
<script>
    $(function(){
        for (var i=0; i<$('li').length; i++) {
            $('li').eq(i).css({'transform':'rotate('+i*22.5+'deg)'});
        }
        var fresh = {
            n: 0,
            k: 0,
            key: true,
            init: function () {
                if (!this.key) {
                    return false;
                }
                this.key = !this.key;
                $('.wrap').css({display:'block'});
                this.showLi();
            },
            showLi: function () {
                var _this = this;
                setTimeout(function(){
                    if (_this.n == $('li').length) {
                        _this.Rotate();
                        return;
                    }
                    $('li').eq(_this.n).animate({opacity:1},'fast',function(){
                        _this.n++;
                        _this.showLi()
                    });
                },10);
            },
            Rotate: function () {
                var _this = this;
                $('.wrap').addClass('roll');
                setTimeout(function(){
                    $('li').animate({opacity:0});
                    _this.blink();
                },1000)
            },
            blink: function () {
                this.n = 0;
                this.next();
            },
            next: function () {
                var _this = this;
                if (_this.n == $('li').length) {
                    _this.n = 0;
                }
                setTimeout(function () {
                    _this.k++;
                    if (_this.k == 25) {
                        $('.wrap').removeClass('roll')
                                  .addClass('scale');
                    }
                    if (_this.k == 35) {
                        $('.wrap').css({display:'none'});
                        _this.styleInit();
                        return;
                    }
                    console.log(_this.k,_this.n)
                    $('li').eq(_this.n).animate({opacity:1});
                    _this.n++;
                    _this.next();
                    $('li').eq(_this.n - 8).animate({opacity:0});
                },100)
            },
            styleInit: function () {
                this.key = !this.key;
                this.n = 0;
                this.k = 0;
                // other style
                // to do ...
            }
        };
        $('button').on('click',function(){
            fresh.init();
        })
    })
</script>

能力和时间有限，大概给优化了一下。代码现在是不全的，需要你在fresh.styleInit里写上初始样式。

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template