คำแถลง: การสาธิตขึ้นอยู่กับสถาบันการฝึกอบรมและรู้สึกขอบคุณมากสำหรับโครงสร้างการฝึกอบรมนี้ หากไม่มีความกังวลใจเพิ่มเติมตอนนี้เราจะเริ่มเปลี่ยนการผลิตการสาธิต
ก่อนอื่นในกระบวนการเรียนรู้ส่วนหน้าภาพม้าหมุนเป็นสิ่งที่เราต้องเรียนรู้ดังนั้นเพื่อที่จะนำภาพม้าหมุนที่หลากหลายมาใช้อย่างมีประสิทธิภาพมากขึ้นกรอบการเคลื่อนไหวจะถูกห่อหุ้ม
ฟังก์ชั่น getStyle (obj, attr) {ถ้า (obj.currentstyle) {return obj.currentstyle [attr]; // เพื่อให้ได้ค่าแอตทริบิวต์ภายใต้ IE} else {return window.getComputeStyle (obj, null) ClearInterval (obj.timer); obj.timer = setInterval (function () {var flag = true; var current = 0; สำหรับ (var attr ใน json) {ถ้า (attr == 'opacity') {current = parseint (getStyle (obj, attr)*100); Math.Ceil (ขั้นตอน): Math.Floor (ขั้นตอน); ขั้นตอน) + ')'; ClearInterval (obj.timer);}}, 5);}เฟรมเวิร์กนี้เข้ากันได้กับเบราว์เซอร์ที่แตกต่างกันและอนุญาตให้มีคุณสมบัติเช่นความทึบและดัชนี Z ที่จะส่งผ่านแน่นอนคุณสมบัติทั่วไปเช่นความกว้างความสูงซ้ายซ้ายขวาเป็นสิ่งจำเป็น ด้วยกรอบนี้คุณสามารถได้ผลลัพธ์ที่ยอดเยี่ยม ดังนั้นตอนนี้เราเริ่มทำการสาธิตอย่างเป็นทางการ
ขั้นแรกการผลิตของ index.html
<div id = "box"> <ul> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> </ul>
การผลิต index.html นั้นง่ายมาก เราจะแทรกภาพเป็นภาพพื้นหลังของ Li ใน JavaScript หลังจากนั้นเราปรับสไตล์ CSS
*{มาร์จิ้น: 0px; Padding: 0px; } #Box {WIDTH: 1300PX; ความสูง: 400px; มาร์จิ้น: 100px auto; ล้น: ซ่อน; } #box ul {ความสูง: 400px; ความกว้าง: 1300px; } #box ul li {width: 240px; ความสูง: 400px; ลอย: ซ้าย; ล้น: ซ่อน; -รหัสสำหรับ JavaScript มีดังนี้:
window.onload = function () {var box = document.getElementById ('box'); var Ali = box.children [0]. เด็ก; สำหรับ (var i = 0; i <ali.length; i ++) {Ali [i] .style.backgroundroundrounte = 'url (' + 'images/' + (i + 1) + '.jpg'; ali [i] .onmouseover = function () {สำหรับ (var i = 0; Animate (นี่, {width: 800});};ด้วยวิธีนี้การสาธิตผล Bellows Effect ที่ใช้โดยใช้ JS พื้นเมืองจะรับรู้ แน่นอนว่าเฟรมเวิร์กที่มีการห่อหุ้มห่อหุ้มสามารถใช้เพื่อให้ได้ผลการหมุนเวียนคล้ายกับ NetEase
บทความข้างต้นคือการสาธิตสไตล์ Bellows ที่ใช้กรอบกีฬา (รหัสตัวอย่าง) และห่อหุ้มกรอบกีฬา (รหัสตัวอย่าง) ซึ่งเป็นเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น