文字的无缝上下、左右滚动
实例一：
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>
