เป็นที่รู้กันว่าเนื้อหา 20 ชิ้นจะต้องมีเอฟเฟกต์เขื่อนแบ่งออกเป็นสามชั้นและความเร็วจะเป็นแบบสุ่ม มาดูเอฟเฟกต์กันก่อน:
ดังนั้นการกรอกข้อมูลที่สร้างขึ้นจึงไม่ได้รับการพิจารณาที่นี่ เป็นเพียงเอฟเฟกต์การแสดงผล หากคุณต้องการดูสิ่งที่คุณกรอกโปรดอย่าเสียเวลา
ไอเดียรหัส
โครงสร้างโครงกระดูก HTML
(มันยาวเกินไป ยกตัวอย่างสามข้อ หากคุณคิดว่าอินเทอร์เฟซยาวเกินไปและไม่เป็นมิตร คุณสามารถสร้างมันแบบไดนามิกด้วย 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>เหรียญ 1Q วันนี้</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>丶ถุงนม Wu ในหม้อกวางถูกถอนออกแล้ววันนี้<i>เหรียญ 3Q</i></span></div >< /div>
สไตล์ CSS
.cute-barrage กำหนดช่วงและตำแหน่งการแสดงผล ความกว้าง 100% ความสูงได้รับการปรับแต่ง และส่วนที่อยู่นอกเหนือแนวนอนจะถูกซ่อนไว้
ส่วนเนื้อหา .barrage-div ความยาวจะถูกกำหนดโดยเนื้อหา และตำแหน่งที่สัมพันธ์กับพาเรนต์จะถูกกำหนด
html,body{ width:100%;}.cute-barrage{ width: 100%; height: 4rem; /*กำหนดความยาวของเขื่อน*/ ตำแหน่ง: ด้านบน: 1.5rem; เขื่อนกั้นน้ำ*/ ซ้าย : 0; overflow-x: ซ่อนเร้น; /*ซ่อนส่วนที่เกินในแนวนอน*/ .barrage-div{ ตำแหน่ง: สัมบูรณ์; ขวา: -100%; /* ตรวจสอบให้แน่ใจว่าอยู่นอกอินเทอร์เฟซตั้งแต่เริ่มต้น จากขวาไปซ้ายคือขวา จากซ้ายไปขวาคือซ้าย*/ ความสูง: 0.6rem; สีพื้นหลัง: rgba(255, 255, 255, 0.9); รัศมี: 2rem; white-space: nowrap; /*ตรวจสอบให้แน่ใจว่าเนื้อหาแสดงอยู่ในบรรทัดเดียว ไม่เช่นนั้นเนื้อหาจะตัดเมื่อย้ายไปที่จุดสิ้นสุด*/ img{ width: 0.5rem; แนวตั้ง: กลาง; // องค์ประกอบบล็อกแบบอินไลน์, ระยะห่างจากขอบซ้าย: 0.05rem; // องค์ประกอบบล็อกแบบอินไลน์ องค์ประกอบที่จัดกึ่งกลางเป็นสิ่งที่ขาดไม่ได้: // องค์ประกอบบล็อกแบบอินไลน์ การจัดตำแหน่งแบบอินไลน์ที่ขาดไม่ได้ในแนวตั้ง: กลาง;การใช้งานแอนิเมชั่นแบบไดนามิก js (zepto.js)
//Barrage var winWidth = $(window).width(); //รับความกว้างของหน้าจอ $(.barrage-div).each(function(index,value){ //สำรวจแต่ละ barrage 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{ right: ${-width}px } ถึง{ right:${winWidth}px; } }/ @-webkit-keyframes ani${index}{ form{ right:${-width}px; } ถึง { right:${winWidth}px } }`; เพิ่มลงในแท็ก head ของหน้า $(<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); ให้ เมื่อเพิ่มแอนิเมชัน css ลงในเขื่อนด้านหน้าแบบเต็ม // เวลาหน่วงคือ *1.5 เท่าของแต่ละรายการ ตัวแปร $(value).css({animation:`ani${index} ${aniList[aniTime]} เชิงเส้นนี้ ${index * 1.5}s`,-webkit-animation:`ani${index} ${aniList[aniTime]}s เชิงเส้น ${index * 1.5}s`});})จากนั้นลองดูเอฟเฟกต์ของเบราว์เซอร์:
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network