คำนำ: สองวันที่ผ่านมาฉันกำลังมองหาส่วนประกอบออนไลน์และค้นพบ "องค์ประกอบ slotmachine" ของเอฟเฟกต์คอนโซลเกมในวัยเด็กของเราโดยไม่ตั้งใจ หลังจากเรียกดูมันทำให้เกิดความทรงจำในวัยเด็กของฉัน
มาลองดูองค์ประกอบที่มีมนต์ขลัง - slotmachine
1. ตัวอย่างส่วนประกอบ
มารับเอฟเฟกต์ง่ายๆก่อน
คิดว่ามันง่ายเกินไป? ไม่ต้องกังวลการแสดงที่ดีกำลังจะมาลองเสี่ยงโชคก่อน
อะไร ยังไม่บรรลุผลที่ต้องการดี! ด้านล่างเอฟเฟกต์จริงจะถูกปล่อยออกมา
ฉันคลิกเป็นเวลานาน แต่ฉันไม่ได้รับรางวัล ไม่น่าแปลกใจที่ฉันไม่สามารถชนะได้เมื่อฉันยังเป็นเด็ก ฉันไม่เชื่อในความชั่วร้ายคลิกต่อไปและเริ่มต้นและในที่สุดก็ได้รับรางวัลหนึ่งครั้ง มันไม่ใช่เรื่องง่ายจริงๆ
และผลการจับสลากสิ้นปีของเราเริ่มต้น! หยุด!
2. ตัวอย่างรหัส
เนื่องจากเป็นองค์ประกอบ JS คุณต้องดาวน์โหลดไลบรารีส่วนประกอบก่อน โพสต์แรกที่อยู่โอเพ่นซอร์ส
แล้วลองดูที่การอ้างอิงของไฟล์:
การคัดลอกรหัสมีดังนี้: <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity = "sha384-1q8mtjoasx8j1au+a5wdvnpi2lkffwweaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<link href = "~/content/jQuery-slotmachine-master/dist/jQuery.slotmachine.css" rel = "stylesheet"/>>>>
<link href = "~/content/jQuery-slotmachine-master/css/style.css" rel = "Stylesheet"/>
<link href = "~/content/toastr/toast.min.css" rel = "stylesheet"/>
<script type = "text/javascript" src = "// code.jquery.com/jquery-2.1.1.min.js"> </script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity = "sha384-0msbjdehialfmubbqp6a4qrq5ovfw3720prrcremprq crossorigin = "anonymous"> </script>
<script src = "~/content/jQuery-slotmachine-master/dist/jQuery.slotmachine.js"> </script>
<script src = "~/content/toastr/toast.min.js"> </script>
ควรทราบสองสามจุดที่นี่:
1) อ้างถึง jQuery และ bootstrap ทั้งคู่อ้างอิงผ่านการเร่งความเร็ว CDN หากคุณไม่เข้าใจการเร่งความเร็วของ CDN คุณสามารถ Baidu ได้
2) องค์ประกอบ jQuery จะต้องได้รับการสนับสนุนโดย jQuery 2.0 ขึ้นไป หากเวอร์ชันต่ำเกินไปจะมีข้อยกเว้น JS
3) ไม่จำเป็นต้องใช้ส่วนประกอบ bootstrap แต่เลย์เอาต์นี้ต้องการการรองรับสไตล์ bootstrap
4) ไม่จำเป็นต้องใช้ส่วนประกอบ TOAST ใช้เพื่อแสดงผลลัพธ์ที่ชนะที่นี่
1. ลองใช้รหัสเอฟเฟกต์โชค
ส่วน HTML
<div id = "triky"> <div style = "text-allign: center"> <h1> โปรดเลือกอาหารที่คุณต้องการ </h1> <div> <div style = "margin: auto;"> <div id = "triky1"> <div> <img src = "/เนื้อหา src = "/content/jQuery-slotmachine-master/img/food2.jpg"/> </div> <div> <img src = "/เนื้อหา/jQuery-slotmachine-master/img/food2.jpg"/> </div> </div> </div> <div> <div style = "margin-left: -15px" role = "group"> <div id = "trikyshuffle" type = "ปุ่ม"> ลองโชค </div> </div> </div> </div> </div>
ส่วน JS
$ (function () {// ลองโชค var triky = $ ("#triky1") slotmachine ({active: 2, // ดัชนีของรายการที่แสดงในระหว่างการเริ่มต้น // การหน่วงเวลา: 150, // สลับช่วงเวลาระหว่างสองภาพ $ ("#trikyshuffle") คลิก (ฟังก์ชั่น () {triky.shuffle (8); // เริ่มวิธีการหมุนพารามิเตอร์ 8 หมายถึงไอคอน 8 รายการถูกข้ามการหมุนแต่ละครั้ง});});คำอธิบายโดยละเอียดเกี่ยวกับคุณสมบัติ JS ทั่วไปวิธีการและเหตุการณ์
(1) วิธีการเริ่มต้นเครื่อง var machine = $ ("#id"). slotmachine ({}); ส่งคืนวัตถุที่หมุนอยู่ในปัจจุบัน ตัวอย่างเช่นพารามิเตอร์เริ่มต้นจะถูกส่งผ่านในวิธี slotmachine () ตัวอย่างเช่น
ใช้งาน: ระบุดัชนีของรายการที่แสดงในระหว่างการเริ่มต้นเริ่มต้นจาก 0
ล่าช้า: สลับช่วงเวลาระหว่างสองภาพ (หน่วยมิลลิวินาที)
อัตโนมัติ: ไม่ว่าจะหมุนโดยอัตโนมัติค่าเป็นจริงหรือเท็จ
สปิน: เมื่ออัตโนมัติเป็นจริงนี่คือจำนวนไอคอนที่ข้ามในแต่ละครั้ง
stophiddid: ไม่ว่าภาพเคลื่อนไหวที่จุดเริ่มต้นและหยุดจะเกิดขึ้นเมื่อภาพเคลื่อนไหวเกิดขึ้น
สุ่ม: ฟังก์ชัน (activeElementIndex) {} คุณสมบัตินี้แสดงถึงดัชนีของค่าที่เลือกหลังจากการหมุนแต่ละครั้ง (เริ่มต้นจาก 0)
ทิศทาง: ทิศทางของภาพเคลื่อนไหวค่า (ขึ้น || ลง)
(2) วิธีการทั่วไป
machine.shuffle (ทำซ้ำ onstopcallback); ระบุจุดเริ่มต้นของการหมุนซ้ำระบุจำนวนรูปภาพที่ข้ามในแต่ละครั้ง OnstopCallback ระบุวิธีการโทรกลับเหตุการณ์หลังจากหยุดการหมุน
machine.prev (); ส่งคืนองค์ประกอบก่อนหน้า
machine.next (); ส่งคืนองค์ประกอบถัดไป
machine.top (); หยุดการหมุน
Machine.active; รับดัชนีขององค์ประกอบที่เลือก
Machine.running; ตรวจพบว่ามันหมุนจริงหรือไม่หมายถึงการหมุน
Machine. Stepot; ตรวจพบว่ามันหยุดลงหรือไม่
machine.destroy (); ทำลายโหนดการหมุน
2. ตัวอย่างรหัสเอฟเฟกต์คอนโซลเกมง่ายๆ
ส่วน HTML
<div id = "randomize"> <div style = "text-allign: center; max-width: 900px;"> <h1> เกมคอนโซลง่ายๆ </h1> <div> <div> <div> <div> <div id = "Machine1"> <div> src = "/content/jQuery-slotmachine-master/img/slot2.png"/> </div> <div> <img src = "/content/jQuery-slotmachine-master/img/slot3.png"/> </div> /> </div> <div> <img src = "/content/jQuery-slotmachine-master/img/slot5.png"/> </div> <div> <img src = "/content/jQuery-slotmachine-master/img/slot6.png"/>> <div> <img src = "/content/jQuery-slotmachine-master/img/slot1.png"/> </div> <div> <img src = "/content/jQuery-Slotmachine-Master/IMG/Slot2.png"/> src = "/content/jQuery-slotmachine-master/img/slot3.png"/> </div> <div> <img src = "/เนื้อหา/jQuery-slotmachine-master/img/slot4.png"/> </div> /> </div> <div> <img src = "/content/jQuery-slotmachine-master/img/slot5.png"/> </div> <div> <img src = "/content/jQuery-slotmachine-master/img/slot6.png"/>> <div> <img src = "/content/jQuery-slotmachine-master/img/slot1.png"/> </div> <div> <img src = "/content/jQuery-Slotmachine-Master/IMG/Slot2.png"/> src = "/content/jQuery-slotmachine-master/img/slot3.png"/> </div> <div> <img src = "/เนื้อหา/jQuery-slotmachine-master/img/slot4.png"/> </div> /> </div> <div> <img src = "/content/jQuery-slotmachine-master/img/slot6.png"/> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
ส่วน JS
$ (function () {// เกมคอนโซลแบบง่าย var machine1 = $ ("#machine1"). slotmachine ({active: 0, delay: 500}); var machine2 = $ ("#machine2"). slotmachine ({active: 1, ล่าช้า: 500, ทิศทาง: 'down'}); var = []; arr [1] || arr [0] == arr [2] || oncomplete);3. ตัวอย่างรหัสเอฟเฟกต์หยุดเดี่ยว
ส่วน HTML
<div id = "casino" style = "padding-top: 50px;"> <div> <h1> Raffle </h1> <div> <div id = "casino1" style = "margin-left: -65px;"> <div> </div> <div> </div> <div> </div> <div> </div> </div> </div> </div> </div> <div> </div> </div> </div> </div> </div> </div> </div> </div> id = "slotmachineButtonStop" type = "ปุ่ม"> หยุด </div> </div> </div> </div> </div> </div> </div> </div>
ส่วน JS
$ (function () {// single stop var machine4 = $ ("#casino1"). slotmachine ({active: 0, ล่าช้า: 500}); var machine5 = $ ("#casino2"). slotmachine ({active: 1, delay: 550}); machine6 = $ ("#casino3") $ ("#slotmachineButtonshuffle") คลิก (ฟังก์ชั่น () {เริ่มต้น = 3; machine4.shuffle (); machine5.shuffle (); machine6.shuffle ();}); Machine6.Stop ();3. สรุป
กระบวนการทั้งหมดไม่ซับซ้อน คุณสมบัติเหตุการณ์และวิธีการทั้งหมดสามารถเข้าใจและนำไปใช้ได้อย่างง่ายดายโดยการอ่านเอกสาร ไม่มีอะไรจะพูดเกี่ยวกับรหัสสาธิต คุณสามารถเข้าใจได้อย่างรวดเร็วก่อน ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้องค์ประกอบ JavaScript