一个文字消息滚动效果

最新推荐文章于 2022-07-22 11:37:14 发布

jklgfgdsr

最新推荐文章于 2022-07-22 11:37:14 发布

阅读量1.4k

点赞数

分类专栏： javascript html

本文链接：https://blog.csdn.net/jklgfgdsr/article/details/82424793

版权

javascript 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

html

6 篇文章 2 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js实现消息滚动效果</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
* {
    margin:0;
    padding:0;
}
.scroll-box {
    width:400px;
    height:200px;
    border:2px solid #000;
    margin:20px auto;
    overflow:hidden;
}
.scroll-box ul {
    list-style:none;
    width:100%;
    height:100%;
}
.scroll-box ul li {
    width:100%;
    height:40px;
    box-sizing:border-box;
    line-height:40px;
    text-align:center;
}
</style>
</head>
<body>
<div class="scroll-box">
 <ul>
  <li>1好消息！好消息！本店所有商品全部白送1</li>
  <li>2好消息！好消息！本店所有商品全部白送2</li>
  <li>3好消息！好消息！本店所有商品全部白送3</li>
  <li>4好消息！好消息！本店所有商品全部白送4</li>
  <li>5好消息！好消息！本店所有商品全部白送5</li>
  <li>6好消息！好消息！本店所有商品全部白送6</li>
  <li>7好消息！好消息！本店所有商品全部白送7</li>
  <li>8好消息！好消息！本店所有商品全部白送8</li>
 </ul>
</div>

<script>
$(function() {
    //获得当前<ul>
    var $uList = $(".scroll-box ul");
    var timer = null;
    //触摸清空定时器
    $uList.hover(function() {
        clearInterval(timer);
    },
    function() { //离开启动定时器
        timer = setInterval(function() {
            scrollList($uList);
        },
        1000);
    }).trigger("mouseleave"); //自动触发触摸事件
    //滚动动画
    function scrollList(obj) {
        //获得当前<li>的高度
        var scrollHeight = $(".scroll-box ul li:first").height();
        //滚动出一个<li>的高度
        $uList.stop().animate({
            marginTop: -scrollHeight
        },
        600,
        function() {
            //动画结束后，将当前<ul>marginTop置为初始值0状态，再将第一个<li>拼接到末尾。
            $uList.css({
                marginTop: 0
            }).find("li:first").appendTo($uList);
        });
    }
});
</script>

</body>
</html>

jklgfgdsr

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一个文字消息滚动效果

&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;js实现消息滚动效果&lt;/title&gt;&lt;script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"&am
复制链接

扫一扫

专栏目录