What is currently supporting is vertical and horizontal rolling
http://lgyweb.com/marscroll/
Now analyze the basic ideas (vertical examples):
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, you need to determine whether the content of the content inside is higher than the outer DIV#Marscrolll, then the spinning is not performed:
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];
// The content is small, then exit this function directly
if (OUL.OffSetheight <Target.Offsetheight) Return;
}) ();
(2) The seamlessness is the infinite rolling display of the content, so you need to copy the content inside first, and then use the SCROLLTOP ++ property of the outer layer to use the SetInterval function
Copy code code as follows:
target.innerhtml += target.innerhtml;
/* Judging that the distance between each rolling is equal to the height of the first UL, set the scrollTop to 0, and then such a cycle operation is the informed scrolling
------------------------------------------------ ------------------------------------------*/
// Pull out the function function, easy to call
var fn = function () {
if (target.scrolltop == ol_h) {
target.scrolltop = 0;
} Else {
target.scrolltop ++;
}
}
// SetInterval loop
var timer = setInterval (function () {)
fn ();
}, 30);
(3) When the mouse passes through this content, it stops rolling
Copy code code as follows:
// hold
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.GetelementByid ('Marscroll'),
OUL = TARGET.GetelementsBytagname ('Ul') [0],
OUL_H = OUL.OffSetheight;
// The content is small, then exit this function directly
if (out_h <target.Offsetheight) Return;
target.innerhtml += target.innerhtml;
/* Judging that the distance between each rolling is equal to the height of the first UL, set the scrollTop to 0, and then such a cycle operation is the informed scrolling
------------------------------------------------ ------------------------------------------*/
// Pull out the function function, easy to call
var fn = function () {
if (target.scrolltop == ol_h) {
target.scrolltop = 0;
} Else {
target.scrolltop ++;
}
}
// SetInterval loop
var timer = setInterval (function () {)
fn ();
}, 30);
// hold
target.onMouseover = Function () {
CleartimeOut (Timer);
}
target.onMouSeout = Function () {
Timer = SetInterval (function () {
fn ();
}, 30);
}
}) ();
A simple vertical and seamlessness has been completed. In order to meet more needs, it is recommended to be encapsulated into functions, vertical, horizontal, and multiple calls.
Here are personal packaging, online examples:
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': 'marquence';
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 (time) 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.scroltop%_That.scrollheight == 0 &&! Can;
if (! Stop) _That.target.scroltop == PARSEINT (_That.target.scrollHeight/2)?
settimeout (arguments.callee, _That.target.scroltop%
};
},
getbyClassName: Function (ClassName, Parent) {
var eLEM = [],
Node = Parent! = Undefined && Parent.nodeType == 1? Parent.Getelements Bytagname ('*'): 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 value = 0;
if (this.dir == 'crosswise' && this.effect == 'marque' &&IPT.Itemname! = '') {
this.itemlen = this.Target.GetelementsBytagname (this.opt.itemname) .Length;
value = this.itemlen*this.opt.itemwidth;
} Else {
value = this.target.scrollheight;
}
var Holderhtml = this.Target.innerHtml;
this.Target.innerhtml = '<div>'+Holderhtml+'</Div>';
this.TargetChild = this.getByClassName ('j_Scrollinner', this.Target) [0];
var attr = this.dir == 'vertical'? 'Offsetheight': 'OffsetWidth';
if (value> this.target [attr]) {{
if (this.effect == 'scroll') {{
this.scrolldo ();
} Else {
this.marquee ();
}
this.TargetChild.innerHtml += this.TargetChild.innerHtml;
}
}
}