العلامة <marquee> هي علامة تظهر في أزواج. المحتوى بين العلامة الأولى <marquee> والعلامة الأخيرة </marquee> هو التمرير للمحتوى. تشمل سمات علامة <Marquee> بشكل أساسي السلوك ، BGColor ، الاتجاه ، العرض ، الارتفاع ، HSPACE ، VSPACE ، حلقة ، scrollamount ، scrolldelay ، إلخ.
اليوم ، عندما كنت أقوم برسم اليانصيب الدوار الكبير على WeChat ، أردت أن أجعل سجلات اليانصيب لجميع المستخدمين في تأثير سلس. لسوء الحظ ، كانت مؤسستي JS سيئة للغاية ولم أستطع التفكير في طريقة لتحقيق ذلك في الوقت الحالي ، لذلك كان لدي العديد من الآثار المماثلة على Baidu. لكنني اكتشفت بطريق الخطأ علامة HTML - <marquee> </marquee> يمكن أن تحقق تأثيرات متعددة للتمرير دون التحكم في JS. لا يمكن باستخدام علامة MARQUEE التمرير النص فحسب ، ولكن أيضًا قم بتمرير الصور والجداول وما إلى ذلك ، كما أنها مريحة وسريعة للاستخدام ، مما يوفرني كثيرًا من الوقت.
علامة السرادق ليست جزءًا من HTML3.2 ولا تدعم سوى Kernels MSIE3 ، لذلك إذا كنت تستخدم متصفحات kernel غير (مثل NetScape) ، فقد لا تتمكن من رؤية بعض التأثيرات المثيرة للاهتمام أدناه. هذه العلامة هي علامة حاوية.
1. عدة سمات مهمة لعلامة السرادق:1. الاتجاه: اتجاه التمرير (بما في ذلك 4 قيم: أعلى ، أسفل ، يسار ، يمين)
الوصف: UP: قم بالتمرير من أسفل إلى أعلى ؛ أسفل: انتقل من أعلى إلى أسفل ؛ اليسار: انتقل من اليمين إلى اليسار ؛ اليمين: انتقل من اليسار إلى اليمين.
بناء الجملة: <اتجاه سرادق = اتجاه التمرير> ... </marquee>
2.Behavior: طريقة التمرير (بما في ذلك 3 قيم: التمرير ، الشريحة ، تغيير)
الوصف: التمرير: تمرير حلقة ، التأثير الافتراضي ؛ الشريحة: توقف عند التمرير مرة واحدة فقط ؛ البديل: التمرير ذهابًا وإيابًا بالتناوب.
بناء الجملة: <سلوك سرادق = طريقة التمرير> ... </marquee>
3.Scrollamount: سرعة التمرير (سرعة التمرير هي طول الحركة عند ضبط كل تمرير ، بالبكسل)
بناء الجملة: <marquee scrollamount = 5> ... </marquee>
4. Scrolldelay: اضبط وقت التأخير بين التمرير مرتين. إذا كانت القيمة كبيرة ، فسيكون هناك تأثير خطوة بخطوة (اضبط الفاصل الزمني للتمرير ، الوحدة هي ميلي ثانية)
بناء الجملة: <marquee scrolldelay = 100> ... </marquee>
5.loop: اضبط عدد مرات دورة التمرير (القيمة الافتراضية هي -1 ، وسيستمر التمرير في الدورة)
بناء الجملة: <loop marquee = 2> ... </marquee>
<marquee loop = -1 bgcolor =#cccccc> سأستمر في المشي. </marquee>
<marquee loop = 2 bgcolor =#cccccc> أنا فقط أذهب مرتين </marquee>
6. العرض ، الارتفاع: اضبط عرض وارتفاع ترجمات التمرير
بناء الجملة: <عرض سرادق = 500 ارتفاع = 200> ... </marquee>
7.bgColor: اضبط لون الخلفية لترجمات التمرير (يمكن أن تكون قيمة اللون ، أو وظيفة RGB () أو RGBA ())
بناء الجملة: <marquee bgcolor = rgba (0،0،0،0.2)> ... </marquee>
8.hspace ، vspace: مساحة فارغة (تعادل قيمة الهامش الإعداد)
الوصف: Hspace: اضبط المسافة بين الموضع في الترجمات النشطة من الحدود الأفقية للحاوية الأصل ، مثل Hspace = 10 ، وهو ما يعادل: الهامش: 0 10px ؛
VSPACE: اضبط المسافة بين الموضع في الترجمة النشطة من الحدود العمودية للحاوية الأصل ، مثل VSPACE = 10 ، وهو ما يعادل: الهامش: 10px 0 ؛
بناء الجملة: <marquee hspace = 10 vspace = 10> ... </marquee> (يعادل: الهامش: 10px ؛)
9.Align: اضبط طريقة المحاذاة للتمرير الفرعي (بما في ذلك 9 قيم: Abbottom ، Absmiddle ، خط الأساس ، أسفل ، اليسار ، الأوسط ، اليمين ، Texttop ، TOP)
الوصف: Abbottom: Abbottom يتماشى مع الطرف السفلي من الحروف مثل G ، P)
Absmiddle: محاذاة مركزية تمامًا
خط الأساس: محاذاة خلاصة القول
أسفل: المحاذاة السفلية (افتراضي)
اليسار: اليسار محاذاة
الأوسط: المحاذاة الوسطى
اليمين: محاذاة الحق
TextTop: محاذاة الخط العلوي
أعلى: أعلى المحاذاة
بناء الجملة: <marquee align = align> ... </marquee>
10. الواجهة: تعيين خطوط نصية للتمرير الفرعي
بناء الجملة: <marquee font = kaiti_gb2312> </marquee>
11.Color: اضبط لون النص من ترجمات التمرير
بناء الجملة: <marquee color =#333> </marquee>
12.Size: اضبط حجم الخط النصي لترجمات التمرير
بناء الجملة: <size marquee = 3> </marquee>
13. Strong: اضبط نص التمرير الفرعي ليكون جريئًا
2. حدثان شائعان يستخدمهما سرادق:بناء الجملة: <marquee Strong> </marquee>
onMouseout = this.start () يستخدم لتعيين الماوس لمواصلة التمرير عندما ينتقل من هذه المنطقة.
onMouseover = this.stop () يستخدم لتعيين الماوس للتوقف عن التمرير عندما ينتقل إلى هذه المنطقة.
<marquee onMouseout = this.start () onMouseover = this.stop ()> حدثان شائعان يستخدمهما Marquee </marquee>
الرمز الكامل كما يلي:
<marquee id = Affiche align = left behavior = scroll bgcolor =#ff0000 اتجاه = ارتفاع = 300 عرض = 200 hspace = 50 vspace = 20 loop = -1 scrolllamount = 10 scrolldelay = 100 onMouseout = this.start () onMouseover = this.stop ()>
على الرغم من أن هناك العديد من المعلمات من <marquee> ، إلا أنها لا تستطيع تحقيق تأثيرات سرادق خاصة معقدة ومخصصة بعد كل شيء ، وهناك قيود المتصفح ، لذلك في المزيد من الحالات ، سنستخدم JavaScript لتحقيق تأثير التمرير السراويل.
هذه هي المقالة حول تأثير علامات التمرير السلس في HTML. هذا كل شيء عن هذا المقال. لمزيد من المحتويات ذات الصلة من سرادق التمرير السلس ، يرجى البحث عن المقالات السابقة من wulin.com أو متابعة تصفح المقالات ذات الصلة أدناه. آمل أن يدعم الجميع wulin.com في المستقبل!