JavaScript_文字上下滚动效果(jquery)

最新推荐文章于 2021-08-21 17:49:46 发布

G018_star sky♬

最新推荐文章于 2021-08-21 17:49:46 发布

阅读量174

点赞数

分类专栏： jQuery 文章标签： javascript jquery

本文链接：https://blog.csdn.net/qq_42526440/article/details/113979143

版权

jQuery CSS HTML 滚动效果事件处理

关键词由CSDN通过智能技术生成

jQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin:0;
            padding:0;
        }
        ui,li {
            list-style:none;
        }
        #news {
            height:450px;
            overflow:hidden;
            width:300px;
            border:solid 5px pink;
            text-align:center;
            background: url(../img/1.jpg);
        }

    </style>
    <script src="../jQuery/jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="news">
    <ul>
        <li>恭喜覃**获得法拉利一辆</li>
        <li>恭喜黄**获得Sj戒指一枚</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);
            }, 100);
        }).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>