这个主要就是利用了自定义动画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();
});
