المقدمة: قبل يومين ، كنت أبحث عن مكونات عبر الإنترنت واكتشفت بطريق الخطأ "مكون Slotmachine" لتأثير وحدة التحكم في طفولتنا. بعد تصفحها ، يثير ذكريات طفولتي.
دعنا نأخذك لإلقاء نظرة على هذا المكون السحري - Slotmachine.
1. معاينة المكون
دعنا نحصل على تأثير بسيط أولاً
هل تعتقد أنه بسيط للغاية؟ لا تقلق ، العرض الجيد قادم ، جرب حظك أولاً.
ماذا؟ عدم تحقيق التأثير المطلوب حتى الآن ، جيد! أدناه ، سيتم إصدار التأثير الحقيقي.
لقد نقرت لفترة طويلة ، لكنني لم أفوز بالجائزة. لا عجب أنني لم أستطع الفوز عندما كنت طفلاً. لا أؤمن بالشر ، وأستمر في النقر والبدء ، وفزت أخيرًا بالجائزة مرة واحدة. الأمر ليس بالأمر السهل حقًا.
ونتائج اليانصيب في نهاية العام ، ابدأ! قف!
2. أمثلة رمز
نظرًا لأنه مكون JS ، يجب عليك أولاً تنزيل مكتبة المكون. أول نشر عنوان المصدر المفتوح
ثم دعونا نلقي نظرة على مرجع الملف:
نسخة الكود كما يلي: <Link Rel = "STYLESHEET" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/boostrap.min.css" النزاهة = "sha384-1q8mtjoasx8j1au+a5wdvnpi2lkffweaa8hdddjzlplegxhjvme1fgjwpgmkzs7" crossorigin = "مجهول">
<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/toastr.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 crossorigin = "مجهول"> </script>
<script src = "~/content/jQuery-slotmachine-master/dist/jQuery.slotmachine.js"> </script>
<script src = "~/content/toastr/toastr.min.js"> </script>
بضع نقاط يجب ملاحظتها هنا:
1) يقتبس jQuery و Bootstrap يتم الرجوع إلى كلاهما من خلال تسارع CDN. إذا كنت لا تفهم تسارع CDN ، فيمكنك Baidu.
2) يجب دعم مكون jQuery بواسطة JQuery 2.0 أو أعلى. إذا كان الإصدار منخفضًا جدًا ، فستكون هناك استثناءات JS.
3) مكون bootstrap ليس ضروريًا ، لكن هذا التصميم يتطلب بعض دعم نمط bootstrap.
4) مكون toastr ليس ضروريًا ، يتم استخدامه لعرض النتائج الفائزة هنا.
1. جرب رمز تأثير الحظ
جزء HTML
<div id = "triky"> <div style = "text-align: center"> <h1> الرجاء تحديد الطعام الذي تريده </h1> <viv> <div style = "margin: auto ؛ src = "/content/jquery-slotmachine-master/img/food2.jpg"/> </viv> <viv> <img src = "/content/jQuery-slotmachine-master/img/food2.jpg"/>/div> <div> </viv> <viv> <div style = "margin-left: -15px" rol = "group"> <div id = "trikyshuffle" type = "button"
JS جزء
$ (function () {// جرب Luck var triky = $ ("#triky1"). Slotmachine ({نشط: 2 ، // فهرس العنصر المعروض أثناء التهيئة // التأخير: 150 ، // تبديل وقت الفاصل الزمني بين اثنين من الصور (millisecond الوحدات) // glydize: function () {// return 0 ؛ $ ("#trikyshuffle").شرح مفصل لخصائص وطرق وأحداث JS المشتركة
(1) طريقة التهيئة var machine = $ ("#id"). slotmachine ({}) ؛ إرجاع الكائن المدور حاليا. يتم تمرير المعلمات المهيئة في طريقة slotmachine () ، على سبيل المثال
نشط: يشير إلى فهرس العنصر المعروض أثناء التهيئة ، بدءًا من 0
التأخير: قم بتبديل وقت الفاصل بين صورتين (وحدات ميلي ثانية)
السيارات: سواء للتدوير تلقائيًا ، تكون القيمة صحيحة أو خاطئة
يدور: عندما يكون السيارات صحيحًا ، هذا هو عدد الرموز التي يتم تخطيها في كل مرة
Stophidden: ما إذا كانت الرسوم المتحركة في البداية والإيقاف تحدث عند حدوث الرسوم المتحركة
عشوائي: الوظيفة (ActiveElementIndex) {} تمثل هذه الخاصية فهرس القيمة المحددة بعد كل دوران (بدءًا من 0)
الاتجاه: اتجاه الرسوم المتحركة ، القيمة (لأعلى || لأسفل)
(2) الطرق المشتركة
machine.shuffle (كرر ، onstopcallback) ؛ يشير إلى بداية الدوران ، يشير التكرار إلى عدد الصور التي تخطي في كل مرة ؛ يشير OnStopCallback إلى طريقة رد اتصال الحدث بعد توقف الدوران.
machine.prev () ؛ يعيد العنصر السابق
machine.next () ؛ يعيد العنصر التالي
machine.stop () ؛ توقف عن الدوران
آلة. يحصل على فهرس العنصر المحدد
الآلة. يكتشف ما إذا كانت تدور ، صحيح أنها تدور
آلة. اكتشف ما إذا كان قد توقف
machine.destroy () ؛ يدمر عقدة الدوران
2. مثال رمز تأثير وحدة التحكم في اللعبة البسيطة
جزء HTML
<div id = "randomize"> <div style = "text-align: center ؛ max-width: 900px ؛"> <h1> وحدة التحكم في اللعبة البسيطة </h1> <viv> <viv> <viv> <viv> <div id = "machine1"> <div> <img src = "content/jquery-slotmachine/img src = "/content/jQuery-slotmachine-master/img/slot2 /> </viv> <viv> <img src = "/content/jQuery-slotmachine-master/img/slot5.png"/> </viv> <viv> <img src = "/content/jQuery-slotmachine-master/img/slot6.png"/> <viv> <img src = "/content/jquery-slotmachine-master/img/slot1.png"/> </viv> <viv> <img src = "/content/jQuery-slotmachine master/img/slot2 src = "/content/jquery-slotmachine-master/img/slot3.png"/> </viv> <viv> <img src = "/content/jQuery-slotmachine-master/img/slotm4png"/> </div> <fiv> /> </viv> <viv> <img src = "/content/jquery-slotmachine-master/img/slot5.png"/> </viv> <viv> <img src = "/content/jQuery-slotmachine-master/img/slot6.png"/> <viv> <img src = "/content/jquery-slotmachine-master/img/slot1.png"/> </viv> <viv> <img src = "/content/jQuery-slotmachine master/img/slot2 src = "/content/jquery-slotmachine-master/img/slot3.png"/> </viv> <viv> <img src = "/content/jQuery-slotmachine-master/img/slotm4png"/> </div> <fiv> /> </viv> <viv> <img src = "/content/jquery-slotmachine-master/img/slot6.png"/> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> <div> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv>
JS جزء
$ (function () {// console console simple machine1 = $ ("#machine1"). slotmachine ({Active: 0 ، Delay: 500}) ؛ var machine2 = $ ("#machine2"). slotmachine ({active: 1 ، delay: develief: 'down'}) ؛ var machine3 = $ ( var arr = [] ARR [1] onComplete) ؛3. مثال رمز تأثير التوقف الفردي
جزء HTML
<div id = "casino" style = "padding-top: 50px ؛"> <viv> <h1> raffle </h1> <viv> <div id = "casino1" style = "margin-left: -65px ؛ <viv> </viv> <viv> </viv> <viv> </viv> <viv> </viv> <viv> </viv> <viv> </viv> <viv> </viv> <viv> </viv> <viv> </viv> </div> <div rob = "group"> <div id = اكتب = "زر"> توقف </div> </viv> </viv> </viv> </viv> <viv> </viv> </viv>
JS جزء
$ (function () {// single stop var machine4 = $ ("#casino1"). slotmachine ({نشط: 0 ، التأخير: 500}) ؛ var machine5 = $ ("#casino2"). slotmachine ({active: 1 ، delay: 550}) ؛ machine6 = $ ( $ ("#slotmachineButtonshuffle"). انقر فوق () {stem = 3 ؛ machine4.shuffle () ؛ machine5.shuffle () ؛ machine6.shuffle () ؛}) ؛ Machine6. stop () ؛3. ملخص
العملية برمتها ليست معقدة. يمكن فهم جميع الخصائص والأحداث والأساليب وتطبيقها بسهولة من خلال قراءة الوثائق. لا يوجد ما يقوله عن رمز العرض. يمكنك فهمها للوهلة الأولى. آمل أن يكون من المفيد للجميع أن يتعلموا مكونات JavaScript.