淘宝上的一段JS实现的效果.
1
<html>
2 <body>
3 <ul id="SlideLine">
4 <li><a href="http://list.taobao.com/browse/search_auction.htm?sort=coefp&style=list&path=99-50001031&ppath=20433%3A27491%3B20436%3A27534&commend=1%2C2&cat=50001031&random=false&filter=&s=0&n=40&newprop=&strade=y&olu=yes&atype=&isnew=2&promote=&start_price=&end_price=&loc=&q=&_promote=2048"><span class="dummy_attribute ">货币</span> <span class="dummy_gamename">魔兽世界</span> <span class="dummy_name">全区全服金币1G</span><span class="dummy_price title_b">0.04元起</span></a></li>
5 <li><a href="http://search1.taobao.com/browse/search_auction.htm?sort=coefp&style=list&path=99-50001031&ppath=20433%3A27846%3B20436%3A27534&_user=c774fea45cb634157973f8704a1d0343&commend=1%2C2&cat=50001031&filter=&s=0&n=40&newprop=&strade=y&olu=yes&atype=&isnew=2&promote=&start_price=&end_price=&loc=&q=%BD%F0&_promote=2048"><span class="dummy_attribute ">货币</span> <span class="dummy_gamename">幻想</span> <span class="dummy_name">1金币</span><span class="dummy_price title_b">0.7元</span></a></li>
6 <li><a href="http://search1.taobao.com/browse/search_auction.htm?sort=coefp&style=list&path=99-50001031&ppath=20433%3A27562&commend=1%2C2&cat=50001031&random=false&filter=reserve_price%5B5%2C100000000%5D&s=0&n=40&newprop=&strade=y&olu=yes&atype=&isnew=2&promote=&start_price=5&end_price=&loc=&q=100&_promote=2048"><span class="dummy_attribute ">货币</span> <span class="dummy_gamename">梦幻西游</span> <span class="dummy_name">100W游戏币</span><span class="dummy_price title_b">5元</span></a></li>
7 <li><a href="http://search1.taobao.com/browse/search_auction.htm?sort=coefp&style=list&path=99-50001031&ppath=20433%3A29395%3B20436%3A27534&commend=1%2C2&cat=50001031&random=false&filter=reserve_price%5B1%2C10%5D&s=0&n=40&newprop=&strade=y&olu=yes&atype=&isnew=2&promote=&start_price=1&end_price=10&loc=&q=1D_promote=2048"><span class="dummy_attribute ">货币</span> <span class="dummy_gamename">征途</span> <span class="dummy_name">征途币1锭</span><span class="dummy_price title_b">1元</span></a></li>
8 <li><a href="http://search1.taobao.com/browse/search_auction.htm?sort=coefp&style=list&path=99-50001031&ppath=20433%3A27561&commend=1%2C2&cat=50001031&random=false&filter=&s=0&n=40&newprop=&strade=y&olu=yes&atype=&isnew=2&promote=&start_price=&end_price=&loc=&q=1000&_promote=2048"><span class="dummy_attribute ">货币</span> <span class="dummy_gamename">冒险岛</span> <span class="dummy_name">冒险岛1000W</span><span class="dummy_price title_b">2.5元</span></a></li>
9 <li><a href="http://search1.taobao.com/browse/search_auction.htm?sort=coefp&style=list&path=99-50001031&ppath=20433%3A31747%3B20436%3A27534&commend=all&cat=50001031&random=false&filter=reserve_price%5B20%2C100000000%5D&s=0&n=40&newprop=&strade=y&olu=yes&atype=&isnew=2&promote=&start_price=20&end_price=&loc=&q=EVE+%D2%DA&_promote=2048"><span class="dummy_attribute ">货币</span> <span class="dummy_gamename">EVE</span> <span class="dummy_name">ISK游戏币1亿</span><span class="dummy_price title_b">7元</span></a></li>
10 <li><a href="http://list.taobao.com/browse/99-50001031/t-yes-------g,giydimzthizdonbzga5tembugm3dumrxguztg--g,hmzdanbtgm5ljk6g43fmbpphhmzdanbtgy5npmfrxa-------2-------------y-40-list-coefp-0-all-50001031.htm?_user=c774fea45cb634157973f8704a1d0343%3Fab%3Dc"><span class="dummy_attribute ">装备</span> <span class="dummy_gamename">传奇世界</span> <span class="dummy_name">各区小极品</span><span class="dummy_price title_b">1元起</span></a></li>
11 <li><a href="http://search1.taobao.com/browse/99-50001031/t-false--------yes-------g,giydimzthizdonjqgq--g,hmzdanbtgm5mrsgrvk623ox6-----g,ghjnu-------2--------y-40-list-coefp-0-1,2-50001031.htm"><span class="dummy_attribute ">货币</span> <span class="dummy_gamename">热血江湖</span> <span class="dummy_name">1亿游戏币</span><span class="dummy_price title_b">20元</span></a></li>
12 <li><a href="http://search1.taobao.com/browse/99-49/t-yes---------g,hmzdanbtgm5mjj6k33fmbpph-----g,yst4vxq-------2--------y-40-list-bid-0-1,2-49.htm"><span class="dummy_attribute ">帐号</span> <span class="dummy_gamename">魔兽世界</span> <span class="dummy_name">60级各种族职业帐号</span><span class="dummy_price title_b">1元起</span></a></li>
13 <li><a href="http://search1.taobao.com/browse/99-50001031/t-g,giydimzthiztcnzvgm--g,hmzdanbtgm5lbvgn6w2phqv5-----g,geydbtps-------1,2--------y-40-list-coefp-0-all-50001031.htm"><span class="dummy_attribute ">货币</span> <span class="dummy_gamename">霸王</span> <span class="dummy_name">100w游戏币</span><span class="dummy_price title_b">2元</span></a></li>
14 <li><a href="http://search1.taobao.com/browse/99-50001031/t-false--------yes-------g,giydimzthi2dcobqha--g,hmzdanbtgm5m5zgb23g6fnfl-----g,geyda2q-------2--------y-40-list-coefp-0-all-50001031.htm"><span class="dummy_attribute ">货币</span> <span class="dummy_gamename">武林外传</span> <span class="dummy_name">100金</span><span class="dummy_price title_b">5元起</span></a></li>
15 <li><a href="http://search1.taobao.com/browse/99-50001031/t-false--------yes-------g,giydimzthizdqmjthe--g,hmzdanbtgm5m32wdydfmbpph-----g,geyda5y-------2--------y-40-list-coefp-0-all-50001031.htm"><span class="dummy_attribute ">货币</span> <span class="dummy_gamename">完美世界</span> <span class="dummy_name">100w游戏币</span><span class="dummy_price title_b">5元起</span></a></li>
16 </ul>
17
<script type="text/javascript">
18
function slideLine() {
19
var slideBox = document.getElementById('SlideLine');
20 var delay = 1000, speed=20, lh = 24;
21 var tid = null, pause = false;
22 var start = function() {
23 tid=setInterval(slide, speed);
24
}
25 var slide = function() {
26 if (pause) return;
27 slideBox.scrollTop += 2;
28 if (slideBox.scrollTop % lh == 0) {
29 clearInterval(tid);
30 slideBox.appendChild(slideBox.getElementsByTagName('li')[0]);
31 slideBox.scrollTop = 0;
32 setTimeout(start, delay);
33 }
34 }
35 slideBox.onmouseover=function(){pause=true;}
36 slideBox.onmouseout=function(){pause=false;}
37 setTimeout(start, 2000);
38 }
39 slideLine();
40
</script>
41 </body>
42</html>
<html>2
<body>3
<ul id="SlideLine">4
<li><a href="http://list.taobao.com/browse/search_auction.htm?sort=coefp&style=list&path=99-50001031&ppath=20433%3A27491%3B20436%3A27534&commend=1%2C2&cat=50001031&random=false&filter=&s=0&n=40&newprop=&strade=y&olu=yes&atype=&isnew=2&promote=&start_price=&end_price=&loc=&q=&_promote=2048"><span class="dummy_attribute ">货币</span> <span class="dummy_gamename">魔兽世界</span> <span class="dummy_name">全区全服金币1G</span><span class="dummy_price title_b">0.04元起</span></a></li>5
<li><a href="http://search1.taobao.com/browse/search_auction.htm?sort=coefp&style=list&path=99-50001031&ppath=20433%3A27846%3B20436%3A27534&_user=c774fea45cb634157973f8704a1d0343&commend=1%2C2&cat=50001031&filter=&s=0&n=40&newprop=&strade=y&olu=yes&atype=&isnew=2&promote=&start_price=&end_price=&loc=&q=%BD%F0&_promote=2048"><span class="dummy_attribute ">货币</span> <span class="dummy_gamename">幻想</span> <span class="dummy_name">1金币</span><span class="dummy_price title_b">0.7元</span></a></li>6
<li><a href="http://search1.taobao.com/browse/search_auction.htm?sort=coefp&style=list&path=99-50001031&ppath=20433%3A27562&commend=1%2C2&cat=50001031&random=false&filter=reserve_price%5B5%2C100000000%5D&s=0&n=40&newprop=&strade=y&olu=yes&atype=&isnew=2&promote=&start_price=5&end_price=&loc=&q=100&_promote=2048"><span class="dummy_attribute ">货币</span> <span class="dummy_gamename">梦幻西游</span> <span class="dummy_name">100W游戏币</span><span class="dummy_price title_b">5元</span></a></li>7
<li><a href="http://search1.taobao.com/browse/search_auction.htm?sort=coefp&style=list&path=99-50001031&ppath=20433%3A29395%3B20436%3A27534&commend=1%2C2&cat=50001031&random=false&filter=reserve_price%5B1%2C10%5D&s=0&n=40&newprop=&strade=y&olu=yes&atype=&isnew=2&promote=&start_price=1&end_price=10&loc=&q=1D_promote=2048"><span class="dummy_attribute ">货币</span> <span class="dummy_gamename">征途</span> <span class="dummy_name">征途币1锭</span><span class="dummy_price title_b">1元</span></a></li>8
<li><a href="http://search1.taobao.com/browse/search_auction.htm?sort=coefp&style=list&path=99-50001031&ppath=20433%3A27561&commend=1%2C2&cat=50001031&random=false&filter=&s=0&n=40&newprop=&strade=y&olu=yes&atype=&isnew=2&promote=&start_price=&end_price=&loc=&q=1000&_promote=2048"><span class="dummy_attribute ">货币</span> <span class="dummy_gamename">冒险岛</span> <span class="dummy_name">冒险岛1000W</span><span class="dummy_price title_b">2.5元</span></a></li>9
<li><a href="http://search1.taobao.com/browse/search_auction.htm?sort=coefp&style=list&path=99-50001031&ppath=20433%3A31747%3B20436%3A27534&commend=all&cat=50001031&random=false&filter=reserve_price%5B20%2C100000000%5D&s=0&n=40&newprop=&strade=y&olu=yes&atype=&isnew=2&promote=&start_price=20&end_price=&loc=&q=EVE+%D2%DA&_promote=2048"><span class="dummy_attribute ">货币</span> <span class="dummy_gamename">EVE</span> <span class="dummy_name">ISK游戏币1亿</span><span class="dummy_price title_b">7元</span></a></li>10
<li><a href="http://list.taobao.com/browse/99-50001031/t-yes-------g,giydimzthizdonbzga5tembugm3dumrxguztg--g,hmzdanbtgm5ljk6g43fmbpphhmzdanbtgy5npmfrxa-------2-------------y-40-list-coefp-0-all-50001031.htm?_user=c774fea45cb634157973f8704a1d0343%3Fab%3Dc"><span class="dummy_attribute ">装备</span> <span class="dummy_gamename">传奇世界</span> <span class="dummy_name">各区小极品</span><span class="dummy_price title_b">1元起</span></a></li>11
<li><a href="http://search1.taobao.com/browse/99-50001031/t-false--------yes-------g,giydimzthizdonjqgq--g,hmzdanbtgm5mrsgrvk623ox6-----g,ghjnu-------2--------y-40-list-coefp-0-1,2-50001031.htm"><span class="dummy_attribute ">货币</span> <span class="dummy_gamename">热血江湖</span> <span class="dummy_name">1亿游戏币</span><span class="dummy_price title_b">20元</span></a></li>12
<li><a href="http://search1.taobao.com/browse/99-49/t-yes---------g,hmzdanbtgm5mjj6k33fmbpph-----g,yst4vxq-------2--------y-40-list-bid-0-1,2-49.htm"><span class="dummy_attribute ">帐号</span> <span class="dummy_gamename">魔兽世界</span> <span class="dummy_name">60级各种族职业帐号</span><span class="dummy_price title_b">1元起</span></a></li>13
<li><a href="http://search1.taobao.com/browse/99-50001031/t-g,giydimzthiztcnzvgm--g,hmzdanbtgm5lbvgn6w2phqv5-----g,geydbtps-------1,2--------y-40-list-coefp-0-all-50001031.htm"><span class="dummy_attribute ">货币</span> <span class="dummy_gamename">霸王</span> <span class="dummy_name">100w游戏币</span><span class="dummy_price title_b">2元</span></a></li>14
<li><a href="http://search1.taobao.com/browse/99-50001031/t-false--------yes-------g,giydimzthi2dcobqha--g,hmzdanbtgm5m5zgb23g6fnfl-----g,geyda2q-------2--------y-40-list-coefp-0-all-50001031.htm"><span class="dummy_attribute ">货币</span> <span class="dummy_gamename">武林外传</span> <span class="dummy_name">100金</span><span class="dummy_price title_b">5元起</span></a></li>15
<li><a href="http://search1.taobao.com/browse/99-50001031/t-false--------yes-------g,giydimzthizdqmjthe--g,hmzdanbtgm5m32wdydfmbpph-----g,geyda5y-------2--------y-40-list-coefp-0-all-50001031.htm"><span class="dummy_attribute ">货币</span> <span class="dummy_gamename">完美世界</span> <span class="dummy_name">100w游戏币</span><span class="dummy_price title_b">5元起</span></a></li>16
</ul>17
<script type="text/javascript">
18
function slideLine() {
19
var slideBox = document.getElementById('SlideLine');20
var delay = 1000, speed=20, lh = 24;21
var tid = null, pause = false;22
var start = function() {23
tid=setInterval(slide, speed);24
}25
var slide = function() {26
if (pause) return;27
slideBox.scrollTop += 2; 28
if (slideBox.scrollTop % lh == 0) {29
clearInterval(tid);30
slideBox.appendChild(slideBox.getElementsByTagName('li')[0]);31
slideBox.scrollTop = 0;32
setTimeout(start, delay);33
}34
}35
slideBox.onmouseover=function(){pause=true;}36
slideBox.onmouseout=function(){pause=false;}37
setTimeout(start, 2000);38
}39
slideLine();40
</script>41
</body>42
</html>
