สิ่งที่สนับสนุนในปัจจุบันคือการกลิ้งแนวตั้งและแนวนอน
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:
คัดลอกรหัสรหัสดังนี้:
<style type = "text/css">
ul, li {padding: 0;
#marscroll {ความสูง: 60px;
#marscroll li {ความสูง: 20px;
</style>
(1) ก่อนอื่นคุณต้องพิจารณาว่าเนื้อหาของเนื้อหาภายในสูงกว่า Div#Marscrolll ด้านนอกหรือไม่จากนั้นจะไม่ดำเนินการหมุน:
คัดลอกรหัสรหัสดังนี้:
// เขียนในฟังก์ชันที่ไม่ระบุชื่อเพื่อป้องกันมลพิษตัวแปรทั่วโลก
(การทำงาน () {)
var target = document.getElementById ('marscroll')
OUL = target.getElementsByTagname ('ul') [0];
// เนื้อหามีขนาดเล็กจากนั้นออกจากฟังก์ชั่นนี้โดยตรง
ถ้า (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 (ฟังก์ชัน () {)
fn ();
}, 30);
(3) เมื่อเมาส์ผ่านเนื้อหานี้มันจะหยุดกลิ้ง
คัดลอกรหัสรหัสดังนี้:
// ถือ
target.onmouseover = function () {
ClearTimeout (ตัวจับเวลา);
-
target.onmouseout = function () {
timer = setInterval (ฟังก์ชัน () {
fn ();
}, 30);
-
ตัวอย่าง JS Total Code:
คัดลอกรหัสรหัสดังนี้:
// เขียนในฟังก์ชันที่ไม่ระบุชื่อเพื่อป้องกันมลพิษตัวแปรทั่วโลก
(การทำงาน () {)
var target = document.getElementById ('marscroll')
OUL = target.getElementsByTagname ('ul') [0]
OUL_H = OUL.OffSetheight;
// เนื้อหามีขนาดเล็กจากนั้นออกจากฟังก์ชั่นนี้โดยตรง
ถ้า (out_h <target.offSetheight) กลับมา;
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 (ฟังก์ชัน () {)
fn ();
}, 30);
// ถือ
target.onmouseover = function () {
ClearTimeout (ตัวจับเวลา);
-
target.onmouseout = function () {
timer = setInterval (ฟังก์ชัน () {
fn ();
}, 30);
-
-
แนวตั้งที่เรียบง่ายและความไร้รอยต่อเสร็จสมบูรณ์
นี่คือบรรจุภัณฑ์ส่วนบุคคลตัวอย่างออนไลน์:
http://lgyweb.com/marscroll/
คัดลอกรหัสรหัสดังนี้:
ฟังก์ชั่น Gymarquee (opt) {
this.opt = opt;
if (! document.getElementById (this.opt.targetId)) ส่งคืน;
this.target = document.getElementById (this.opt.targetId);
this.dir = this.opt.dir == 'crosswise'?
this.effect = this.opt.effect == 'Scroll'?
this.scrollheight = this.opt.scrollheight;
this.init ();
-
Gymarquee.prototype = {
Marquee: function () {
var _that = สิ่งนี้
direction = 'scrolltop'
ผู้พิพากษา = this.target.scrollheight
จับเวลา = 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 () {
ถ้า (_that.target [ทิศทาง] == ผู้พิพากษา) {
_that.target [ทิศทาง] = 0;
-
_that.target [ทิศทาง] ++;
-
timer = setInterval (ฟังก์ชัน () {
dofn ();
}, 38);
this.target.onmouseover = function () {
ถ้า (เวลา) ClearTimeOut (ตัวจับเวลา);
-
this.target.onmouseout = function () {
timer = setInterval (ฟังก์ชัน () {
dofn ();
}, 38);
-
-
scrolldo: function () {
var can = 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 = ใหม่ regexp ("(^| // s)"+classname+"(// s | $)");
สำหรับ (var n = 0, i = node.length; n <i; n ++) {
if (p.test (node [n] .classname)) {{
elem.push (โหนด [n]);
-
-
กลับ Elem;
-
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 == 'แนวตั้ง'?
if (value> this.target [attt]) {{
if (this.effect == 'scroll') {{
this.scrolldo ();
} อื่น {
this.marquee ();
-
this.targetChild.innerhtml += this.targetChild.innerhtml;
-
-
-