วันนี้ฉันได้เข้ารหัสเอฟเฟกต์พิเศษอีกสองรายการ: หนึ่งทำด้วยอินพุตดั้งเดิม [type = range] และอื่น ๆ ได้รับการปรับแต่งอย่างสมบูรณ์; ต่อไปนี้เป็นรหัสที่สมบูรณ์และการสาธิต:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <style> #tip {ตำแหน่ง: Absolute; ด้านบน: 30px; ซ้าย: 0; ขวา: 0; ความกว้าง: 200px; ความสูง: 160px; มาร์จิ้น: อัตโนมัติ; เส้นขอบ: 1px ของแข็งสีเทา; พื้นหลังสี: ข้าวโพด; } #tip div {ตำแหน่ง: ญาติ; ความกว้าง: 100%; ความสูง: 80px; ขอบด้านล่าง: 1px Solid Grey; } .out {ตำแหน่ง: ญาติ; ซ้าย: 16%; แสดง: Inline-Block; ชายแดน: 2px Solid Royalblue; ระยะขอบด้านบน: 20px; ความกว้าง: 130px; ความสูง: 20px; พื้นหลังสี: Lightgoldenrodyellow; } .in {display: block; ความสูง: 20px; ความสูงของสาย: 20px; TEXT-ALIGING: ถูกต้อง; สี: สีขาว; ความกว้าง: 50%; ภาพพื้นหลัง-ภาพ: linear-gradient (ไปทางขวา, powderblue 0%,#336699 50%, สีแดง 0px 1px rgba (0, 0, 0, 0, 0, 0, 0, inset, 0px 1px RGBA (0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 RGBA (0, 0, 0, 0, 0, สิ่งที่ใส่เข้าไป, 0PX 1PX RGBA (0, 0, 0, 0, 0, 0, สิ่งที่ใส่เข้าไป, 0PX 1PX RGBA (0, 0, 0, 0, 0, 0.6) ภาพพื้นหลัง: LightSkyBlue; Border-Radius: 15px; ไม่มีความสูง: 15px; -moz-box-shadow: 0 -1px 1px Inset; Radius Border: 0 5px 5px 0; ฟังก์ชั่น () {// native component range inner = document.getElementById ('inner1'); inner.innerhtml = range.value; Document.getElementById ('BTN2'); ค่า-inner2.innerhtml = ค่า; Cleartiens (id)}; ฟังก์ชัน () {id1 = settimeout (ฟังก์ชั่นการเปลี่ยนแปลง () {ถ้า (ค่า <100) {value ++; inner2.innerhtml = value; inner2.style.width = value * a+'px'; id = settimeout btn2.onmouseup = function () {ClearTimeOut (ID1); <div> <span id = "outer1"> <span id = "inner1"> 50 </span> </span> <อินพุต id = "ช่วง" type = "ช่วง" min = "0" max = "100" step = "1" value = "50"> </div> <div id = "d2"> <อินพุต id = "btn1" id = "inner2"> 50 </span> </span> <อินพุต id = "btn2" type = "button" value = ">"> </div> กดปุ่มค้างไว้เป็นเวลา 0.5 วินาทีและจะเปลี่ยนไป!การใช้งานครั้งแรกนั้นง่ายมากดังนั้นฉันจะไม่อธิบายอ่านรหัสด้วยตัวเอง
ที่นี่เราแนะนำการใช้งานตัวอย่างที่สองเป็นหลัก:
เมื่อเราเห็นข้อกำหนดหรือเอฟเฟกต์พิเศษของผู้อื่นอย่ารีบเร่งที่จะเห็นรหัสของคนอื่น ก่อนอื่นคิดเกี่ยวกับมันคุณควรบรรลุมันอย่างไร? นำความคิดของคุณออกไปก่อน
หลักการดำเนินการของเอฟเฟกต์พิเศษนี้:
1. ทำรังอยู่ในช่วง
•ช่วงนอก: เพียงแสดงความกว้างความสูงชายแดนไม่มีพื้นหลัง
•ขยายภายใน: ความสูงเหมือนกับด้านนอกความกว้างคือ 50% โดยค่าเริ่มต้น ก่อนอื่นให้ตั้งค่าสีพื้นหลังเป็นการไล่ระดับสีเชิงเส้น
2. เหตุการณ์ onclick ของปุ่มค่อนข้างง่าย คลิกเพื่อเปลี่ยนความกว้างของช่วงภายในและแสดงหมายเลข
3. เมื่อปุ่ม OnMousedown เริ่มจับเวลาและเรียกใช้ฟังก์ชั่นการเปลี่ยนฟังก์ชั่นหลังจาก 500ms ฟังก์ชั่นการเปลี่ยนแปลงเป็นฟังก์ชั่นที่โทรกลับมาพร้อมกับ settimeout มันจะโทรกลับหนึ่งครั้งโดยไม่มี 16.7ms เพื่อให้ได้เอฟเฟกต์ภาพเคลื่อนไหว
การวิเคราะห์ความยาก:
1. ประโยคนี้ var a = parsefloat (window.getComputedStyle (OUTER2, NULL) .Width)/100;
ใช้เพื่อรับค่าเริ่มต้นถ้าคุณใช้ outer2.style.width
แน่นอนว่ามันไม่คุ้มค่าแน่นอนว่าคุณสามารถตั้งค่าคงที่ได้เช่นที่นี่สามารถตั้งค่าเป็น
var a = 1.3
โปรดทราบว่าไม่รองรับวิธี getComputedStyle ภายใต้ IE9
วัตถุองค์ประกอบของ IE มีคุณสมบัติ CurrentStyle;
2. ประโยคนี้
btn1.onmouseup = function () {ClearTimeOut (ID1);
ClearTimeOut (ID)};
มันสำคัญมาก หากไม่มีมัน OnMosedown จะถูกเรียกใช้ก่อนที่จะถูกเรียกใช้ OnClick หลังจาก 500ms มันจะเริ่มดำเนินการแล้วตัวจับเวลาด้านนอกจะถูกดำเนินการ;
3. ไม่มีอะไรยาก
ตัวอย่างนี้จะขยายไปยังแอปพลิเคชันอื่น ๆ อีกมากมายเช่นแทนที่จอแสดงผลกลางด้วยบทความรูปภาพ ฯลฯ จากนั้นแทนที่ปุ่มด้วยปุ่มที่กำหนดเองเอฟเฟกต์จะเย็น!
หากคุณคิดว่าฉันมีสิ่งที่ไม่ดีเกี่ยวกับการเขียนโปรดชี้ให้เห็น!
ตัวอย่างง่าย ๆ ข้างต้นของการต่อสู้เชิงปฏิบัติ JavaScript (ช่วงดั้งเดิมและเอฟเฟกต์พิเศษที่กำหนดเอง) เป็นเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น