文字滾動
阿新 • • 發佈：2018-12-27
頁面程式碼：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link href="css/global.css" rel="stylesheet"/> <link href="css/layout.css" rel="stylesheet"/> <link href="css/template.css" rel="stylesheet" /> </head> <body> <section id="silder"> <!--書訊快遞--> <div class="book_sort"> <div class="book_sort_bg"><img src="images/dd_book_mess.gif" alt="mess" style=" vertical-align:text-bottom;"/>書訊快遞</div> <div class="book_class"> <div id="dome"> <div id="dome1"> <ul id="express"> <li>・2010考研英語大綱到貨75折...</li> <li>・權威定本四大名著（人民文...</li> <li>・口述歷史權威唐德剛先生國...</li> <li>・袁偉民與體壇風雲：實話實...</li> <li>・我們臺灣這些年：轟動兩岸...</li> <li>・暢銷教輔推薦：精品套書50...</li> <li>・2010版法律碩士聯考大綱75...</li> <li>・計算機新書暢銷書75折搶購</li> <li>・2009年孩子最喜歡的書>></li> <li>・弗洛伊德作品精選集59折</li> <li>・2010考研英語大綱到貨75折...</li> <li>・權威定本四大名著（人民文...</li> <li>・口述歷史權威唐德剛先生國...</li> <li>・袁偉民與體壇風雲：實話實...</li> <li>・我們臺灣這些年：轟動兩岸...</li> <li>・暢銷教輔推薦：精品套書50...</li> <li>・2010版法律碩士聯考大綱75...</li> <li>・計算機新書暢銷書75折搶購</li> <li>・2009年孩子最喜歡的書>></li> <li>・弗洛伊德作品精選集59折</li> <li>・2010考研英語大綱到貨75折...</li> <li>・權威定本四大名著（人民文...</li> <li>・口述歷史權威唐德剛先生國...</li> <li>・袁偉民與體壇風雲：實話實...</li> <li>・我們臺灣這些年：轟動兩岸...</li> <li>・暢銷教輔推薦：精品套書50...</li> <li>・2010版法律碩士聯考大綱75...</li> <li>・計算機新書暢銷書75折搶購</li> <li>・2009年孩子最喜歡的書>></li> <li>・弗洛伊德作品精選集59折</li> <li>・2010考研英語大綱到貨75折...</li> <li>・權威定本四大名著（人民文...</li> <li>・口述歷史權威唐德剛先生國...</li> <li>・袁偉民與體壇風雲：實話實...</li> <li>・我們臺灣這些年：轟動兩岸...</li> <li>・暢銷教輔推薦：精品套書50...</li> <li>・2010版法律碩士聯考大綱75...</li> <li>・計算機新書暢銷書75折搶購</li> <li>・2009年孩子最喜歡的書>></li> <li>・弗洛伊德作品精選集59折</li> </ul> </div> </div> </div> </div> </section> </body> <script src="js/jquery-1.12.4.js"></script> <script> //滾動程式碼 var marginTop =0; var interval = setInterval(function(){ $("#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); </script> </html>
頁面效果由下至上滾動：
