纯javascript实现四方向文本无缝滚动效果

时间：2021-05-18

实现一个文本无缝滚动的效果：

<!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()獲取會有問題。原因不明,非常不解..

以上所述就是本文的全部内容了，希望大家能够喜欢。

纯javascript实现四方向文本无缝滚动效果

相关文章

div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox

javascript单张多张图无缝滚动实例代码

JavaScript 无缝上下左右滚动加定高定宽停顿效果(兼容ie/ff)

jquery简单实现纵向的无缝滚动代码实例

js实现可控制左右方向的无缝滚动效果