Native JavaScript implements seamless seam scrolling example _javascript tips

Vertical and horizontal scrolling is currently supported

http://lgyweb.com/marScroll/

Now analyze the basic idea of seamless seam implementation (vertical example):

HTML structure:

Copy Code code as follows:

<div id= "Marscroll" >
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
</ul>
</div>

Css:

Copy Code code as follows:

<style type= "Text/css" >
ul,li{padding:0;margin:0;}
#marScroll {Height:60px;overflow:hidden;}
#marScroll li{height:20px;line-height:20px;font-size:14px;}
</style>

(1) First of all need to determine whether the contents of the high UL structure is higher than the outer div#marscrolll, then seamless seam rolling:

Copy Code code as follows:

Write in anonymous function to prevent global variable pollution
(function () {
var target = document.getElementById (' Marscroll '),
Oul = Target.getelementsbytagname (' ul ') [0];
Less content, exit this function directly
if (oul.offsetheight<target.offsetheight) return;
})();

(2) Seamless seam is the content of the infinite scrolling display, then need to replicate the contents, and then through the outer scrolltop++ properties, using the SetInterval function for loop execution

Copy Code code as follows:

target.innerhtml + = target.innerhtml;
/* Judge each scrolling distance equal to the first UL height, set scrolltop to 0, and then the loop operation is seamless scrolling
---------------------------------------------------------------------------------------------*/
Pull out the function function to make it easy to call
var fn = function () {
if (target.scrolltop = = Oul_h) {
target.scrolltop = 0;
}else{
target.scrolltop++;
}
}
SetInterval Cycle
var timer = setinterval (function () {
FN ();
},30);

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

Copy Code code as follows:

Hover
Target.onmouseover = function () {
Cleartimeout (timer);
}
Target.onmouseout = function () {
Timer = setinterval (function () {
FN ();
},30);
}

Example JS Total code:

Copy code code as follows:

//write in anonymous function to prevent global variable pollution
(function () {
var target = Document.getelementb Yid (' Marscroll '),
Oul = Target.getelementsbytagname (' ul ') [0],
Oul_h = oul.offsetheight;
//less content, exit this function directly
if (oul_h<target.offsetheight) return;

Target.innerhtml + = target.innerhtml;

/* To determine that each scrolling distance equals the height of the first UL, set ScrollTop to 0, and then the loop operation is seamless scrolling
--------------------------------------------- ------------------------------------------------*//
//Pull out function function to make it easy to invoke
var fn = function () {
if (target.scro Lltop = = 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);
}
}) ();

has completed a simple vertical seamless seam, in order to meet more requirements, proposed encapsulation into a can, vertical, horizontal, multiple calls function.

The following is a personal package, an online example:

http://lgyweb.com/marScroll/

Copy Code code 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<i;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 = ' <div class= ' j_scrollinner ' > ' +holderhtml+ ' </div> ';
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;
}
}
}