Pure javascript achieves seamless scrolling of text in four directions
- 2020-06-15 07:46:10
- OfStack
Achieve the effect of seamless scrolling of 1 text:
<!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> Text scrolling </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> The car | movement B Level car down 3 wan 5 </li>
<li> household | Such a marvelous decoration Women really can't sit still </li>
<li> education | Before the provinces 3 Enter oneself for an examination Chinese labor is heavy award 10 Ten thousand yuan / people </li>
<li> The car | movement B Level car down 3 wan 5 Parallel import car markup 11 wan </li>
<li> health | Abuse of hormones has its consequences 14 Old boy 10 Age is short </li>
<li> digital | Latest mobile phone quotes What about the broadband fee reduction and speed increase? </li>
<li> The car | Parallel import car markup 11 wan </li>
<li> The car | movement B Level car down 3 wan 5</li>
<li> The car | Parallel import car markup 11 wan </li>
<li> movement | Evergrande Asian championship fight to the death Guess the score to win the authentic jersey </li>
</ul>
<a href="#" class="btnPrev"> To the left </a>
<a href="#" class="btnNext"> To the right </a>
</div>
<br>
<br>
<div id="textbox2" class="textbox">
<ul>
<li> The car | movement B Level car down 3 wan 5 </li>
<li> household | Such a marvelous decoration Women really can't sit still </li>
<li> education | Before the provinces 3 Enter oneself for an examination Chinese labor is heavy award 10 Ten thousand yuan / people </li>
<li> The car | movement B Level car down 3 wan 5 Parallel import car markup 11 wan </li>
<li> health | Abuse of hormones has its consequences 14 Old boy 10 Age is short </li>
<li> digital | Latest mobile phone quotes What about the broadband fee reduction and speed increase? </li>
<li> The car | Parallel import car markup 11 wan </li>
<li> The car | movement B Level car down 3 wan 5</li>
<li> The car | Parallel import car markup 11 wan </li>
<li> movement | Evergrande Asian championship fight to the death Guess the score to win the authentic jersey </li>
</ul>
<a href="#" class="btnPrev"> upward </a>
<a href="#" class="btnNext"> down </a>
</div>
<script type="text/javascript" src="script/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
//4 Directional seamless rolling
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; // No cloning li List of highly
var cloneLiHeight = 0; // Contains the cloning li List of highly
var LiWidth = 0; // No cloning li List the width
var cloneLiWidth = 0; // Contains the cloning li List the width
var Lis = boxUl.children();
var btnPrev = box.find('.btnPrev');
var btnNext = box.find('.btnNext');
// The default parameters
var defult= {
vis : 2, // According to the number of
autoPlay:true, // Automatically play
speed :50, // The scrolling speed
dir:'prev', // Rolling direction
btnHidden:false, // Is the button hidden
type:'v' // Horizontal or vertical
};
var opt = $.extend({},defult,options);
// build DOM structure
var lastClone=0; // Finally cloned element
var lastCloneHeight=0;// Finally, clone height
var allCloneHeight=0;//全部克隆元素总高度
var lastCloneWidth=0;
var allCloneWidth=0;
var visHeight=0; // Visual height
var visWidth=0;
var boxUl_wrap;
if(opt.type === "v"){ // The vertical direction
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"){ // The horizontal direction
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});
}
// Add event handling
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){ // The number of displays cannot exceed the number of lists, otherwise the effect will not be displayed
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);
}
// Add event handling
box.find('#ulWrap').hover(function(){
clearInterval(timer);
},function(){
scrollType(opt.type);
});
// Is the button hidden
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>
1 some � � :
The local version of document.write () is called, but the height of li () in vertical mode is called height(). The reason is unknown, very puzzled..
This is the end of this article, I hope you enjoy it.