今天要實現抽獎名單在首頁滾動展示的效果，就用js寫了一個，代碼如下：
html代碼：
<style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} a,a:visited{color:#5e5e5e; text-decoration:none;} a:hover{color:#b52725;text-decoration:underline;} .clear{display:block;overflow:hidden;clear:both;height:0;line-height:0;font-size:0;} body{font:12px/180% Arial, Helvetica, sans-serif;} /* ranklist */ .ranklist{height:200px;overflow:hidden;} .ranklist li{height:26px;line-height:26px; padding-bottom:10px; overflow:hidden;position:relative;padding:0 70px 0 30px;} .ranklist li em{background:url(images/mun.gif) no-repeat;width:20px;height:16px;overflow:hidden;display:block;position:absolute;left:0;top:0;text-align:center;font-style:normal;color:#333;} .ranklist li em{background-position:0 -16px;} .ranklist li.top em{background-position:0 0;color:#fff;} .ranklist li .num{position:absolute;right:0;top:0;color:#999;} </style> </head> <body> <div class="ranklist" id="ranklist"> <ul style="margin-top:0px;"> <li class="top"> <em>01</em><p><a href="http://www.17sucai.com/" target="_blank">js圖片左右無縫滾動用鼠標控制圖片滾動</a></p><span class="num">32萬下載</span> </li> <li class="top"> <em>02</em><p><a href="http://www.17sucai.com/" target="_blank">js無縫滾動制作js文字無縫滾動和js圖片無縫滾動</a></p><span class="num">32萬下載</span> </li> <li class="top"> <em>03</em><p><a href="http://www.17sucai.com/" target="_blank">jquery 滾動 kxbdSuperMarquee插件支持圖片與文字無縫滾動 圖片翻滾 焦點圖左右切換 banner廣告制作</a></p><span class="num">32萬下載</span> </li> <li> <em>04</em><p><a href="http://www.17sucai.com/" target="_blank">javascript滾動圖片插件支持單排圖片上下滾動、圖片無縫滾動</a></p><span class="num">32萬下載</span> </li> <li> <em>05</em><p><a href="http://www.17sucai.com/" target="_blank"> javascript滾動圖片帶按鈕控制上下左右自動無縫滾動</a></p><span class="num">32萬下載</span> </li> <li> <em>06</em><p><a href="http://www.17sucai.com/" target="_blank">jquery hover圖片插件制作鼠標滑過標題單個展開圖片效果</a></p><span class="num">32萬下載</span> </li> <li> <em>07</em><p><a href="http://www.17sucai.com/" target="_blank">flash圖片特效3D立體動畫焦點圖片切換帶左右按鈕控制滾動</a></p><span class="num">32萬下載</span> </li> <li> <em>08</em><p><a href="http://www.17sucai.com/" target="_blank">js lazyload實現網頁圖片延遲加載特效</a></p><span class="num">32萬下載</span> </li> <li> <em>09</em><p><a href="http://www.17sucai.com/" target="_blank">FlippingBook電子雜志書去版權,翻頁圖片全部外調 站長珍藏版</a></p><span class="num">32萬下載</span> </li> <li> <em>10</em><p><a href="http://www.17sucai.com/" target="_blank">門戶網站jquery廣告控制flash或圖片頂部廣告顯示隱藏</a></p><span class="num">32萬下載</span> </li> </ul> </div>
js代碼：
<script type="text/javascript"> var scrtime; function scrollTextList() { /// <summary> /// 滾動文字列表 /// </summary> scrtime = window.setInterval(function () { var $ul = $("#ranklist ul"); var liHeight = $ul.find("li:first").height(); $ul.animate({ marginTop: -liHeight + "px" }, 500, function () { $ul.find("li:first").insertAfter($ul.find("li:last")); $ul.css({ marginTop: 0 }); }); }, 2000); } $(function () { scrollTextList(); $("#ranklist").mouseover(function () { clearInterval(scrtime); }).mouseout(function () { scrollTextList(); }); }); </script>