То, что в настоящее время поддерживает, является вертикальным и горизонтальным прокатом
http://lgyweb.com/marscroll/
Теперь проанализируйте основные идеи (вертикальные примеры):
Структура HTML:
Код кода копирования следующим образом:
<div id = "marscroll">
<ul>
<li> 01 </li>
<li> 02 </li>
<li> 03 </li>
<li> 04 </li>
<li> 05 </li>
</ul>
</div>
CSS:
Код кода копирования следующим образом:
<Стиль типа = "text/css">
ul, li {padding: 0;
#Marscroll {высота: 60px;
#Marscroll li {высота: 20px;
</style>
(1) Во -первых, вам необходимо определить, выше ли содержание внутри внутреннего, чем внешнее Div#marscrolll, тогда вращение не выполняется:
Код кода копирования следующим образом:
// записать в анонимной функции для предотвращения глобального загрязнения переменной
(Function () {)
var target = document.getElementbyId ('marscroll'),
Oul = target.getelementsbytagname ('ul') [0];
// Содержимое небольшое, а затем выйдите напрямую.
if (oul.offsetheight <target.offsetheight) возврат;
}) ();
(2) Беспланочность - это бесконечный каллинг -дисплей контента, поэтому вам нужно сначала скопировать контент внутри, а затем использовать свойство Scrolltop ++ внешнего уровня, чтобы использовать функцию SetInterval
Код кода копирования следующим образом:
target.innerhtml += target.innerhtml;
/* Судя по тому, что расстояние между каждым прокатом равно высоте первого UL, установите Scrolltop на 0, а затем такая операция цикла является информированной прокруткой
-------------------------------------------------- ----------------------------------------*/
// Вытащить функцию функции, легко вызывать
var fn = function () {
if (target.scrolltop == ol_h) {
target.scrolltop = 0;
} Еще {
target.scrolltop ++;
}
}
// SetInterval Loop
var timer = setInterval (function () {)
fn ();
}, 30);
(3) Когда мышь проходит через этот контент, она перестает катиться
Код кода копирования следующим образом:
// держать
target.onmouseover = function () {
ClearTimeout (таймер);
}
target.onmouseout = function () {
Timer = setInterval (function () {
fn ();
}, 30);
}
Пример JS Общий код:
Код кода копирования следующим образом:
// записать в анонимной функции для предотвращения глобального загрязнения переменной
(Function () {)
var target = document.getElementbyId ('marscroll'),
Oul = target.getelementsbytagname ('ul') [0],
OUL_H = OUL.OFFSETHEITH;
// Содержимое небольшое, а затем выйдите напрямую.
if (out_h <target.offsetheight) return;
target.innerhtml += target.innerhtml;
/* Судя по тому, что расстояние между каждым прокатом равно высоте первого UL, установите ScrollTop на 0, а затем такая операция цикла является информированной прокруткой
-------------------------------------------------- ----------------------------------------*/
// Вытащить функцию функции, легко вызывать
var fn = function () {
if (target.scrolltop == ol_h) {
target.scrolltop = 0;
} Еще {
target.scrolltop ++;
}
}
// SetInterval Loop
var timer = setInterval (function () {)
fn ();
}, 30);
// держать
target.onmouseover = function () {
ClearTimeout (таймер);
}
target.onmouseout = function () {
Timer = setInterval (function () {
fn ();
}, 30);
}
}) ();
Простая вертикальная и беспрепятственная была завершена.
Вот личная упаковка, онлайн -примеры:
http://lgyweb.com/marscroll/
Код кода копирования следующим образом:
Функция 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.scrollheight = this.opt.scrollheight;
this.init ();
}
Gymarquee.prototype = {
Marquee: function () {
var _that = это,
Направление = 'Scrolltop',
судья = this.target.scrollheight,
Timer = null;
if (this.dir == 'crosswise') {{
Направление = 'Scrollleft';
судья = this.itemlen*this.opt.itemwidth;
This.targetchild.style.width = this.itemlen*this.opt.itemwidth*2 + 'px';
}
var dofn = function () {
if (_that.target [направление] == судья) {
_That.Target [направление] = 0;
}
_That.Target [Direction] ++;
}
Timer = setInterval (function () {
dofn ();
}, 38);
this.target.onmouseover = function () {
if (time) cleartimeout (таймер);
}
this.target.onmouseout = function () {
Timer = setInterval (function () {
dofn ();
}, 38);
}
},
scrolldo: function () {
var может = true,
_That = это;
this.target.onmouseover = function () {can = false};
this.target.onmouseout = function () {can = true};
новая функция () {
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 | $)");
for (var n = 0, i = node.length; n <i; n ++) {
if (p.test (node [n] .classname)) {{{
elem.push (узел [n]);
}
}
Вернуть Элем;
},
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;
} Еще {
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'?
if (value> this.target [attr]) {{
if (this.effect == 'scroll') {{
this.scrolldo ();
} Еще {
this.marquee ();
}
this.targetchild.innerhtml += this.targetchild.innerhtml;
}
}
}