Ce qui soutient actuellement est le roulement vertical et horizontal
http://lgyweb.com/marscroll/
Analysez maintenant les idées de base (exemples verticaux):
Structure HTML:
Copier le code du code comme suit:
<div id = "Marscroll">
<ul>
<li> 01 </li>
<li> 02 </li>
<li> 03 </li>
<li> 04 </li>
<li> 05 </li>
</ul>
</div>
CSS:
Copier le code du code comme suit:
<Style type = "text / css">
ul, li {rembourrage: 0;
#Marscroll {hauteur: 60px;
#Marscroll Li {hauteur: 20px;
</ style>
(1) Tout d'abord, vous devez déterminer si le contenu du contenu à l'intérieur est plus élevé que le div # extérieur Marscroll, puis le filage n'est pas effectué:
Copier le code du code comme suit:
// Écrivez dans une fonction anonyme pour éviter une pollution variable globale
(Fonction () {)
var cible = document.getElementById ('Marscroll'),
Oul = Target.getElementsByTagName ('ul') [0];
// Le contenu est petit, puis quittez cette fonction directement
if (oul.offsetheight <cible.offsetheight) retour;
}) ();
(2) L'absence de couture est l'affichage roulant infini du contenu, vous devez donc copier le contenu à l'intérieur d'abord, puis utiliser la propriété ScrollTop ++ de la couche externe pour utiliser la fonction SetInterval
Copier le code du code comme suit:
Target.InnerHtml + = Target.InnerHtml;
/ * À juger que la distance entre chaque roulement est égale à la hauteur du premier UL, définissez le défilement sur 0, puis une telle opération de cycle est le défilement éclairé
------------------------------------------------ - - ---------------------------------------- * /
// Sortez la fonction de fonction, facile à appeler
var fn = fonction () {
if (target.scrolltop == ol_h) {
Target.scrollTop = 0;
} Autre {
Target.ScrollTop ++;
}
}
// SetInterval Loop
var timer = setInterval (function () {)
fn ();
}, 30);
(3) Lorsque la souris passe par ce contenu, il cesse de rouler
Copier le code du code comme suit:
// prise
Target.onMouseOver = function () {
ClearTimeout (temporisateur);
}
Target.onMouseout = function () {
Timer = setInterval (function () {
fn ();
}, 30);
}
Exemple JS Code total:
Copier le code du code comme suit:
// Écrivez dans une fonction anonyme pour éviter une pollution variable globale
(Fonction () {)
var cible = document.getElementById ('Marscroll'),
Oul = target.getElementsByTagName ('ul') [0],
Oul_h = oul.offsetheight;
// Le contenu est petit, puis quittez cette fonction directement
if (out_h <cible.offsetheight) return;
Target.InnerHtml + = Target.InnerHtml;
/ * À juger que la distance entre chaque roulement est égale à la hauteur du premier UL, définissez le défilement sur 0, puis une telle opération de cycle est le défilement éclairé
------------------------------------------------ - - ---------------------------------------- * /
// Sortez la fonction de fonction, facile à appeler
var fn = fonction () {
if (target.scrolltop == ol_h) {
Target.scrollTop = 0;
} Autre {
Target.ScrollTop ++;
}
}
// SetInterval Loop
var timer = setInterval (function () {)
fn ();
}, 30);
// prise
Target.onMouseOver = function () {
ClearTimeout (temporisateur);
}
Target.onMouseout = function () {
Timer = setInterval (function () {
fn ();
}, 30);
}
}) ();
Une simple verticale et sans couture a été achevée.
Voici des emballages personnels, des exemples en ligne:
http://lgyweb.com/marscroll/
Copier le code du code comme suit:
Fonction 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.effected == 'Scroll'?
this.scrollHeight = this.opt.scrollHeight;
this.init ();
}
Gymarquee.prototype = {
Marquee: fonction () {
var _That = ceci,
Direction = 'scrolltop',
juge = this.target.scrollheight,
Minuterie = null;
if (this.dir == 'crosswise') {{{
Direction = 'Scrollleft';
juge = this.itemlen * this.opt.itemwidth;
This.targetchild.style.width = this.itemlen * this.opt.itemwidth * 2 + 'px';
}
var dofn = fonction () {
if (_That.target [direction] == juge) {
_That.target [Direction] = 0;
}
_That.target [Direction] ++;
}
Timer = setInterval (function () {
Dofn ();
}, 38);
this.target.onmouseOver = function () {
if (time) ClearTimeout (temporisateur);
}
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};
nouvelle fonction () {
var stop = _That.target.scroltop% _That.scrollHeight == 0 &&!
if (! stop) _That.target.scroltop == parseInt (_That.target.scrollHeight / 2)?
setTimeout (arguments.callee, _that.target.scroltop%
};
},
getByClassName: function (className, parent) {
var elem = [],
Node = parent!
p = new regexp ("(^ | // s)" + classname + "(// s | $)");
pour (var n = 0, i = node.length; n <i; n ++) {
if (p.test (node [n] .classname)) {{
elem.push (nœud [n]);
}
}
Retour elem;
},
init: function () {
Var valeur = 0;
if (this.dir == 'crosswise' && this.effected == 'marque' && ipt.itemname! = '') {
this.itemlen = this.target.getElementsByTagName (this.opt.itemname) .length;
valeur = this.itemlen * this.opt.itemwidth;
} Autre {
valeur = this.target.scrollHeight;
}
var holderhtml = this.target.innerhtml;
this.target.innerhtml = '<div>' + holderhtml + '</div>';
this.targetchild = this.getByClassName ('j_scrollinner', this.target) [0];
var att = this.dir == 'vertical'?
if (value> this.target [att]) {{{
if (this.effect == 'scroll') {{{
this.scrollo ();
} Autre {
this.marquee ();
}
this.targetchild.innerhtml + = this.targetchild.innerhtml;
}
}
}