Lo que actualmente es compatible es una rodadura vertical y horizontal
http://lgyweb.com/marscroll/
Ahora analice las ideas básicas (ejemplos verticales):
Estructura HTML:
Copiar código del código de la siguiente manera:
<div id = "Marscroll">
<ul>
<li> 01 </li>
<li> 02 </li>
<li> 03 </li>
<li> 04 </li>
<li> 05 </li>
</ul>
</div>
CSS:
Copiar código del código de la siguiente manera:
<Style type = "text/css">
UL, li {relleno: 0;
#Marscroll {altura: 60px;
#Marscroll li {altura: 20px;
</style>
(1) En primer lugar, debe determinar si el contenido del contenido en el interior es más alto que el Div#marscrolll externo, entonces el giro no se realiza:
Copiar código del código de la siguiente manera:
// Escribir en función anónima para evitar la contaminación variable global
(Función () {)
var Target = document.getElementById ('Marscroll'),
OUl = Target.getElementsByTagName ('ul') [0];
// El contenido es pequeño, luego salga de esta función directamente
if (oUl.Offsetheight <Target.Offsetheight) return;
}) ();
(2) La perfección es la visualización infinita del contenido, por lo que debe copiar el contenido dentro primero, y luego usar la propiedad ScrollTop ++ de la capa externa para usar la función SetInterval
Copiar código del código de la siguiente manera:
Target.innerhtml += target.innerhtml;
/* Juzgando que la distancia entre cada rodamiento es igual a la altura del primer UL, establece el scrolltop en 0, y luego dicha operación de ciclo es el desplazamiento informado
-------------------------------------------------- ----------------------------------------*/
// extraer la función de función, fácil de llamar
var fn = function () {
if (target.scrolltop == ol_h) {
Target.scrollTop = 0;
} Demás {
Target.ScrollTop ++;
}
}
// SetInterval Loop
VAR TIMER = SetInterval (function () {)
fn ();
}, 30);
(3) Cuando el mouse pasa a través de este contenido, deja de rodar
Copiar código del código de la siguiente manera:
// sostener
Target.OnMouseOver = function () {
ClearTimeOut (temporizador);
}
Target.OnMouseOut = function () {
Timer = setInterval (function () {
fn ();
}, 30);
}
Ejemplo JS Código total:
Copiar código del código de la siguiente manera:
// Escribir en función anónima para evitar la contaminación variable global
(Función () {)
var Target = document.getElementById ('Marscroll'),
Oul = Target.getElementsBytagName ('ul') [0],
Oul_h = oUl.offsetheight;
// El contenido es pequeño, luego salga de esta función directamente
if (out_h <target.offsetheight) return;
Target.innerhtml += target.innerhtml;
/* Juzgando que la distancia entre cada rodamiento es igual a la altura del primer UL, establece el scrolltop en 0, y luego dicha operación de ciclo es el desplazamiento informado
-------------------------------------------------- ----------------------------------------*/
// extraer la función de función, fácil de llamar
var fn = function () {
if (target.scrolltop == ol_h) {
Target.scrollTop = 0;
} Demás {
Target.ScrollTop ++;
}
}
// SetInterval Loop
VAR TIMER = SetInterval (function () {)
fn ();
}, 30);
// sostener
Target.OnMouseOver = function () {
ClearTimeOut (temporizador);
}
Target.OnMouseOut = function () {
Timer = setInterval (function () {
fn ();
}, 30);
}
}) ();
Se ha completado una simple vertical y la costumbre.
Aquí hay envases personales, ejemplos en línea:
http://lgyweb.com/marscroll/
Copiar código del código de la siguiente manera:
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 == 'cruzado'?
this.Effect = this.opt.effect == 'Scroll'?
this.scrollheight = this.opt.scrollheight;
this.init ();
}
Gymarquee.prototype = {
Marquesina: function () {
var _THAT = esto,
Dirección = 'scrolltop',
Juez = this.target.scrollheight,
Temporizador = nulo;
if (this.dir == 'cruzado') {{
Dirección = 'scrollleft';
juzgar = this.itemlen*this.opt.ItemWidth;
This.targetchild.style.width = this.itemlen*this.opt.ItemWidth*2 + 'px';
}
var dofn = function () {
if (_that.target [dirección] == Juez) {
_That.target [dirección] = 0;
}
_That.target [dirección] ++;
}
Timer = setInterval (function () {
dofn ();
}, 38);
this.target.onmouseover = function () {
if (Time) ClearTimeOut (temporizador);
}
this.target.onmouseout = function () {
Timer = setInterval (function () {
dofn ();
}, 38);
}
},
scroldo: function () {
var puede = verdadero,
_That = this;
this.target.onmouseover = function () {can = false};
this.target.onmouseOut = function () {can = true};
nueva función () {
var stop = _that.target.scroltop%_that.scrollheight == 0 &&!
if (! stop) _that.target.scroltop == parseint (_that.target.scrollheight/2)?
setTimeout (argumentos.callee, _that.target.scroltop%
};
},
getByClassName: function (classname, parent) {
var elem = [],
Nodo = parent!
p = nuevo regexp ("(^| // s)"+classname+"(// s | $)");
para (var n = 0, i = node.length; n <i; n ++) {
if (p.test (nodo [n] .classname)) {{
elem.push (nodo [n]);
}
}
Regresar elem;
},
init: function () {
valor var = 0;
if (this.dir == 'cruzado' && this.effect == 'marque' && ipt.itemname! = '') {
this.ItemLen = this.target.getElementsBytagName (this.opt.Itemname) .length;
valor = this.itemlen*this.opt.ItemWidth;
} Demás {
valor = 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 (valor> this.target [attr]) {{
if (this.effect == 'Scroll') {{
this.scroldo ();
} Demás {
this.Marquee ();
}
this.targetchild.innerhtml += this.targetchild.innerhtml;
}
}
}