制作列表的垂直向上循环滚动特效

这个主要就是利用了自定义动画animate（）实现的文本列表循环滚动特效。下面就一起来看看具体操作吧：
1.需求说明：实现文本列表循环滚动特效；当光标移入时停止滚动，光标移开则继续。
2.方法：
(1)我们先完成HTML页面代码和CSS样式代码。在body内容里定义<h3>和无序列表，添加CSS规则，重点设置无序列表的父板快的宽高度，使它只能显示前三个列表项。参见代码：
body内容：

<body>
<h3>近七日畅销榜</h3>
<div id="book">
    <ul class="express">
        <li>傲慢与偏见</li>
        <li>玻璃球</li>
        <li>澳大利亚：王八渡嗨</li>
        <li>浪漫地中海</li>
        <li>欧陆风情</li>
        <li>疯狂的动物园</li>
        <li>小疯子</li>
    </ul>
</div>
</body>

css样式：

 <style>
        ul{
            list-style: none;
        }
        ul li{
            height: 25px;
            line-height: 25px;
        }
        h3{
            width: 212px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: #c33;
        }
        div#book{
            overflow: hidden;/*隐藏溢出部分*/
            height: 75px;
            padding: 5px;
            border: 1px solid red;
            width: 200px;
        }
    </style>

(2)在HTML文件中导入jQuery框架，并添加<script></script>脚本标签。声明函数movePrice(),在函数体中声明变量stopscroll表示是否停止滚动，声明变量margintop保存第一个列表项的上外边距值，初始值为0。如果光标没有移入列表中，那么使用Window对象的setInterval方法每隔50秒设置第一个列表项的“margin-top”属性值，从而实现向上滚动的特效。在函数中为列表的鼠标移入移出绑定事件，将stopscroll赋值为true表示停止滚动，赋值为false表示继续滚动：

 $(".express").mouseover(function(){
                stopSpcroll = true;
            }).mouseout(function(){
                stopSpcroll = false;
            })

最后调用函数。
整体参见代码如下：

  <script>
        function moveBook(){
            var stopSpcroll = false;
            var margintop = 0;
            setInterval(function(){
                if(stopSpcroll) return;
                $(".express").children("li").first().animate({"margin-top":
                        margintop--},0,function(){
                    var $first = $(this);
                    if(!$first.is(":animated")){
                        //判断是否存在动画状态
                        //减小的值达到第一个列表项的高度时
                        if((-margintop) > $first.height()){
                            $first.css({"margin-top":0}).appendTo($(".express"));
                            margintop=0;
                        }
                    }
                })
            },50);
            $(".express").mouseover(function(){
                stopSpcroll = true;
            }).mouseout(function(){
                stopSpcroll = false;
            })
        }
        $(function(){
            //书籍的畅销排行榜循环向上滚动
            moveBook();
        });

制作列表的垂直向上循环滚动特效

推荐阅读更多精彩内容