這個主要就是利用了自定義動畫animate（）實現(xiàn)的文本列表循環(huán)滾動特效。下面就一起來看看具體操作吧：
1.需求說明：實現(xiàn)文本列表循環(huán)滾動特效；當光標移入時停止?jié)L動忧侧，光標移開則繼續(xù)博其。
2.方法：
(1)我們先完成HTML頁面代碼和CSS樣式代碼吨艇。在body內容里定義<h3>和無序列表并村，添加CSS規(guī)則巍实，重點設置無序列表的父板快的寬高度滓技，使它只能顯示前三個列表項哩牍。參見代碼：
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>腳本標簽令漂。聲明函數(shù)movePrice(),在函數(shù)體中聲明變量stopscroll表示是否停止?jié)L動膝昆，聲明變量margintop保存第一個列表項的上外邊距值，初始值為0叠必。如果光標沒有移入列表中荚孵，那么使用Window對象的setInterval方法每隔50秒設置第一個列表項的“margin-top”屬性值，從而實現(xiàn)向上滾動的特效纬朝。在函數(shù)中為列表的鼠標移入移出綁定事件收叶，將stopscroll賦值為true表示停止?jié)L動，賦值為false表示繼續(xù)滾動：
$(".express").mouseover(function(){
stopSpcroll = true;
}).mouseout(function(){
stopSpcroll = false;
})
最后調用函數(shù)共苛。
整體參見代碼如下：
<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")){
//判斷是否存在動畫狀態(tài)
//減小的值達到第一個列表項的高度時
if((-margintop) > $first.height()){
$first.css({"margin-top":0}).appendTo($(".express"));
margintop=0;
}
}
})
},50);
$(".express").mouseover(function(){
stopSpcroll = true;
}).mouseout(function(){
stopSpcroll = false;
})
}
$(function(){
//書籍的暢銷排行榜循環(huán)向上滾動
moveBook();
});
