บทความนี้จะแนะนำตัวอย่างการใช้งานภาพเคลื่อนไหวการเลื่อนแบบไร้รอยต่อที่ได้รับรางวัลบนเทอร์มินัลมือถือ Html5 และแบ่งปันกับทุกคน โดยมีรายละเอียดดังนี้:
ต้องการการวิเคราะห์
ฮ่าๆ อัพโหลดภาพไดนามิกก็ชัดเจนเลยทันที
มันกลิ้ง กลิ้ง แล้วจะทำยังไงล่ะ? สรุป:
โครงกระดูก HTMLจริงๆ แล้วมันง่ายมาก <div> ด้านนอกสุดถูกใช้เป็นหน้าต่างคงที่ <ul> ด้านในควบคุมการเคลื่อนไหว และ <li> ด้านในแสดงภาพเคลื่อนไหว
<div class=roll id=roll> <ul> <li>โครงสร้างแรก</li> <li>โครงสร้างที่สอง</li> <li>โครงสร้างที่สาม</li> <li>โครงสร้างที่สี่</li> li> <li>โครงสร้างที่ห้า</li> <li>โครงสร้างที่หก</li> <li>โครงสร้างที่เจ็ด</li> <li>โครงสร้างที่แปด</li> </ul></div>สไตล์ CSS พื้นฐาน
ขั้นแรกให้ใช้สไตล์ CSS พื้นฐาน
*{ ระยะขอบ:0; การขยาย: 0; .roll { ระยะขอบ: 100px อัตโนมัติ; ความกว้าง: 200px; ความสูง: 40px; เส้นขอบ: 1px ทึบสีฟ้า;}. ม้วน li {line-height:20px; font-size:14px;คุณสามารถดูสไตล์ทั่วไปได้:
แนวคิดในการนำไปปฏิบัติ 1. การใช้ภาพเคลื่อนไหวของ jqueryวิธีการเคลื่อนไหว ()
$(selector).animate(styles,speed,easing,callback)
พารามิเตอร์:
สไตล์: พารามิเตอร์ที่จำเป็น, สไตล์ CSS ที่ต้องเคลื่อนไหว (ใช้การตั้งชื่อตัวพิมพ์อูฐ)
ความเร็ว: ระบุความเร็วของภาพเคลื่อนไหว
@number:1000(มิลลิวินาที)
@string:ช้า,ปกติ,เร็ว
การค่อยๆ เปลี่ยน: ความเร็วของแอนิเมชัน (สวิง เชิงเส้น)
callback: ฟังก์ชัน callback หลังจากที่ฟังก์ชันถูกดำเนินการแล้ว
$(document).ready(function(){ setInterval(function(){ // เพิ่มตัวจับเวลาเพื่อแปลงทุกๆ 1.5 วินาที $(#roll).find(ul:first).animate({ marginTop:-40px // The ระยะทางของการเคลื่อนไหวแต่ละครั้ง},500,function(){/ //เวลาของการเคลื่อนไหวของแอนิเมชั่น//$(สิ่งนี้) หมายถึงวัตถุ ul //หลังจาก ul ถูกรีเซ็ตแล้ว ให้แทรกองค์ประกอบตัวแรกและตัวที่สอง // ไปยังตำแหน่งขององค์ประกอบสุดท้ายของ ul $(this).css({marginTop:0px}).find(li:first).appendTo(this ); $(this).find(li:first).appendTo(this); });ลองดูที่เอฟเฟกต์:
2. ใช้ภาพเคลื่อนไหวแอนิเมชั่น css3ผ่านคีย์เฟรมใน css3 คุณสามารถรับเอฟเฟกต์ของการข้ามขั้นตอนได้ มาดูแนวคิดสั้นๆ กันก่อน
เบื้องต้น1. ถ้าเป็นรางวัลแบบฮาร์ดโค้ด จะต้องคัดลอกด้านหน้าไปด้านหลัง หากทอยทีละอัน ให้คัดลอกอันแรก ถ้าทอยสองต่อสอง ให้คัดลอกอันแรกและอันที่สอง ส่วนบุคคล
<div class=roll id=roll> <ul> <li>โครงสร้างแรก</li> <li>โครงสร้างที่สอง</li> <li>โครงสร้างที่สาม</li> <li>โครงสร้างที่สี่</li> li> <li>โครงสร้างที่ห้า</li> <li>โครงสร้างที่หก</li> <li>โครงสร้างที่เจ็ด</li> <li>โครงสร้างที่แปด</li> <li>โครงสร้างที่หนึ่ง</li > <li>โครงสร้างที่สอง</li> </ul></div>
2. จากนั้นคำนวณว่าต้องเลื่อนกี่ครั้งและครั้งละกี่วินาที ตัวอย่างคือการเลื่อนสองครั้ง ซึ่งใช้เวลา 5 วินาที ดังนั้นเวลาภาพเคลื่อนไหวของ CSS3 คือ 5 วินาที แล้ว @keyframe จะต้องแบ่งออกเป็นกี่ส่วน? เนื่องจากเป็นการหยุดชั่วคราว แต่ละสโครลจึงต้องใช้สองสำเนา และอันสุดท้ายจะต้องข้ามไป จึงมีเพียงสำเนาเดียว ดังนั้นจึงต้องมี 5 * 2 - 1 = 9 สำเนา คุณจะรู้ได้โดยดูจากโค้ด:
/*ไม่มีการประมวลผลความเข้ากันได้ที่นี่*/.roll ul{ list-style: none; Animation: ani 5s linear infinite; /*Animation ani, 5s, เล่นด้วยความเร็วคงที่ในลูป*/}@keyframes ani{ 0 %{ ขอบบน: 0; } 12.5%{ ขอบบน: 0; } 25%{ ขอบบน: -40px; } 37.5%{ ขอบบน: -40px; } 50%{ ขอบบน: -80px; } 62.5%{ ขอบบน: -80px; } 75%{ ขอบบน: -120px; top: -160px; /*อันสุดท้ายคืออันหนึ่ง ซึ่งสามารถขัดจังหวะแอนิเมชั่น*/ }} ขั้นสูงหากตัวเลขไม่แน่นอน คุณจะต้องคำนวณแบบไดนามิก และใช้ js เพื่อเพิ่ม @keyframes แบบไดนามิก ในขณะนั้น ตราบใดที่คุณสามารถคำนวณช่วงเวลาและระยะทางของการเคลื่อนไหวได้ มันก็จะไม่เป็นไร
1. ก่อนอื่นให้หาความยาวของ <li>
2. จากนั้นคำนวณเปอร์เซ็นต์ของช่วงเวลา เนื่องจากมีการหยุดชั่วคราว อย่าลืมใช้จำนวนวินาที × 2
3. จากนั้นใช้สตริงเพื่อสะกด @keyframes ความยาว 0~รวมความยาวด้วย เนื่องจากมีอีกหนึ่งรายการ เลขคู่และเลขคี่จะถูกแยกออกจากกัน
4. โคลนคำแรกและคำที่สองใน <ul> ต่อท้าย <ul>
5. สร้างแท็ก <style> และเพิ่มลงใน <head>
6. เพิ่มคุณลักษณะภาพเคลื่อนไหวให้กับ <ul>
เพื่อเป็นการไม่ให้เสียเวลา เรามาพูดถึงโค้ดกันดีกว่า:
function addKeyFrame(){ var ulObj = $(#roll ul), //Get the ul object length = $(#roll li).length, // Get the li array length per = 100 / (length / 2 * 2 ) ; / /คำนวณเปอร์เซ็นต์ของช่วงกลาง//ต่อสตริง var keyframes = `/ @keyframes ani{`; for(var i = 0; i<=length; i++){ keyframes+=`${i * ต่อ}%{ ระยะขอบด้านบน: ${i % 2 == 0 ? -i * 20 : -(i - 1) * 20}px; }`; } var liFirst = $(#roll li:first), //รับองค์ประกอบแรก liSec = liFirst.next(); // รับองค์ประกอบที่สอง ulObj.append(liFirst.clone()).append(liSec.clone()); // ใส่องค์ประกอบทั้งสองลงใน ul $(<style>).attr(type,text/ css) html(keyframes).appendTo($(head)); //สร้างแท็กสไตล์เพื่อแทรกคีย์เฟรมลงในส่วนหัว ulObj.css(animation,ani 5s linear infinite); //เพิ่มภาพเคลื่อนไหว css3 ให้กับ ul} addKeyFrame(); 3. การใช้งาน zepto+transitionZepto ทางฝั่งมือถือไม่มีฟังก์ชั่นภาพเคลื่อนไหว หากคุณไม่ได้ใช้แอตทริบิวต์ CSS3 คุณจะเขียนมันใน JS ได้อย่างไร
var timer,top;function roll(){ var ulObj = $(#roll).find(ul), length = $(#roll li).length, liFirst = $(#roll).find(li:first); liSec = liFirst.next(); ulObj.ผนวก(liFirst.clone()).ผนวก(liSec.clone()); //เพิ่มตัวแรกและตัวที่สองลงในแท็ก <ul> clearInterval(timer); timer = setInterval(function(){ //ตั้งค่าตัวจับเวลา var top = ulObj.css(margin-top); top = + top.slice( 0,-2); if(top != -(20 * length)){ // รับความสูงปัจจุบัน หากไม่ได้อยู่ท้ายสุด ให้เลื่อนขึ้นไปด้านบน -= 40; ulObj.css({-webkit-transition:all 1s,transition:all 1s,margin-top:top}); }else{ //หากถึงจุดสิ้นสุด มันจะไปถึงศูนย์ด้านบนอย่างรวดเร็ว = 0; {-webkit- transition:none,transition:none,margin-top:top}); setTimeout(ฟังก์ชั่น(){ //เพิ่มดีเลย์ที่นี่ และควรดำเนินการที่ส่วนท้ายของคิว เพื่อหลีกเลี่ยงไม่ให้แอนิเมชั่นทั้งสองมารวมกันที่ด้านบน -= 40; ulObj.css({-webkit-transition:all 1s,transition:all 1s, ขอบด้านบน :top}); },0) } },2000);}roll();หากมีวิธีอื่นจะนำมาปรับปรุงเป็นครั้งคราวในครั้งต่อไป แต่สำหรับมือถือก็น่าจะเพียงพอแล้ว
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network