一个文字消息滚动效果

140 阅读 0 评论 93 点赞

我是靠谱客的博主无情未来，这篇文章主要介绍一个文字消息滚动效果，现在分享给大家，希望可以做个参考。

复制代码

<!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>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!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>