基于jQuery的公告无限循环滚动实现代码

基于jQuery的公告无限循环滚动实现代码,效果如下,多用于pc端电商网站之中不断的循环更新的公告消息。


5640239-0c0c9faf694d7e38.gif

写一个简单的小demo:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <title>基于jQuery的公告无限循环滚动实现代码</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            li {
                list-style: none;
            }
            
            body {
                line-height: 1.5;
                font-size: 14px;
            }
            
            .scroll {
                display: inline-block;
                overflow: hidden;
                position: relative;
                height: 50px;
            }
            
            .scroll ul {
                transform: translateY(0);
            }
            
            .animate {
                -webkit-transition: all .3s ease-out;
            }
            
            .scroll li {
                overflow: hidden;
                display: -webkit-box;
                margin-left: 10px;
                width: 90%;
                height: 50px;
                line-height: 30px;
                color: #333;
                text-overflow: ellipsis;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                white-space: normal;
            }
            
            .scroll li  img{
                margin-top: 20px;
                margin-right: 12px;
                width: 12px;
                height: 12px;
                
            }
        </style>

    </head>

    <body>
        <div class="scroll">
            <ul>
                <li><img src="message.png" /><span>前端妹子是我吗</span></li>
                <li><img src="message.png" />对呀,我就是前端妹子啊</li>
                <li><img src="message.png" />哈哈哈你是谁呀</li>
                <li><img src="message.png" />你猜猜我是哪个</li>
            </ul>
        </div>
    </body>
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    
    <script>
        $(function() {
            var scrollDiv = $(".scroll"),
                $ul = scrollDiv.find("ul"),
                $li = scrollDiv.find("li"),
                $length = $li.length,
                $liHeight = $li.height(),
                num = 0;

            if(scrollDiv.length == 0) {
                return;
            }

            if($length > 1) {
                $ul.append($li.eq(0).clone());
                setInterval(
                    function() {
                        num++;
                        $ul.addClass("animate").css("-webkit-transform", "translateY(-" + $liHeight * (num) + "px)");
                        setTimeout(
                            function() {
                                if(num == $length) {
                                    $ul.removeClass("animate").css("-webkit-transform", "translateY(0)");
                                    num = 0;
                                }
                            }, 300);
                    }, 3000);
            }
        });
    </script>

</html>

热门推荐:前端,Java,产品经理,微信小程序,Python等资源合集大放送

原文作者:祈澈姑娘;技术博客:https://www.jianshu.com/u/05f416aefbe1
90后前端妹子,爱编程,爱运营,爱折腾。 坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

猜你喜欢

转载自blog.csdn.net/qq_36538012/article/details/84669836