本文主要給大家分享了使用純javascript實現的可控制的四方向文本無縫滾動的代碼，效果非常不錯，有需要的小伙伴可以參考下。
實現一個文本無縫滾動的效果：
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 <!DOCTYPE html> <!--[if lt IE 7 ]> <html lang="zh-CN" class="ie6"> <![endif]--> <!--[if IE 7 ]> <html lang="zh-CN" class="ie7"> <![endif]--> <!--[if IE 8 ]> <html lang="zh-CN" class="ie8"> <![endif]--> <!--[if IE 9 ]> <html lang="zh-CN" class="ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html lang="zh-CN"> <!--<![endif]--> <head> <title>文字滾動</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style type="text/css"> *{margin:0;padding:0;} body{padding:20px;} .textbox{border:1px solid #ddd;width:auto;overflow: hidden;} .textbox ul{list-style: none;position: relative;} .textbox ul li{padding:5px 0;} </style> </head> <body class="home-page"> <div id="textbox" class="textbox"> <ul> <li>汽車 | 運動B級車降3萬5 </li> <li>家居 | 這麼厲害的裝修 女人真的要坐不住了</li> <li>教育 | 各省前三報考華工重獎10萬元/人</li> <li>汽車 | 運動B級車降3萬5 平行進口車加價11萬</li> <li>健康 | 濫用激素釀苦果 14歲男孩10年不長個兒</li> <li>數碼 | 最新手機報價 說好的寬帶降費提速呢？</li> <li>汽車 | 平行進口車加價11萬</li> <li>汽車 | 運動B級車降3萬5</li> <li>汽車 | 平行進口車加價11萬</li> <li>運動 | 恆大亞冠生死戰 猜比分贏正版球衣</li> </ul> <a href="#" class="btnPrev">向左</a> <a href="#" class="btnNext">向右</a> </div> <br> <br> <div id="textbox2" class="textbox"> <ul> <li>汽車 | 運動B級車降3萬5 </li> <li>家居 | 這麼厲害的裝修 女人真的要坐不住了</li> <li>教育 | 各省前三報考華工重獎10萬元/人</li> <li>汽車 | 運動B級車降3萬5 平行進口車加價11萬</li> <li>健康 | 濫用激素釀苦果 14歲男孩10年不長個兒</li> <li>數碼 | 最新手機報價 說好的寬帶降費提速呢？</li> <li>汽車 | 平行進口車加價11萬</li> <li>汽車 | 運動B級車降3萬5</li> <li>汽車 | 平行進口車加價11萬</li> <li>運動 | 恆大亞冠生死戰 猜比分贏正版球衣</li> </ul> <a href="#" class="btnPrev">向上</a> <a href="#" class="btnNext">向下</a> </div> <script type="text/javascript" src="script/jquery-1.11.1.min.js"></script> <script type="text/javascript"> //四方向無縫滾動 scroll('#textbox',{vis:2,btnHidden:false,dir:'prev',type:'h'}); scroll('#textbox2',{vis:3,btnHidden:false,dir:'prev',type:'v'}); function scroll(container,options){ var box = $(container); var boxUl = box.find('ul').eq(0); var LiHeight = 0; //不包含克隆li列表高度 var cloneLiHeight = 0; //包含克隆li列表高度 var LiWidth = 0; //不包含克隆li列表寬度 var cloneLiWidth = 0; //包含克隆li列表寬度 var Lis = boxUl.children(); var btnPrev = box.find('.btnPrev'); var btnNext = box.find('.btnNext'); //默認參數 var defult= { vis : 2, //顯示個數 autoPlay:true, //自動播放 speed :50, //滾動速度 dir:'prev', //滾動方向 btnHidden:false, //按鈕是否隱藏 type:'v' // 水平或者垂直方向 }; var opt = $.extend({},defult,options); //構建DOM結構 var lastClone=0; //最後克隆元素 var lastCloneHeight=0;//最後克隆元素高度 var allCloneHeight=0;//全部克隆元素總高度 var lastCloneWidth=0; var allCloneWidth=0; var visHeight=0; //可視高度 var visWidth=0; var boxUl_wrap; if(opt.type === "v"){ //垂直方向 Lis.each(function(){ $(this).height($(this).height()); LiHeight += $(this).outerHeight(true); }); lastClone= boxUl.children(':last').clone().addClass('clone').prependTo(boxUl); lastCloneHeight = lastClone.outerHeight(true); allCloneHeight = lastClone.outerHeight(true); for(var i = 0; i < opt.vis ; i++){ Lis.eq(i).clone().addClass('clone').appendTo(boxUl); allCloneHeight += Lis.eq(i).outerHeight(true); } visHeight = allCloneHeight - lastCloneHeight; cloneLiHeight = LiHeight + allCloneHeight; boxUl_wrap = $('<div></div>').css({'width':'100%','height':visHeight,'overflow':'hidden','position':'relative'}).attr('id','ulWrap'); boxUl.css({'height':cloneLiHeight,'top':-lastCloneHeight}).wrap(boxUl_wrap); }else if(opt.type ==="h"){ //水平方向 Lis.css({'whiteSpace':'nowrap','float':'left','paddingRight':'10px'}); Lis.each(function(){ $(this).width($(this).width()); LiWidth += $(this).outerWidth(true); }); lastClone= boxUl.children(':last').clone().addClass('clone').prependTo(boxUl); lastCloneWidth= lastClone.outerWidth(true); allCloneWidth = lastClone.outerWidth(true); for(var j = 0; j < opt.vis ; j++){ Lis.eq(j).clone().addClass('clone').appendTo(boxUl); allCloneWidth += Lis.eq(j).outerWidth(true); } visHeight = Lis.eq(0).outerHeight(true); visWidth = allCloneWidth - lastCloneWidth; cloneLiWidth = LiWidth + allCloneWidth; boxUl_wrap = $('<div></div>').css({'width':visWidth,'height':visHeight,'overflow':'hidden','position':'relative'}).attr('id','ulWrap'); boxUl.css({'width':cloneLiWidth,'left':-lastCloneWidth}).wrap(boxUl_wrap); box.css({'width':visWidth}); } //添加事件處理 var timer = null; var scrollTop = function(){ clearInterval(timer); timer = setInterval(function(){ var tmp = parseInt(boxUl.css('top').replace('px',"")); tmp--; boxUl.animate({'top':tmp},0,function(){ if(tmp <= -(LiHeight + lastCloneHeight)){ boxUl.css('top',-lastCloneHeight); } }); },opt.speed); }; var scrollDown = function(){ clearInterval(timer); timer = setInterval(function(){ var tmp = parseInt(boxUl.css('top').replace('px',"")); tmp++; boxUl.animate({'top':tmp},0,function(){ if(tmp >= 0){ boxUl.css('top',-(LiHeight)); } }); },opt.speed); }; var scrollLeft = function(){ clearInterval(timer); timer = setInterval(function(){ var tmp = parseInt(boxUl.css('left').replace('px',"")); tmp--; boxUl.animate({'left':tmp},0,function(){ if(tmp <= -(LiWidth + lastCloneWidth)){ boxUl.css('left',-(lastCloneWidth)); } }); },opt.speed); }; var scrollRight = function(){ clearInterval(timer); timer = setInterval(function(){ var tmp = parseInt(boxUl.css('left').replace('px',"")); tmp++; boxUl.animate({'left':tmp},0,function(){ if(tmp >= 0){ boxUl.css('left',-(LiWidth)); } }); },opt.speed); }; var scrollType = function(type,dir){ if(Lis.length >= opt.vis){ //顯示個數不能多於列表個數，否則不顯示效果 var sdir = typeof dir!=="undefined" ? dir : opt.dir; switch(type){ case "v": if(sdir == "prev"){scrollTop();}else{scrollDown();} break; case "h": if(sdir == "prev"){scrollLeft();}else{scrollRight();} } } }; if(opt.autoPlay){ scrollType(opt.type); } //添加事件處理 box.find('#ulWrap').hover(function(){ clearInterval(timer); },function(){ scrollType(opt.type); }); //按鈕是否隱藏 if(!opt.btnHidden){ btnPrev.unbind('mouseover'); btnNext.unbind('mouseover'); btnPrev.mouseover(function(){ scrollType(opt.type,"prev"); }); btnNext.mouseover(function(){ scrollType(opt.type,"next"); }); }else{ btnPrev.hide(); btnNext.hide(); } } </script> </body> </html>一些問題：
本地測試沒問題，但是 通過document.write()把代碼輸入執行後，垂直模式下的li的高度height()獲取會有問題。原因不明,非常不解..
以上所述就是本文的全部內容了，希望大家能夠喜歡。