عند التعامل مع التمرير السلس المتقطع للأخبار على الصفحة، فإن الطريقة الأكثر شيوعًا هي نسخ محتوى منطقة التمرير وإلحاقه، ثم التحكم في الجزء العلوي من كتلة التمرير والحكم عليه لتحقيق تأثير إيقاف التمرير.
في الواقع، في كثير من الحالات يكون من الأسهل تحقيق التمرير السلس المتقطع خلال عمليات العقدة.
الرمز هو كما يلي:
<script language="javascript" type="text/javascript">
window.onload=function(){
var o=document.getElementById('box');
window.setInterval(function(){scrollup(o,24,0);},3000);
}
/// طريقة التمرير الرئيسية
/// المعلمة: كائن كتلة التمرير
/// المعلمة: د ارتفاع كل تمرير
/// المعلمة: ارتفاع التمرير الحالي c
وظيفة التمرير (س، د، ج) {
إذا (د==ج){
var t=getFirstChild(o.firstChild).cloneNode(true);
o.removeChild(getFirstChild(o.firstChild));
o.appendChild(t);
t.style.marginTop="0px";
}آخر{
ج+=2;
getFirstChild(o.firstChild).style.marginTop=-c+"px";
window.setTimeout(function(){scrollup(o,d,c)},20);
}
}
// حل مشكلة استخدام المسافات وأحرف الإرجاع كعقد ضمن Firefox
وظيفة getFirstChild(عقدة){
بينما (node.nodeType!=1)
{
Node=node.nextSibling;
}
عقدة العودة؛
}
</script>
<ul معرف = "مربع">
<li> · شينهوا ديلي تلغراف: رسوم حقوق الطبع والنشر للموسيقى تشبه "كرة من القنب" </li>
<li>· مودرن إكسبريس: هل يستطيع البشر الزواج من الروبوتات وإنجاب الأطفال </li>
<li>·عالمي: أمريكا، إفلاس نادي المليارديرات</li>
<li>· Modern Express: من أجل إسكات Ni Zhen عن وسائل الإعلام، أراد بيع رسائل الحب الخاصة بـ Li Jiaxin</li>
<li>· بكين تايمز: صاروخ من صنع طلاب جامعة بكين للملاحة الجوية والفضائية يصعد إلى السماء</li>
</ul>
تأثير:
تشغيل الكود
<نمط النوع = "نص/CSS">
<!--
*{ الهامش: 0 بكسل؛}
#box{العرض: 300 بكسل؛ الارتفاع: 24 بكسل؛ الفائض: حجم الخط: 12 بكسل؛}
#box li{ نمط القائمة: لا شيء؛ ارتفاع الخط: 24 بكسل؛}
-->
</نمط>
<script language="javascript" type="text/javascript">
window.onload=function(){
var o=document.getElementById('box');
window.setInterval(function(){scrollup(o,24,0);},3000);
}
وظيفة التمرير (س، د، ج) {
إذا (د==ج){
var t=getFirstChild(o.firstChild).cloneNode(true);
o.removeChild(getFirstChild(o.firstChild));
o.appendChild(t);
t.style.marginTop="0px";
}آخر{
ج+=2;
getFirstChild(o.firstChild).style.marginTop=-c+"px";
window.setTimeout(function(){scrollup(o,d,c)},20);
}
}
وظيفة getFirstChild(عقدة){
بينما (node.nodeType!=1)
{
Node=node.nextSibling;
}
عقدة العودة؛
}
</script>
<ul معرف = "مربع">
<li> · شينهوا ديلي تلغراف: رسوم حقوق الطبع والنشر للموسيقى تشبه "كرة من القنب" </li>
<li>· مودرن إكسبريس: هل يستطيع البشر الزواج من الروبوتات وإنجاب الأطفال </li>
<li>·عالمي: أمريكا، إفلاس نادي المليارديرات</li>
<li>· Modern Express: من أجل إسكات Ni Zhen عن وسائل الإعلام، أراد بيع رسائل الحب الخاصة بـ Li Jiaxin</li>
<li>· بكين تايمز: صاروخ من صنع طلاب جامعة بكين للملاحة الجوية والفضائية يصعد إلى السماء</li>
</ul>