ومن المعروف أن 20 قطعة من المحتوى يجب أن يكون لها تأثير وابل، مقسمة إلى ثلاث طبقات، وتكون السرعة عشوائية. دعونا نلقي نظرة على التأثير أولاً:
ولذلك، لا يعتبر ملء تلك التي تم إنشاؤها هنا. مجرد تأثير العرض. إذا كنت تريد أن ترى ما قمت بملئه، من فضلك لا تضيع وقتك.
أفكارشفرة
أتش تي أم أل الهيكل العظمي
(إنها طويلة جدًا. خذ ثلاثة كمثال. إذا كنت تعتقد أن الواجهة طويلة جدًا وغير ودية، فيمكنك أيضًا إنشاؤها ديناميكيًا باستخدام js)
<div class=cute-barrage><div class=barrage-div><img src=http://kw1-1253445850.file.myqcloud.com/static/image/stimg_7656dc02eb1cd13adbacbdd2695dc3a8.jpg/><span>سحبت شركة Momoda <i>عملة Q1 اليوم</i></span></div> <div class=barrage-div><img src=http://kw1-1253445850.file.myqcloud.com/static/image/stimg_632fecdcb52417cb8ab89fa283e07281.jpg/><span>القط البرتقالي ذو الأذنين الكبيرتين يسحب <i>عملات 5Q اليوم</i></span>< /div><div class=barrage-div><img src=../../static/cutePresent/resource/avatar.png/><span>丶 يحتوي وعاء الغزلان على كيس حليب وو. اسحب <i>3Q عملات معدنية اليوم</i></span></div> < /ديف>
أسلوب المغلق
يحدد .cute-barrage نطاق العرض وموضعه، ويكون العرض 100%، ويتم تخصيص الارتفاع، ويتم إخفاء الجزء الذي يقع خارج الاتجاه الأفقي.
جزء المحتوى .barrage-div ، يتم تحديد الطول حسب المحتوى، ويتم تحديد الموضع بالنسبة للأصل
html,body{ width:100%;}.cute-barrage{ width: 100% height: 4rem; /*تحديد طول الوابل*/ الموضع: مطلق; barrage*/ left : 0; overflow-x: protected; /* تأكد من أنه خارج الواجهة في البداية، من اليمين إلى اليسار هو اليمين، ومن اليسار إلى اليمين*/ height: 0.6rem border-color: rgba(255, 255, 255, 0.9); radius: 2rem; محاذاة عمودية: وسط؛ // عناصر الكتلة المضمنة، لا غنى عن أربعة عناصر محاذاة للوسط height: 0.6rem; inline-block; // عناصر الكتلة المضمنة، لا غنى عن أربعة محاذاة مضمنة عموديًا: middle;تنفيذ الرسوم المتحركة الديناميكية لـ js (zepto.js)
// الوابل var winWidth = $(window).width(); // احصل على عرض الشاشة $(.barrage-div).each(function(index,value){ // اجتياز كل وابل var width = $( value) .width(); // احصل على عرض الوابل الحالي var topRandom = Math.floor(Math.random() * 3) + 'rem'; // احصل على الرقم العشوائي 0،1،2 وقم بتغييره وفقًا للحالة $(value).css({right:-width,top:topRandom}); // انقل الوابل إلى خارج الشاشة, ما وراء الموضع مباشرةً // وظيفة إطار الرسوم المتحركة الإملائية، تذكر أنه يجب تمييز كل ani، ويتحرك العرض من عرضه السلبي بمقدار مسافة الشاشة بأكملها var keyframes = `/ @keyframes ani${index}{ form{ يمين:${-width}px } إلى{ right:${winWidth}px } }/ @-webkit-keyframes ani${index}{ form{ right:${-width}px } to{ right:${winWidth}px }`; أضف إلى علامة رأس الصفحة $(<style>).attr(type,text/css).html(keyframes).appendTo($(head)); // تحديد قائمة سرعة الرسوم المتحركة var aniList = [3,5,7,9,11]; // احصل على أرقام عشوائية من المصفوفة، 0,1,2,3,4 var aniTime =Math.floor(Math.random() * 5); Give عند إضافة الرسوم المتحركة CSS إلى الوابل الأمامي الكامل // وقت التأخير هو * 1.5 مرة لكل منهما، هذا المتغير $(value).css({animation:`ani${index} ${aniList[aniTime]}s خطي ${index * 1.5}s`,-webkit-animation:`ani${index} ${aniList[aniTime]}s خطي ${index * 1.5}s`});})ثم ألق نظرة على تأثير المتصفح:
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.