هذه جافا سكريبت يخلق سرادق التمرير في منطقة الصور حيث تتحرك الصور أفقيا عبر منطقة العرض. عندما تختفي كل صورة من خلال جانب واحد من منطقة العرض ، تتم إعادة قراءتها في بداية سلسلة الصور. يؤدي ذلك إلى إنشاء تمرير مستمر للصور في الشاشة الاسمية التي تتكرر - طالما لديك ما يكفي من الصور لملء عرض منطقة عرض الشاشة الاسمية.
يحتوي هذا النص البرمجي على بعض القيود ، ولكن:
- يتم عرض الصور بنفس الحجم (العرض والارتفاع). إذا لم تكن الصور بنفس الحجم فعليًا ، فسيتم تغيير حجمها جميعًا. يمكن أن يؤدي هذا إلى جودة صورة رديئة ، لذا من الأفضل قياس الصور المصدر باستمرار.
- يجب أن يتطابق ارتفاع الصور مع ارتفاع مجموعة التحديد ، وإلا سيتم تغيير حجم الصور بنفس الإمكانات للصور الضعيفة المذكورة أعلاه.
- يجب أن يكون عرض الصورة مضروبًا في عدد الصور أكبر من عرض الشاشة الاسمية. أسهل حل لهذا إذا كانت الصور غير كافية هو فقط تكرار الصور في الصفيف لملء الفجوة.
- التفاعل الوحيد الذي يقدمه هذا البرنامج النصي هو إيقاف التمرير عند تحريك الماوس فوق الشاشة الاسمية واستئنافها عندما يتحرك الماوس بعيدًا عن الصورة. سنصف لاحقًا تعديلًا يمكن إجراؤه لتحويل جميع الصور إلى روابط.
- إذا كان لديك العديد من المظلات على الصفحة ، فستعمل جميعها بنفس السرعة ، لذا فإن التمرير فوق أي منها سيؤدي إلى توقفها جميعًا عن الحركة.
- أنت بحاجة إلى صورك الخاصة. تلك الموجودة في الأمثلة ليست جزءًا من هذا البرنامج النصي.
صورة رمز جافا سكريبت Marquee Marquee
الأول ، انسخ JavaScript التالي واحفظه باسم marquee.js.
يحتوي هذا الرمز على مصفوفتي صور (لسرادق الشاشة في صفحة المثال) ، بالإضافة إلى كائنين mq جديدين يحتويان على المعلومات التي سيتم عرضها في هذين المستطيلين.
يمكنك حذف أحد هذه الكائنات وتغيير الآخر لعرض سرادق متواصل على صفحتك أو تكرار هذه العبارات لإضافة المزيد من المظلات.
يجب أن تسمى دالة mqRotate تمرير mqr بعد تحديد المظلات على أنها ستتعامل مع التدوير.
فارmqAry1 = ['graphics / img0.gif'، 'graphics / img1.gif'، 'graphics / img2.gif'، '
graphics / img3.gif '،' graphics / img4.gif '،' graphics / img5.gif '،' graphics /
img6.gif '،' graphics / img7.gif '،' graphics / img8.gif '،' graphics / img9.gif '،
"graphics / img10.gif" و "graphics / img11.gif" و "graphics / img12.gif" و "
graphics / img13.gif '،' graphics / img14.gif '] ؛
فار
mqAry2 = ['graphics / img5.gif'، 'graphics / img6.gif'، 'graphics / img7.gif'، '
graphics / img8.gif '،' graphics / img9.gif '،' graphics / img10.gif '،' graphics /
img11.gif '،' graphics / img12.gif '،' graphics / img13.gif '،' graphics / img14.
gif '،' graphics / img0.gif '،' graphics / img1.gif '،' graphics / img2.gif '،'
graphics / img3.gif '،' graphics / img4.gif '] ؛
بدء الوظيفة () {
new mq ('m1'، mqAry1،60) ؛
new mq ('m2'، mqAry2،60)؛ // كرر لأكبر عدد ممكن من الحقول حسب الحاجة
mqRotate (mqr) ؛ // يجب أن يأتي في المرتبة الأخيرة
}
window.onload = البداية ؛
// Marquee Image المستمر
// حقوق الطبع والنشر 24 يوليو 2008 ستيفن تشابمان
// http://javascript.about.com
// إذن لاستخدام جافا سكريبت هذا على صفحة الويب الخاصة بك
// شريطة أن جميع التعليمات البرمجية أدناه في هذا البرنامج النصي (بما في ذلك هذه
// comments) بدون أي تغيير
فار mqr = [] ؛ وظيفة
mq (id، ary، wid) {this.mqo = document.getElementById (id)؛ var heit =
this.mqo.style.height ؛ this.mqo.onmouseout = الوظيفة ()
{mqRotate (mqr)؛} ؛ this.mqo.onmouseover = الوظيفة ()
{clearTimeout (mqr [0] .TO)؛} ؛ this.mqo.ary = [] ؛ var maxw = ary.length ؛
ل (فار
ط = 0 ؛ طthis.mqo.ary [i] .src = ary [i]؛ this.mqo.ary [i] .style.position =
'مطلق'؛ this.mqo.ary [i] .style.left = (wid * i) + 'px'؛
this.mqo.ary [i] .style.width = wid + 'px'؛ this.mqo.ary [i] .style.height =
هيت. this.mqo.appendChild (this.mqo.ary [i])؛} mqr.push (this.mqo)؛}
دالة mqRotate (mqr) {if (! mqr) return؛ for (var j = mqr.length - 1 ؛ ي
> -1; j--) {maxa = mqr [j] .ary.length؛ for (var i = 0؛ imqr [j] .ary [i] .style؛ x.left = (parseInt (x.left، 10) -1) + 'px'؛} var y =
mqr [j] .ary [0] .style؛ if (parseInt (y.left، 10) + parseInt (y.width، 10) <0)
{var z = mqr [j] .ary.shift () ؛ z.style.left = (parseInt (z.style.left) +
parseInt (z.style.width) * maxa) + 'px'؛ mqr [j] .ary.push (z)؛}}
mqr [0] .TO = setTimeout ('mqRotate (mqr)'، 10)؛}
بعد ذلك ، أضف الكود التالي إلى قسم الرأس في صفحتك:
قم بإضافة أمر ورقة أنماط
نحتاج إلى إضافة أمر ورقة أنماط لتحديد كيف سيبدو كل من المظلات.
إليك الرمز الذي استخدمناه لتلك الموجودة في صفحة المثال:
.marquee {الوظيفة: قريب؛
إخفاء الفائض؛
العرض: 500 بكسل ؛
الارتفاع: 60 بكسل ؛
الحد: أسود صلب 1 بكسل ؛
}
يمكنك تغيير أي من هذه الخصائص لسرادقك ؛ ومع ذلك ، يجب أن تبقى الموقف: نسبي.
يمكنك إما وضعها في ورقة الأنماط الخارجية الخاصة بك إذا كان لديك واحد أو إحاطة بينهما في رأس صفحتك.
حدد أين ستضع الخيمة
الخطوة التالية هي تحديد div في صفحة الويب الخاصة بك حيث ستضع سرادق الصور.
استخدم أول سرادق المثال هذا الرمز:
يربط الفصل هذا برمز ورقة الأنماط بينما المعرف هو ما سنستخدمه في استدعاء mq () الجديد لإرفاق سرادق الصور.
تأكد من أن الكود الخاص بك يحتوي على القيم الصحيحة
آخر شيء يجب القيام به لوضع كل هذا معًا هو التأكد من أن التعليمات البرمجية الخاصة بك لإضافة كائن mq في JavaScript بعد تحميل الصفحة تحتوي على القيم الصحيحة.
إليك ما تبدو عليه إحدى عبارات المثال:
new mq ('m1'، mqAry1،60) ؛
- m1 هو معرف علامة div الخاصة بنا والتي ستعرض الشاشة الاسمية.
- mqAry1 هو مرجع لمجموعة من الصور التي سيتم عرضها في الشاشة الاسمية.
- القيمة النهائية 60 هي عرض صورنا (ستنتقل الصور من اليمين إلى اليسار وبالتالي الارتفاع هو نفسه الذي حددناه في ورقة الأنماط).
لإضافة سرادق إضافية قمنا فقط بإعداد مصفوفة صور إضافية ، divs إضافية في HTML ، ربما تم إعدادها فئات إضافية لتنسيق المظلات بشكل مختلف ، وإضافة العديد من عبارات mq () الجديدة كما لدينا خيام. نحتاج فقط للتأكد من أن استدعاء mqRotate () يتبعهم لتشغيل المظلات بالنسبة لنا.
جعل صور سرادق في الروابط
هناك تغييران فقط عليك إجراؤهما من أجل تحويل الصور الموجودة في المحيط إلى روابط.
أولاً ، قم بتغيير مصفوفة الصور الخاصة بك من مصفوفة من الصور إلى مصفوفة من الصفائف حيث يتكون كل صفائف داخلية من صورة في الموضع 0 وعنوان الارتباط في الموضع 1.
var mqAry1 = [
['graphics / img0.gif'، 'blcmarquee1.htm']،
['graphics / img1.gif'، 'blclockm1.htm']، ...
['graphics / img14.gif'، 'bltypewriter.htm']] ؛
الشيء الثاني الذي يجب فعله هو استبدال ما يلي بالجزء الرئيسي من البرنامج النصي:
// Marquee Image المستمر مع الارتباطات
// حقوق الطبع والنشر 21 سبتمبر 2008 بواسطة ستيفن تشابمان
// http://javascript.about.com
// إذن لاستخدام جافا سكريبت هذا على صفحة الويب الخاصة بك
// شريطة أن جميع التعليمات البرمجية أدناه في هذا البرنامج النصي (بما في ذلك هذه
// comments) بدون أي تغيير
var mqr = [] ؛ function mq (id، ary، wid) {this.mqo = document.getElementById (id)؛ var heit = this.mqo.style.height ؛ this.mqo.onmouseout = function () {mqRotate (mqr)؛}؛ this.mqo.onmouseover = function () {clearTimeout (mqr [0] .TO)؛}؛ this.mqo.ary = [] ؛ var maxw = ary.length ؛ for (var i = 0؛ i
ما تبقى من ما عليك القيام به يبقى كما هو موصوف لنسخة الشاشة الاسمية بدون الروابط.