ما يدعم حاليًا هو العمودي والأفقي
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:
نسخ رمز رمز على النحو التالي:
<type type = "text/css">
ul ، li {padding: 0 ؛
#Marscroll {ارتفاع: 60 بكسل ؛
#Marscroll li {ارتفاع:
</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 حلقة
var timer = setInterval (function () {)
fn () ؛
} ، 30) ؛
(3) عندما يمر الماوس عبر هذا المحتوى ، يتوقف
نسخ رمز رمز على النحو التالي:
// يمسك
target.onmouseover = function () {
ClearTimeout (مؤقت) ؛
}
target.onmouseout = function () {
Timer = setInterval (function () {
fn () ؛
} ، 30) ؛
}
مثال على الكود الإجمالي JS:
نسخ رمز رمز على النحو التالي:
// اكتب في وظيفة مجهولة لمنع التلوث المتغير العالمي
(وظيفة () {)
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 حلقة
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.effect = this.opt.effect == 'Scroll'؟
this.scrollheight = this.opt.scrollheight ؛
this.init () ؛
}
gymarquee.prototype = {
سرادق: وظيفة () {
var _ that = هذا ،
الاتجاه = 'Scrolltop' ،
القاضي = this.target.scrollheight ،
مؤقت = فارغ ؛
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 [Direction] == Judge) {
_ that.target [Direction] = 0 ؛
}
_ that.target [Direction] ++ ؛
}
Timer = setInterval (function () {
dofn () ؛
} ، 38) ؛
this.target.onmouseover = function () {
إذا (الوقت) clearTimeOut (مؤقت) ؛
}
this.target.onmouseout = function () {
Timer = setInterval (function () {
dofn () ؛
} ، 38) ؛
}
} ،
Scrolldo: function () {
VAR يمكن = صحيح ،
_ that = هذا ؛
this.target.onmouseover = function () {can = false} ؛
this.target.onmouseout = function () {can = true} ؛
وظيفة جديدة () {
var stop = _that.target.scroltop ٪ _ that.scrollheight == 0 && can ؛
if (! stop) _That.Target.scroltop == parseint (_that.target.scrollheight/2)؟
setTimeout (encuments.callee ، _that.target.scroltop ٪
} ؛
} ،
getByClassName: Function (className ، Parent) {
var elem = [] ،
العقدة = الوالدين!
p = new 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 ؛
} آخر {
القيمة = this.target.scrollheight ؛
}
var holderhtml = this.target.innerhtml ؛
this.target.innerhtml = '<viv>'+holderhtml+'</viv>' ؛
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 ؛
}
}
}