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

最新推荐文章于 2024-03-27 15:40:52 发布

ヤD草帽Dヤ

最新推荐文章于 2024-03-27 15:40:52 发布

阅读量7.3k

点赞数 1

分类专栏： html+css+js 文章标签：滚动广告无限滚动显示信息 html+js实现滚动文字效果

本文链接：https://blog.csdn.net/qq_41093007/article/details/79316662

版权

html+css+js 专栏收录该内容

6 篇文章 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>