文字橫向滾動，或上下滾動
阿新 • • 發佈：2019-02-01
1、文字橫向滾動使用<marquee>標籤即可。
<marquee><h1 style="margin: 40px; font: 30px Microsoft Yahei; text-align: center;">簡單的jQuery無縫向上滾動效果演示1</h1></marquee>2、文字縱向滾動，引入一個scroll.js,記住要先引用jquery.js。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>簡單的jQuery無縫向上滾動效果演示</title> <style> .myscroll { width: 300px; height: 260px; margin: 0 auto; border: 1px solid #ccc; line-height: 26px; font-size: 12px; overflow: hidden;} </style> <script src="js/jquery-1.8.3.min.js"></script> <script src="js/scroll.js"></script> <script type="text/javascript"> $(function(){ $('.myscroll').myScroll({ speed: 40, //數值越大，速度越慢 rowHeight: 26 //li的高度 }); }); </script> </head> <body> <div class="menu" style="margin:50px auto;width:500px;"> <marquee><h1 style="margin: 40px; font: 30px Microsoft Yahei; text-align: center;">簡單的jQuery無縫向上滾動效果演示1</h1></marquee> </div> <div class="myscroll"> <ul> <li><a href="">用FlexSlider製作支付寶2013版幻燈片</a></li> <li><a href="">扁平化UI/Flat UI Kit(PSD)</a></li> <li><a href="">童趣卡通聖誕老人向量素材(EPS)</a></li> <li><a href="">63個線性圖示素材(PSD)</a></li> <li><a href="">15個音樂類圖示素材(AI)</a></li> <li><a href="">jQuery側邊導航外掛SidebarJS</a></li> <li><a href="">jQuery計時器外掛TimeCircles</a></li> <li><a href="">jQuery仿Google Play幻燈片效果外掛plusview</a></li> <li><a href="">100個聖誕節向量圖示(PSD/SVG)</a></li> <li><a href="">15個音樂類圖示素材(AI)</a></li> <li><a href="">jQuery側邊導航外掛SidebarJS</a></li> <li><a href="">jQuery計時器外掛TimeCircles</a></li> <li><a href="">15個音樂類圖示素材(AI)</a></li> <li><a href="">jQuery側邊導航外掛SidebarJS</a></li> <li><a href="">jQuery計時器外掛TimeCircles</a></li> </ul> </div> </body> </html>