O que está apoiando atualmente é o rolamento vertical e horizontal
http://lgyweb.com/marscroll/
Agora analise as idéias básicas (exemplos verticais):
Estrutura HTML:
Copie o código do código da seguinte forma:
<div id = "marscroll">
<ul>
<li> 01 </li>
<li> 02 </li>
<li> 03 </li>
<li> 04 </li>
<li> 05 </li>
</ul>
</div>
CSS:
Copie o código do código da seguinte forma:
<Style type = "text/css">
ul, li {preenchimento: 0;
#Marscroll {altura: 60px;
#Marscroll li {altura: 20px;
</style>
(1) Antes de tudo, você precisa determinar se o conteúdo do conteúdo interno é maior que o Div#Marscrolll externo, então a fiação não é realizada:
Copie o código do código da seguinte forma:
// Escreva na função anônima para evitar a poluição da variável global
(Function () {)
var no destino = document.getElementById ('marscroll'),
Oul = Target.getElementsByTagName ('Ul') [0];
// O conteúdo é pequeno e depois saia desta função diretamente
if (ol.offsetHeight <Target.offSethEight) retornar;
}) ();
(2) A perfeição é a exibição infinita do conteúdo, portanto, você precisa copiar o conteúdo primeiro e depois usar a propriedade ScrollTop ++ da camada externa para usar a função setInterval
Copie o código do código da seguinte forma:
Target.innerhtml += Target.innerhtml;
/* Julgando que a distância entre cada rolamento é igual à altura do primeiro UL, defina o rolltop para 0 e, em seguida, essa operação de ciclo é a rolagem informada
--------------------------------------------------- ----------------------------------------*/
// retire a função da função, fácil de chamar
var fn = function () {
if (Target.Scrolltop == OL_H) {
Target.Scrolltop = 0;
} Outro {
Target.Scrolltop ++;
}
}
// LOOP SETInterval
var timer = setInterval (function () {)
fn ();
}, 30);
(3) Quando o mouse passa por esse conteúdo, ele para de rolar
Copie o código do código da seguinte forma:
// segurar
Target.onMouseOver = function () {
ClearTimeout (timer);
}
Target.onMouseOut = function () {
Timer = setInterval (function () {
fn ();
}, 30);
}
Exemplo JS Código Total:
Copie o código do código da seguinte forma:
// Escreva na função anônima para evitar a poluição da variável global
(Function () {)
var no destino = document.getElementById ('marscroll'),
Oul = Target.getElementsByTagName ('Ul') [0],
Oul_H = Oul.OffSethEight;
// O conteúdo é pequeno e depois saia desta função diretamente
if (out_h <Target.offsetHeight) retornar;
Target.innerhtml += Target.innerhtml;
/* Julgando que a distância entre cada rolamento é igual à altura do primeiro UL, defina o rolltop para 0 e, em seguida, essa operação de ciclo é a rolagem informada
--------------------------------------------------- ----------------------------------------*/
// retire a função da função, fácil de chamar
var fn = function () {
if (Target.Scrolltop == OL_H) {
Target.Scrolltop = 0;
} Outro {
Target.Scrolltop ++;
}
}
// LOOP SETInterval
var timer = setInterval (function () {)
fn ();
}, 30);
// segurar
Target.onMouseOver = function () {
ClearTimeout (timer);
}
Target.onMouseOut = function () {
Timer = setInterval (function () {
fn ();
}, 30);
}
}) ();
Um simples vertical e semestilidade foi concluído.
Aqui estão embalagens pessoais, exemplos online:
http://lgyweb.com/marscroll/
Copie o código do código da seguinte forma:
Função Gymarquee (Opt) {
this.opt = opt;
if (! document.getElementById (this.opt.targetId)) retornar;
this.target = document.getElementById (this.opt.targetId);
This.dir = this.opt.dir == 'transversal'?
this.effect = this.opt.effect == 'rolagem'?
this.ScrolHeight = this.opt.scrolHeight;
this.init ();
}
Gymarquee.prototype = {
Marquee: function () {
var _ que this, este,
Direção = 'scrolltop',
juiz = this.target.scrolHeight,
Timer = nulo;
if (this.dir == 'transversise') {{
Direção = 'rollleft';
juiz = this.iTemlen*this.opt.itemwidth;
This.targetChild.style.width = this.itemlen*this.opt.itemwidth*2 + 'px';
}
var dofn = function () {
if (_athat.target [direção] == juiz) {
_That.target [direção] = 0;
}
_That.target [direção] ++;
}
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 pode = true,
_ Que = this;
this.target.onMouseOver = function () {Can = false};
this.target.onMouseOut = function () {Can = true};
new function () {
var stop = _that.target.scroltop%_that.scrolHeight == 0 &&!
if (! STOP) _THAT.TARGET.SCROLTOP == parseint (_That.Target.ScrolHeight/2)?
setTimeout (argumentos.callee, _that.target.scroltop%
};
},
getByClassName: function (className, pai) {
var elem = [],
Node = Pai!
p = novo regexp ("(^| // s)"+className+"(// s | $)");
for (var n = 0, i = node.length; n <i; n ++) {
if (p.test (nó [n] .className)) {{
elem.push (nó [n]);
}
}
Retornar elem;
},
init: function () {
Valor var = 0;
if (this.dir == 'crosswise' && this.effect == 'marque' && ipt.itemname! = '') {
this.iTemlen = this.target.getElementsByTagName (this.opt.itemname) .length;
valor = this.iTemlen*this.opt.itemwidth;
} Outro {
valor = this.target.scrolHeight;
}
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 [att]) {{
if (this.effect == 'scroll') {{
this.Scrolldo ();
} Outro {
this.Marquee ();
}
this.targetchild.innerhtml += this.targetchild.innerhtml;
}
}
}