翻页效果表格（清除定时器）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        body {
            width: 100%;
            height: 100%;
            background-color: #062540;
        }
        
        .behavior {
            width: 300px;
            height: 200px;
            font-size: 16px;
            overflow: hidden;
            color: rgb(166, 228, 255);
        }
        
        .behavior ul {
            width: 100%;
            height: 100%;
        }
        
        .behavior ul li {
            height: 16.6%;
            list-style: none;
        }
        
        .behavior li .l {
            height: 100%;
            float: left;
            width: 60%;
        }
        
        .behavior li .r {
            height: 100%;
            float: left;
            width: 40%;
        }
    </style>
    <script src="jquery-1.11.0.min.js"></script>

</head>

<body>
    <div class="behavior">
        <ul class="behaviorList">
            <li>
                <div class="l"></div>
                <div class="r"><a href="#javascript">0</a></div>
            </li>
            <li>
                <div class="l"></div>
                <div class="r"><a href="#javascript">0</a></div>
            </li>
            <li>
                <div class="l"></div>
                <div class="r"><a href="#javascript">0</a></div>
            </li>
            <li>
                <div class="l"></div>
                <div class="r"><a href="#javascript">0</a></div>
            </li>
            <li>
                <div class="l"></div>
                <div class="r"><a href="#javascript">0</a></div>
            </li>
            <li>
                <div class="l"></div>
                <div class="r"><a href="#javascript">0</a></div>
            </li>
            <li>
                <div class="l"></div>
                <div class="r"><a href="#javascript">0</a></div>
            </li>
            <li>
                <div class="l"></div>
                <div class="r"><a href="#javascript">0</a></div>
            </li>
            <li>
                <div class="l"></div>
                <div class="r"><a href="#javascript">0</a></div>
            </li>
            <li>
                <div class="l"></div>
                <div class="r"><a href="#javascript">0</a></div>
            </li>
            <li>
                <div class="l"></div>
                <div class="r"><a href="#javascript">0</a></div>
            </li>
            <li>
                <div class="l"></div>
                <div class="r"><a href="#javascript">0</a></div>
            </li>
        </ul>
    </div>
    <script>
        $(function() {
            var json = [{
                'name': '第1条',
                'num': 99
            }, {
                'name': '第2条',
                'num': 99
            }, {
                'name': '第3条',
                'num': 99
            }, {
                'name': '第4条',
                'num': 99
            }, {
                'name': '第5条',
                'num': 99
            }, {
                'name': '第6条',
                'num': 99
            }, {
                'name': '第7条',
                'num': 99
            }, {
                'name': '第8条',
                'num': 99
            }, {
                'name': '第9条',
                'num': 99
            }, {
                'name': '第10条',
                'num': 99
            }, {
                'name': '第11条',
                'num': 99
            }, {
                'name': '第12条',
                'num': 99
            }];
            for (var i = 0; i < json.length; i++) {
                $('.behaviorList li').eq(i).find('.l').html(json[i].name).end().find('.r').html(json[i].num);
            }
        });
        var doscrollList = function() {
            var $parent = $('.behaviorList');
            var length = $(".behavior ul li").length;
            for (var i = 0; i < length; i++) {
                if (i % 6 == 0) {
                    var $first = $parent.find('li').eq(0);
                } else if (i % 6 == 1) {
                    var $two = $parent.find('li').eq(1);
                } else if (i % 6 == 2) {
                    var $three = $parent.find('li').eq(2);
                } else if (i % 6 == 3) {
                    var $four = $parent.find('li').eq(3);
                } else if (i % 6 == 4) {
                    var $five = $parent.find('li').eq(4);
                } else if (i % 6 == 5) {
                    var $six = $parent.find('li').eq(5);
                } else {

                }
            }
            var height = $first.height();
            $first.animate({
                height: 0
            }, 600, function() {
                $first.css('height', height).appendTo($parent);
            });
            $two.animate({
                height: 0
            }, 700, function() {
                $two.css('height', height).appendTo($parent);
            });
            $three.animate({
                height: 0
            }, 800, function() {
                $three.css('height', height).appendTo($parent);
            });
            $four.animate({
                height: 0
            }, 900, function() {
                $four.css('height', height).appendTo($parent);
            });
            $five.animate({
                height: 0
            }, 1000, function() {
                $five.css('height', height).appendTo($parent);
            });
            $six.animate({
                height: 0
            }, 1100, function() {
                $six.css('height', height).appendTo($parent);
            });
        }


        var myset = setInterval(function() {
            doscrollList();
        }, 3000);

        $(".behavior")[0].addEventListener("mouseover", function() {
            clearInterval(myset);
        });
        $(".behavior")[0].addEventListener("mouseout", function() {
            myset = setInterval(function() {
                doscrollList();
            }, 3000);
        })
    </script>
</body>

</html>
这是用jquery做的一个翻页表格效果
使用了setInterval定时器每3s定时刷新
最后使用了一个定时器的清除来实现鼠标移入动画停止
posted @ 2019-10-14 09:27 A-dabai 阅读(231) 评论(0) 收藏举报
刷新页面返回顶部
翻页效果表格（清除定时器）

公告
