Native javascript implementation of seamless scrolling example_javascript skills

Currently, vertical and horizontal scrolling are supported

http://lgyweb.com/marScroll/

Now let’s analyze the basic idea of ​​seamless implementation (vertical example):

HTML structure:

Copy code The code is as follows:

Copy code The code is as follows:

(1) First, you need to determine whether the content height ul structure inside is higher than the outer div# marScrolll, then seamless scrolling will be performed:

Copy code The code is as follows:

// Write In anonymous functions, prevent global variable pollution
(function(){
var target = document.getElementById('marScroll'),
oUl = target.getElementsByTagName('ul')[0];
// If the content is small, exit this function directly
if(oUl.offsetHeight})();

(2) Seamless means For infinite scrolling display of content, you first need to copy the content inside, and then use the outer scrollTop attribute to perform loop execution with the setInterval function

Copy code The code is as follows:

target.innerHTML = target.innerHTML;
/* When judging that the distance of each scroll is equal to the height of the first ul, set scrollTop to 0, and then Such a loop operation results in endless scrolling
--------------------------------------------- -------------------------------------------------- ----*/
// Extract the functional function for easy calling
var fn = function(){
if(target.scrollTop == oUl_h){
target.scrollTop = 0;
}else{
target.scrollTop;
}
}
// setInterval loop
var timer = setInterval(function(){
fn();
},30);

(3) When the mouse passes this content block, stop scrolling

Copy code The code is as follows:

// hover
target.onmouseover = function(){
clearTimeout(timer);
}
target.onmouseout = function(){
timer = setInterval(function(){
fn();
},30);
}

Example JS total code:

Copy code The code is as follows:

//Written in an anonymous function to prevent global variable pollution
(function(){
var target = document.getElementById('marScroll'),
oUl = target.getElementsByTagName('ul')[0],
oUl_h = oUl.offsetHeight;
// If the content is small, exit this function directly
if(oUl_h
target.innerHTML = target.innerHTML;

/* Determine the size of each scroll When the distance is equal to the height of the first ul, set scrollTop to 0, and then such a loop operation will scroll continuously
----------------------- -------------------------------------------------- --------------------*/
// Extract the function function to facilitate calling
var fn = function(){
if (target.scrollTop == oUl_h){
target.scrollTop = 0;
}else{
target.scrollTop;
}
}
// setInterval loop
var timer = setInterval(function(){
fn();
},30);
// hover
target.onmouseover = function(){
clearTimeout(timer);
}
target.onmouseout = function(){
timer = setInterval(function(){
fn();
},30);
}
})() ;

A simple vertical seamless function has been completed. In order to meet more needs, it is recommended to encapsulate it into a function that can be called vertically, horizontally, and multiple times.

The following is a personal encapsulation, online example:

http://lgyweb.com/marScroll/

Copy code The code is as follows:

function GyMarquee(opt){
this.opt = opt;
if(!document.getElementById(this.opt.targetID )) return;
this.target = document.getElementById(this.opt.targetID);
this.dir = this.opt.dir == 'crosswise'?'crosswise':'vertical';
this.effect = this.opt.effect == 'scroll'?'scroll':'marque';
this.scrollHeight = this.opt.scrollHeight;
this.init();
}
GyMarquee.prototype = {
marquee:function(){
var _that = this,
direction = 'scrollTop',
judge = this.target.scrollHeight,
timer = null;
if(this.dir == 'crosswise'){
direction = 'scrollLeft';
judge = this.itemLen*this.opt.itemWidth;
this.targetChild.style. width = this.itemLen*this.opt.itemWidth*2 'px';
}
var doFn = function(){
if(_that.target[direction] == judge){
_that.target[direction] = 0;
}
_that.target[direction] ;
}
timer = setInterval(function(){
doFn();
}, 38);
this.target.onmouseover = function(){
if(timer) clearTimeout(timer);
}
this.target.onmouseout = function(){
timer = setInterval(function(){
doFn();
},38);
}
},
scrollDo:function(){
var can = true,
_that = this;
this.target.onmouseover=function(){can=false};
this.target.onmouseout=function(){can=true};
new function (){
var stop=_that.target.scrollTop%_that.scrollHeight==0&&!can;
if(!stop)_that.target.scrollTop==parseInt(_that.target.scrollHeight/2)?_that.target.scrollTop =0:_that.target.scrollTop;
setTimeout(arguments.callee,_that.target.scrollTop%_that.scrollHeight?20:2500);
};
},
getByClassName:function( className,parent){
var elem = [],
node = parent != undefined&&parent.nodeType==1?parent.getElementsByTagName('*'):document.getElementsByTagName('*'),
p = new RegExp("(^|\s)" className "(\s|$)");
for(var n=0,i=node.length;n if(p.test(node[n].className)){
elem.push(node[n]);
}
}
return elem;
},
init:function(){
var val = 0;
if(this.dir =='crosswise'&&this.effect=='marque'&&this.opt.itemName!=''){
this .itemLen = this.target.getElementsByTagName(this.opt.itemName).length;
val = this.itemLen*this.opt.itemWidth;
}else{
val = this.target.scrollHeight;
}
var holderHTML = this.target.innerHTML;
this.target.innerHTML = '

' holderHTML '

';
this .targetChild = this.getByClassName('J_scrollInner',this.target)[0];
var attr = this.dir == 'vertical'?'offsetHeight':'offsetWidth';
if(val>this .target[attr]){
if(this.effect == 'scroll'){
this.scrollDo();
}else{
this.marquee();
}
this.targetChild.innerHTML = this.targetChild.innerHTML;
}
}
}

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn