純javascript實現四方向文本無縫滾動效果

最後更新：2017-02-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

　　本文主要給大家分享了使用純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>      <html lang="zh-CN">  <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()獲取會有問題。原因不明,非常不解..

　　以上所述就是本文的全部內容了，希望大家能夠喜歡。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More