HTML+JS制作无限滚动广告代码

Dear 丶 2022-05-31 07:53 226阅读 0赞

<!DOCTYPE>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>滚动广告</title>
        <script src="jquery.js"></script>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            ui,li {
                list-style: none;
            }
            #news{
                height: 24px;
                overflow: hidden;
                width: 300px;
                border: solid 1px;
                text-align: center;
            }
        </style>
    </head>
    <body>
    <div id="news">
        <ul>
            <li>恭喜覃**获得法拉利一辆</li>
            <li>恭喜黄**获得戒指一枚</li>
            <li>恭喜董**获得创口贴一箱</li>
            <li>恭喜梁**获得哇哈哈一辆</li>
            <li>恭喜蓝**获得感冒药一辆</li>
        </ul>
    </div>
    <script>
        $(function() {
            var $this = $("#news");
            var scrollTimer;
            $this.hover(function() {
                clearInterval(scrollTimer);
            }, function() {
                scrollTimer = setInterval(function() {
                    scrollNews($this);
                }, 2000);
            }).trigger("mouseleave");
    
            function scrollNews(obj) {
                var $self = obj.find("ul");
                var lineHeight = $self.find("li:first").height();
    
                $self.animate({
                    "marginTop": -lineHeight + "px" }, 500, function() {
                    $self.css({
                        marginTop: 0
                    }).find("li:first").appendTo($self);
                })
            }
        })
    </script>
    </body>
    </html>