برنامج عرض الشرائح DHTML (1)
الكاتب:Eve Cole
وقت التحديث:2009-06-20 17:00:35
هذا هو برنامج عرض الشرائح، وهو برنامج يقوم بتشغيل الصور بدورها. يمكننا أن نرى هذا الشكل من أشرطة تشغيل الإعلانات في بعض المواقع، ومعظمها مصنوع باستخدام CGI، مما يعني أن الخادم يجب أن يدعم برامج CGI، مثل ASP وPHP وPerl وما إلى ذلك. لكن طريقة التنفيذ لدينا هنا لا تتطلب CGI، فهي تستخدم فقط تأثيرات CSS، بالإضافة إلى التحكم في JavaScripts. طالما أن متصفحك هو IE 4.0 أو أعلى أو Netscape 3.0 أو أعلى. كل ما في الأمر أننا هنا نستخدم تأثير CSS Filter، والذي يمكن أن يظهر فقط في IE. للحصول على معلومات حول تأثيرات المرشحات في CSS، يمكنك الرجوع إلى "الشرح التفصيلي للمرشحات في CSS"، والذي تم نشره على موقع Yesky.com.
حسنًا، فلنقم ببعض الاستعدادات.
أولا وقبل كل شيء، من أجل إنشاء هذا التأثير، نحتاج أولا إلى إنشاء عدة صور بنفس الحجم والسماح لها باللعب بدورها. على سبيل المثال، وجدت الصور الثلاث التالية مقاس 88 × 31 مثل الصور المستخدمة.
ثانيًا، دعونا نستعرض معرفة مرشح تحويل الصور الخاص بـ Filter في CSS:
عرض مرشح التحويل في CSS
يوفر مرشح تحويل العرض تأثير تحويل أكثر تنوعًا، على عكس مرشح التحويل المختلط، الذي يوفر فقط تأثير التلاشي والتلاشي، كما أنه يوفر المزيد من تأثيرات تحويل الصورة:
عامل التصفية: RevealTrans (المدة = عدد الثواني المطلوب تحويلها، الانتقال = نوع التحويل)
كما ترى، فهي تحتوي على معلمة نوع التحويل، حيث توفر 24 نوعًا من التحويلات، نحتاج فقط إلى تحديد الاسم الرمزي لنوع التحويل لتحويل الصورة وفقًا لتأثير التحويل الفريد. يوضح الجدول التالي نماذج مرشح التحويل الـ 24 والأكواد المقابلة لها:
عرض | الكود المطابق | لنموذج التحويل لمرشح التحويل | عرض الكود المطابق | لنموذج التحويل لمرشح التحويل.
مستطيل من الكبير إلى الصغير | 0 | قم بحل | 12 |
مستطيلًا بشكل عشوائي من الصغير إلى | الكبير 1 | انقسم عموديًا إلى الداخل | 13 |
دائرة من الكبير إلى الصغير. | 2 | انقسام عمودي إلى الخارج | 14 |
دائري صغير إلى كبير | 3 | انقسام أفقي إلى الداخل | 15 |
ادفع لأعلى | 4 | انقسام أفقيًا إلى الخارج | 16 |
ادفع لأسفل | 5 | انزع لليسار ولأسفل | 17 |
ادفع لليمين | 6 | انزع لأعلى لليسار | 18 |
ادفع لليسار لفتح | 7 | انزع لأسفل إلى اليمين | 19 |
الستائر الرأسية | 8 | انزع لأعلى ولليمين | 20 |
ستائر أفقية | 9 | خطوط دقيقة أفقية عشوائية | 21 |
رقعة الشطرنج الأفقية | 10 | خطوط دقيقة رأسية عشوائية | 22 |
رقعة الشطرنج العمودية | 11 | تحديد تأثير خاص بشكل عشوائي | 23 |