Was derzeit unterstützt wird, ist vertikal und horizontal rollen
http://lgyweb.com/marscroll/
Analysieren Sie nun die grundlegenden Ideen (vertikale Beispiele):
HTML -Struktur:
Kopieren Sie den Code -Code wie folgt:
<div id = "marscroll">
<ul>
<li> 01 </li>
<li> 02 </li>
<li> 03 </li>
<li> 04 </li>
<li> 05 </li>
</ul>
</div>
CSS:
Kopieren Sie den Code -Code wie folgt:
<Style type = "text/css">
ul, li {padding: 0;
#Marscroll {Höhe: 60px;
#Marscroll li {Höhe: 20px;
</style>
(1) Zunächst müssen Sie feststellen, ob der Inhalt des Inhalts im Inhalt höher ist als der äußere Div#Marscrolll, dann wird das Spinnen nicht durchgeführt:
Kopieren Sie den Code -Code wie folgt:
// in anonyme Funktion schreiben, um die globale variable Verschmutzung zu verhindern
(Function () {)
var target = document.getElementById ('marscroll'),
Oul = target.getElementsByTagName ('ul') [0];
// Der Inhalt ist klein und beenden Sie diese Funktion direkt an
if (Oul.offseteight <target.offseteight) return;
}) ();
(2) Die Nahtlosigkeit ist die unendliche Rolling -Anzeige des Inhalts. Sie müssen daher zuerst den Inhalt kopieren und dann die Eigenschaft Scrolltop ++ der Außenschicht verwenden, um die SetInterval -Funktion zu verwenden
Kopieren Sie den Code -Code wie folgt:
target.innerHtml += target.innerhtml;
/* Urteilen, dass der Abstand zwischen den einzelnen Rollen der Höhe der ersten UL entspricht. Stellen Sie den Scrolltop auf 0 ein, und dann ist ein solcher Zyklusbetrieb das informierte Scrollen
---------------------------------------------- ----------------------------------------*/
// Zieh die Funktionsfunktion, einfach zu rufen
var fn = function () {
if (target.scrolltop == ol_h) {
target.scrolltop = 0;
} Anders {
target.Scrolltop ++;
}
}
// setInterval Loop
var timer = setInterval (function () {)
fn ();
}, 30);
(3) Wenn die Maus diesen Inhalt durchquert
Kopieren Sie den Code -Code wie folgt:
// halten
target.onmouseover = function () {
Clearimeout (Timer);
}
target.onmouseout = function () {
Timer = setInterval (function () {
fn ();
}, 30);
}
Beispiel JS Total Code:
Kopieren Sie den Code -Code wie folgt:
// in anonyme Funktion schreiben, um die globale variable Verschmutzung zu verhindern
(Function () {)
var target = document.getElementById ('marscroll'),
Oul = target.getElementsByTagName ('ul') [0],
Oul_h = Oul.offseteight;
// Der Inhalt ist klein und beenden Sie diese Funktion direkt an
if (out_h <target.offseteight) return;
target.innerHtml += target.innerhtml;
/* Urteilen, dass der Abstand zwischen den einzelnen Rollen der Höhe der ersten UL entspricht. Stellen Sie den Scrolltop auf 0 ein, und dann ist ein solcher Zyklusbetrieb das informierte Scrollen
---------------------------------------------- ----------------------------------------*/
// Zieh die Funktionsfunktion, einfach zu rufen
var fn = function () {
if (target.scrolltop == ol_h) {
target.scrolltop = 0;
} Anders {
target.Scrolltop ++;
}
}
// setInterval Loop
var timer = setInterval (function () {)
fn ();
}, 30);
// halten
target.onmouseover = function () {
Clearimeout (Timer);
}
target.onmouseout = function () {
Timer = setInterval (function () {
fn ();
}, 30);
}
}) ();
Ein einfacher vertikaler und nahtloses Nahtlosigkeit, um mehr Anforderungen zu erfüllen, wird empfohlen, in Funktionen, vertikale, horizontale und mehrere Anrufe in Einklang zu kommen.
Hier finden Sie persönliche Verpackungen, Online -Beispiele:
http://lgyweb.com/marscroll/
Kopieren Sie den Code -Code wie folgt:
Funktion 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'?
this.effect = this.opt.effect == 'Scroll'?
this.scrollHeight = this.opt.ScrollHeight;
this.init ();
}
Gymarquee.Prototype = {
Festzelt: function () {
var _that = this,,
Regie = 'Scrolltop',
Richter = this.target.scrollHeight,
Timer = null;
if (this.dir == 'crosswise') {{{{{{{{{{{{{{{{{{{{
Regie = 'scrollleft';
Richter = this.Itemlen*this.opt.Itemwidth;
This.targetChild.style.width = this.itemlen*this.opt.Itemwidth*2 + 'px';
}
var dofn = function () {
if (_that.target [Richtung] == Richter) {
_That.target [Richtung] = 0;
}
_That.target [Richtung] ++;
}
Timer = setInterval (function () {
dofn ();
}, 38);
this.target.onmouseover = function () {
if (Zeit) Clearimeout (Timer);
}
this.target.onmouseout = function () {
Timer = setInterval (function () {
dofn ();
}, 38);
}
},
scroldo: function () {
var kann = wahr,
_That = this;
this.target.onmouseover = function () {Can = false};
this.target.onmouseout = function () {Can = true};
neue Funktion () {
var stop = _that.target
if (! stop) _that.target.scroltop == parseInt (_that.target.scrollHeight/2)?
setTimeout (Argumente.Callee, _that.target.scroltop%
};
},
getbyClassName: function (className, übergeordnet) {
var elem = [],
Node = parent!
p = neuer regexp ("(^| // s)"+className+"(// s | $)");
für (var n = 0, i = node.length; n <i; n ++) {
if (p.Test (Knoten [n] .ClassName)) {{{{{{{{{
Elem.push (Knoten [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;
} Anders {
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 == 'vertikal'?
if (value> this.target [attr]) {{{{{{{{{{{{{{{{{{{{
if (this.effect == 'scroll') {{{{{{{{{{{{{{{{
this.scrolldo ();
} Anders {
this.marquee ();
}
this.targetChild.innerhtml += this.targetChild.innerhtml;
}
}
}