一个文字消息滚动效果

83 阅读 0 评论 55 点赞

我是靠谱客的博主无情未来，最近开发中收集的这篇文章主要介绍一个文字消息滚动效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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