實例一：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>滾動板</title> 5 <style type="text/css"> 6 body { font: 12px/1 "宋體", SimSun, serif; background:#fff; color:#000; } 7 .scrollUl { overflow:hidden; position:relative; } 8 #scrollUlTest1 {height:80px;} 9 #scrollUlTest2 {height:120px;} 10 .scrollUl ul, .scrollUl li { margin:0; padding:0; list-style:none outside; } 11 .scrollUl ul { position:absolute; } 12 .scrollUl li { height:20px; } 13 </style> 14 <script type="text/javascript" language="javascript"> 15 // containerId 滾動板外層節點的 ID 16 // numViews 分幾屏滾動，需要滾動顯示的總行數應該是分屏數的整倍數。 17 // showTime 每屏固定住時顯示的時間，單位毫秒 18 // scrollTime 每次滾動一屏用的時間，單位毫秒 19 var ScrollUl=function(containerId, numViews, showTime, scrollTime) { 20 //定時器變量，因為有移到層上時停止滾動的事件處理，而那時可能還沒開始定時器呢，所以先把這個變量聲明出來。 21 this.timer=null; 22 this.numViews = numViews; 23 this.showTime = showTime; 24 this.scrollTime = scrollTime; 25 this.container = document.getElementById(containerId); 26 var ulChild = this.container.getElementsByTagName('ul'); 27 var ul = ulChild[0]; 28 //ul 是未使用 CSS 明確指定高度的，IE 中用 realstyle 取不到高度，只能得到 auto，而 getBoundingClientRect() 是 IE 和 FF 都支持的方式。 29 var rect = ul.getBoundingClientRect(); 30 var heightAll = rect.bottom - rect.top; 31 var heightView = heightAll / this.numViews; 32 var msPerPx = this.scrollTime / heightView; 33 //復制出一份來，接在原塊的后面，用於頭接尾的顯示 34 var ulCopy = ul.cloneNode(true); 35 ulCopy.style.top = heightAll+'px'; 36 this.container.appendChild(ulCopy); 37 var itself = this; 38 //向上滾動的函數 39 var scrollView = function() { 40 var oldTop = (''==ul.style.top) ? 0: parseInt(ul.style.top) ; 41 //移動到頂后，把位置復原，兩個塊繼續從 0 開始向上移。 42 if (oldTop < -heightAll) 43 { 44 oldTop = 0; 45 } 46 ul.style.top = (oldTop - 1) +'px'; 47 ulCopy.style.top = (oldTop + heightAll- 1) +'px'; 48 //每滾一整屏多停一會。oldTop-1 是為了讓其停在整數位置。 49 var duration = (0 == ((oldTop-1) % heightView)) ? itself.showTime:msPerPx; 50 itself.timer = setTimeout(scrollView, duration); 51 }; 52 //把 slide 定義為 prototype 的方法時，似乎這樣 setTimeout(itself.slide, itself.showTime); 定時操作不靈，而只能是局部函數才能定時操作，如果帶參數，還得封裝成匿名函數： 53 itself.timer = setTimeout(scrollView, itself.showTime); 54 //鼠標移上時停止滾動 55 this.container.onmouseover = function() { 56 window.clearTimeout(itself.timer); 57 }; 58 //鼠標移開時繼續滾動，不用區分當時是在整屏停止還是滾動中了，全都按靜止時間來延時就得了。 59 this.container.onmouseout = function() { 60 itself.timer = setTimeout(scrollView, itself.showTime); 61 }; 62 }; 63 window.onload = function() { 64 //第一個總共 20 行，每次顯示 2行，分 10 屏 65 var s1 = new ScrollUl('scrollUlTest1', 10, 2000, 1000); 66 //第二個總共 18 行，每次顯示 6 行，分 3 屏 67 var s2 = new ScrollUl('scrollUlTest2', 3, 3000, 2000); 68 }; 69 </script> 70 </head> 71 <body> 72 <h1>通用滾動板演示</h1> 73 <h4>第1組</h4> 74 <div class="scrollUl" id="scrollUlTest1"> 75 <ul> 76 <li>第 1 條內容</li> 77 <li>第 2 條內容</li> 78 <li>第 3 條內容</li> 79 <li>第 4 條內容</li> 80 <li>第 5 條內容</li> 81 <li>第 6 條內容</li> 82 <li>第 7 條內容</li> 83 <li>第 8 條內容</li> 84 <li>第 9 條內容</li> 85 <li>第 10 條內容</li> 86 <li>第 11 條內容</li> 87 <li>第 12 條內容</li> 88 <li>第 13 條內容</li> 89 <li>第 14 條內容</li> 90 <li>第 15 條內容</li> 91 <li>第 16 條內容</li> 92 <li>第 17 條內容</li> 93 <li>第 18 條內容</li> 94 <li>第 19 條內容</li> 95 <li>第 20 條內容</li> 96 </ul> 97 </div> 98 <h4>第2組</h4> 99 <div class="scrollUl" id="scrollUlTest2"> 100 <ul> 101 <li>第 1 條內容</li> 102 <li>第 2 條內容</li> 103 <li>第 3 條內容</li> 104 <li>第 4 條內容</li> 105 <li>第 5 條內容</li> 106 <li>第 6 條內容</li> 107 <li>第 7 條內容</li> 108 <li>第 8 條內容</li> 109 <li>第 9 條內容</li> 110 <li>第 10 條內容</li> 111 <li>第 11 條內容</li> 112 <li>第 12 條內容</li> 113 <li>第 13 條內容</li> 114 <li>第 14 條內容</li> 115 <li>第 15 條內容</li> 116 <li>第 16 條內容</li> 117 <li>第 17 條內容</li> 118 <li>第 18 條內容</li> 119 </ul> 120 </div> 121 </body> 122 </html>
實例二：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>jQuery文字無縫滾動效果代碼</title> 5 <style type="text/css"> 6 li{list-style: none;} 7 .buy-list {height: 100px;overflow: hidden;line-height: 20px;} 8 </style> 9 <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> 10 <script type="text/javascript"> 11 // JavaScript Document 12 (function($){ 13 $.fn.myScroll = function(options){ 14 //默認配置 15 var defaults = { 16 speed:40, //滾動速度,值越大速度越慢 17 rowHeight:24 //每行的高度 18 }; 19 var opts = $.extend({}, defaults, options),intId = []; 20 function marquee(obj, step){ 21 obj.find("ul").animate({ 22 marginTop: '-=1' 23 },0,function(){ 24 var s = Math.abs(parseInt($(this).css("margin-top"))); 25 if(s >= step){ 26 $(this).find("li").slice(0, 1).appendTo($(this)); 27 $(this).css("margin-top", 0); 28 } 29 }); 30 } 31 this.each(function(i){ 32 var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this); 33 intId[i] = setInterval(function(){ 34 if(_this.find("ul").height()<=_this.height()){ 35 clearInterval(intId[i]); 36 }else{ 37 marquee(_this, sh); 38 } 39 }, speed); 40 _this.hover(function(){ 41 clearInterval(intId[i]); 42 },function(){ 43 intId[i] = setInterval(function(){ 44 if(_this.find("ul").height()<=_this.height()){ 45 clearInterval(intId[i]); 46 }else{ 47 marquee(_this, sh); 48 } 49 }, speed); 50 }); 51 }); 52 } 53 })(jQuery); 54 $(document).ready(function(){ 55 $('.buy-list li:even').addClass('lieven'); 56 }) 57 $(function(){ 58 $(".buy-list").myScroll({ 59 speed:200, //數值越大，速度越慢 60 rowHeight:20 //li的高度 61 }); 62 }); 63 </script> 64 </head> 65 <body> 66 <div class="buy-list"> 67 <ul> 68 <li>1、藍瘦香菇</li> 69 <li>2、藍瘦香菇</li> 70 <li>3、藍瘦香菇</li> 71 <li>4、藍瘦香菇</li> 72 <li>5、藍瘦香菇</li> 73 <li>6、藍瘦香菇</li> 74 <li>7、藍瘦香菇</li> 75 <li>8、藍瘦香菇</li> 76 </ul> 77 </div> 78 </body> 79 </html>
實例三：
1 <!DOCTYPE html> 2 <html > 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta name="keywords" content="" /> 6 <meta name="description" content="" /> 7 <title>左右無間斷滾動效果</title> 8 <style type="text/css" media="all"> 9 .d1 {margin:10px auto;width:200px;height:auto;overflow:hidden;white-space:nowrap;} 10 .d2 {margin:0px auto;background-color:#FF9933;} 11 .div2 {width:auto;height:auto;font-size:12px;float:left;overflow:hidden;} 12 ul{margin:0px;padding:9px;list-style:none;line-height:19px;font-size:12px;} 13 a:link,a:visited{color:#3F78CF;text-decoration:none;} 14 a:hover{color:#FF00CC;text-decoration:underline;} 15 </style> 16 <script language="javascript" type="text/javascript"> 17 var s,s2,s3,s4,timer; 18 function init(){ 19 s=getid("div1"); 20 s2=getid("div2"); 21 s3=getid("div3"); 22 s4=getid("scroll"); 23 s4.style.width=(s2.offsetWidth*2+100)+"px"; 24 s3.innerHTML=s2.innerHTML; 25 timer=setInterval(mar,30) 26 } 27 function mar(){ 28 if(s2.offsetWidth<=s.scrollLeft){ 29 s.scrollLeft-=s2.offsetWidth; 30 }else{s.scrollLeft++;} 31 } 32 function getid(id){ 33 return document.getElementById(id); 34 } 35 window.onload=init; 36 </script> 37 </head> 38 <body> 39 <div class="d1" id="div1" onmouseover="clearInterval(timer)" onmouseout="timer=setInterval(mar,30)"> 40 <div class="scroll" id="scroll"> 41 <div class="div2" id="div2"> 42 <ul> 43 <li>藍瘦香菇藍瘦香菇藍瘦香菇藍瘦香菇藍瘦香菇藍瘦香菇</li> 44 </ul> 45 </div> 46 <div id="div3" class="div2"></div> 47 </div> 48 </div> 49 </body> 50 </html>