純javascript實現(xiàn)四方向文本無縫滾動效果
更新時間：2015年06月16日 10:38:05 投稿：hebedich
本文主要給大家分享了使用純javascript實現(xiàn)的可控制的四方向文本無縫滾動的代碼，效果非常不錯，有需要的小伙伴可以參考下。
實現(xiàn)一個文本無縫滾動的效果：
<!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>數(shù)碼 | 最新手機報價 說好的寬帶降費提速呢？</li>
<li>汽車 | 平行進口車加價11萬</li>
<li>汽車 | 運動B級車降3萬5</li>
<li>汽車 | 平行進口車加價11萬</li>
<li>運動 | 恒大亞冠生死戰(zhàn) 猜比分贏正版球衣</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>數(shù)碼 | 最新手機報價 說好的寬帶降費提速呢？</li>
<li>汽車 | 平行進口車加價11萬</li>
<li>汽車 | 運動B級車降3萬5</li>
<li>汽車 | 平行進口車加價11萬</li>
<li>運動 | 恒大亞冠生死戰(zhàn) 猜比分贏正版球衣</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');
//默認參數(shù)
var defult= {
vis : 2, //顯示個數(shù)
autoPlay:true, //自動播放
speed :50, //滾動速度
dir:'prev', //滾動方向
btnHidden:false, //按鈕是否隱藏
type:'v' // 水平或者垂直方向
};
var opt = $.extend({},defult,options);
//構(gòu)建DOM結(jié)構(gòu)
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){ //顯示個數(shù)不能多于列表個數(shù)，否則不顯示效果
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()把代碼輸入執(zhí)行后，垂直模式下的li的高度height()獲取會有問題。原因不明,非常不解..
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。
相關(guān)文章
正如標題所言，js中||和&&的特性幫我們精簡了代碼的同時，也帶來了代碼可讀性的降低。這就需要我們自己來權(quán)衡了，下面有個不錯的示例2013-12-12
這篇文章主要介紹了使用electron制作滿屏心特效的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
原生js FileReader對象實現(xiàn)圖片上傳本地預(yù)覽效果
這篇文章主要介紹了原生js FileReader對象實現(xiàn)圖片上傳本地預(yù)覽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
利用JavaScript中的高階函數(shù)和閉包實現(xiàn)命令模式
命令模式提供了一種優(yōu)雅的解決方案，使得我們能夠靈活地封裝和管理代碼操作，所以本文將為大家介紹命令模式的概念、應(yīng)用場景以及在JavaScript中的實現(xiàn)方式，需要的可以參考一下2023-06-06
詳解微信小程序?qū)崿F(xiàn)仿微信聊天界面(各種細節(jié)處理)
這篇文章主要介紹了詳解微信小程序?qū)崿F(xiàn)仿微信聊天界面(各種細節(jié)處理)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
以前需要做一個數(shù)字輸入的InputBox,結(jié)果無奈需求太BT，搞得焦頭爛額，重做了無數(shù)次。無奈之下，再次Google，發(fā)現(xiàn)早有成熟的插件了(悶在家里造輪子果然不好啊)，autoNumeric使用方便，功能強大，現(xiàn)在介紹給大家，一個非常好的jquery plugin。2009-11-11
打開新窗口關(guān)閉當(dāng)前頁面不彈出關(guān)閉提示js代碼
打開新窗口關(guān)閉當(dāng)前頁面時總是彈出提示框，有沒有辦法避免它的彈出呢，答案是可以的接下來為大家分享一個方法可以解決此問題，感興趣的你可不要錯過了哈，希望可以幫助到你2013-03-03
Weex開發(fā)之WEEX-EROS開發(fā)踩坑(小結(jié))
這篇文章主要介紹了Weex開發(fā)之WEEX-EROS開發(fā)踩坑(小結(jié))，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
JavaScript實現(xiàn)節(jié)點的刪除與序號重建實例
這篇文章主要介紹了JavaScript實現(xiàn)節(jié)點的刪除與序號重建方法,涉及javascript針對頁面節(jié)點的刪除與遍歷技巧,非常具有實用價值,需要的朋友可以參考下2015-08-08
非常不錯的效果，模板畫筆，代碼相對較少2008-10-10