Apa yang saat ini mendukung adalah vertikal dan horizontal bergulir
http://lgyweb.com/marscroll/
Sekarang analisis ide -ide dasar (contoh vertikal):
Struktur HTML:
Salin kode kode sebagai berikut:
<div id = "marscroll">
<ul>
<li> 01 </li>
<li> 02 </li>
<li> 03 </li>
<li> 04 </li>
<li> 05 </li>
</ul>
</div>
CSS:
Salin kode kode sebagai berikut:
<Type style = "text/css">
ul, li {padding: 0;
#Marscroll {height: 60px;
#Marscroll li {height: 20px;
</tyle>
(1) Pertama -tama, Anda perlu menentukan apakah konten konten di dalam lebih tinggi dari div luar#marscrolll, maka pemintalan tidak dilakukan:
Salin kode kode sebagai berikut:
// Tulis dalam fungsi anonim untuk mencegah polusi variabel global
(Fungsi () {)
var target = document.geteLementById ('marscroll'),
Oul = target.getElementsbyTagname ('ul') [0];
// Kontennya kecil, lalu keluar dari fungsi ini secara langsung
if (oul.offsetHeight <target.offsetheight) kembali;
}) ();
(2) Tanpa batas adalah tampilan rolling tak terbatas dari konten, jadi Anda perlu menyalin konten di dalam terlebih dahulu, dan kemudian menggunakan properti Scrolltop ++ dari lapisan luar untuk menggunakan fungsi setInterval
Salin kode kode sebagai berikut:
target.innerHtml += target.innerHtml;
/* Menilai bahwa jarak antara setiap gulungan sama dengan ketinggian UL pertama, atur scrolltop ke 0, dan kemudian operasi siklus seperti itu adalah pengguliran yang diinformasikan
-------------------------------------------------- ----------------------------------------*//
// Tarik fungsi fungsi, mudah dihubungi
var fn = function () {
if (target.scrolltop == ol_h) {
target.scrolltop = 0;
} Kalau tidak {
target.scrolltop ++;
}
}
// setInterval loop
var timer = setInterval (function () {)
fn ();
}, 30);
(3) Saat mouse melewati konten ini, ia berhenti bergulir
Salin kode kode sebagai berikut:
// memegang
target.onmouseOver = function () {
ClearTimeout (timer);
}
target.onmouseout = function () {
Timer = setInterval (function () {
fn ();
}, 30);
}
Contoh Kode Total JS:
Salin kode kode sebagai berikut:
// Tulis dalam fungsi anonim untuk mencegah polusi variabel global
(Fungsi () {)
var target = document.geteLementById ('marscroll'),
Oul = target.getElementsbyTagname ('ul') [0],
Oul_h = oul.offsetHeight;
// Kontennya kecil, lalu keluar dari fungsi ini secara langsung
if (out_h <target.offsetHeight) kembali;
target.innerHtml += target.innerHtml;
/* Menilai bahwa jarak antara setiap gulungan sama dengan ketinggian UL pertama, atur scrolltop ke 0, dan kemudian operasi siklus seperti itu adalah pengguliran yang diinformasikan
-------------------------------------------------- ----------------------------------------*//
// Tarik fungsi fungsi, mudah dihubungi
var fn = function () {
if (target.scrolltop == ol_h) {
target.scrolltop = 0;
} Kalau tidak {
target.scrolltop ++;
}
}
// setInterval loop
var timer = setInterval (function () {)
fn ();
}, 30);
// memegang
target.onmouseOver = function () {
ClearTimeout (timer);
}
target.onmouseout = function () {
Timer = setInterval (function () {
fn ();
}, 30);
}
}) ();
Vertikal dan mulus telah selesai.
Berikut adalah kemasan pribadi, contoh online:
http://lgyweb.com/marscroll/
Salin kode kode sebagai berikut:
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 == 'crosswise'?
this.effect = this.opt.effect == 'gulir'?
this.scrollheight = this.opt.scrollheight;
this.init ();
}
Gymarquee.prototype = {
Marquee: function () {
var _that = ini,
Arah = 'scrolltop',
Hakim = this.target.scrollHeight,
Timer = null;
if (this.dir == 'crosswise') {{
Arah = 'scrollleft';
juri = this.itemlen*this.opt.itemwidth;
This.targetchild.style.width = this.itemlen*this.opt.itemwidth*2 + 'px';
}
var dofn = function () {
if (_that.target [arah] == judge) {
_That.target [arah] = 0;
}
_That.target [arah] ++;
}
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 can = true,
_That = ini;
this.target.onMouseOver = function () {can = false};
this.target.onmouseout = function () {can = true};
fungsi baru () {
var stop = _that.target.scroltop%_that.scrollHeight == 0 &&!
if (! stop) _that.target.scroltop == parseInt (_that.target.scrollheight/2)?
setTimeout (arguments.callee, _that.target.sroltop%
};
},
getByClassName: function (classname, parent) {
var elem = [],
Node = Parent!
p = regexp baru ("(^| // s)"+className+"(// s | $)");
untuk (var n = 0, i = node.length; n <i; n ++) {
if (p.test (node [n] .className)) {{
elem.push (node [n]);
}
}
Mengembalikan elem;
},
init: function () {
nilai var = 0;
if (this.dir == 'crosswise' && this.effect == 'marque' && pt.itemname! = '') {
this.itemlen = this.target.getElementsbyTagname (this.opt.itemname) .length;
nilai = this.itemlen*this.opt.itemwidth;
} Kalau tidak {
value = this.target.scrollHeight;
}
var holderhtml = this.target.innerHtml;
this.target.innerHtml = '<verv>'+holderhtml+'</div>';
this.targetChild = this.getByClassName ('j_scrollinner', this.target) [0];
var attr = this.dir == 'vertikal'?
if (value> this.target [attr]) {{
if (this.effect == 'gulir') {{
this.scrolldo ();
} Kalau tidak {
this.marquee ();
}
this.targetChild.innerHtml += this.targetChild.innerHtml;
}
}
}