تحقيق تأثير قفز الألوان للعجلة التسلسلية باستخدام JavaScript

النتيجة كما يلي:

الشكل (1) قبل الفتح

الشكل (2) بعد الفتح

كود التالي:

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <style>
  *{ margin: 0; padding: 0; }
  .panel {
 width: 555px;
 height: auto;
 background-color: #333333;
 margin: 50px auto;
  }
  .panel-title {
  width: 100%;
  height: 68px;
  text-align: center;
  font: 600 18px/68px '微软雅黑';
  color: #fff;
  cursor: pointer;
  }
  .collapse {
  width: 100%;
  height: 0;
  background-color: #167EA0;
  overflow: hidden;
  }
  .collapse p {
  color: #fff;
  font: 500 16px '微软雅黑'; 
  text-indent: 2em; 
  padding: 20px 20px 0 20px;
  }
  #One,#Tow,#Three{
  border-top: solid 1px #ccc;
  }
 </style>
 </head>
 <body>
 <div class="panel" id="panel">
 <h4 class="panel-title" id="panel-title">1 《抉择》</h4>
 <div class="collapse" id = "One"><p></p></div>
 <h4 class="panel-title" id="panel-title">2 《生命》</h4>
 <div class = "collapse" id="Tow"><p></p></div>
 <h4 class="panel-title" id="panel-title">3 《大小》</h4>
 <div class = "collapse" id="Three"><p></p></div>
 <h4 class="panel-title" id="panel-title">4 《العبادة》</h4>
 <div class = "collapse" id="Four"><p></p></div>
 </div>
 </body>
 <script>
 function animate(obj, json, endFn){
 // إغلاق جهاز التوقيت السابق
 clearInterval(obj.timer); 
 // إدارة جهاز التوقيت
 obj.timer = setInterval(function(){
 // مفتاح جهاز التوقيت، يستخدم لتحديد ما إذا كان جهاز التوقيت يعمل أم لا
 var flag = true;
 // مرور عبر json 
 for(var arrt in json){
 // حساب الخطوة الخطوة = موقع الهدف - موقع الحالي
 var step = (json[arrt] - parseInt(getStyle(obj, arrt))) / 5;
 // طول الخطوة
 step = step > 0 ? Math.ceil(step) : Math.floor(step);
 // تحريك الصندوق: موقع الصندوق الحالي + طول الخطوة
 obj.style[arrt] = parseInt(getStyle(obj, arrt)) + step + 'px';
 // إذا لم يكن أي منها يتوافق مع الشروط، فإنه لا يتوقف عن تشغيل جهاز التوقيت
 if(parseInt(getStyle(obj, arrt)) != json[arrt]){
 flag = false;
 }  
 }
 // إغلاق جهاز التوقيت
 if(flag){
 clearInterval(obj.timer);
 // تنفيذ دالة الاستدعاء بعد 2 ثانية
 setTimeout(function(){
 // تحقق من وجود دالة استدعاء، إذا كانت endFn موجودة، فتنفيذ دالة الاستدعاء
 endFn && endFn();
 }, 1000); 
 }
 }, 20);
 } 
 // الحصول على النمط الحالي
 function getStyle(obj, arrt){
 // تنسيق ie
 return obj.currentStyle ? obj.currentStyle[arrt] : getComputedStyle(obj, null)[arrt];
 }
 var panel = document.getElementById("panel");
 var oH = panel.getElementsByTagName('h4');
 var oDiv = panel.getElementsByTagName('div'); 
 حياة الإنسان غالباً ما تكون في حالة اختيار، مثل: أي جامعة يجب أن أذهب إليها؟ أي مهنة يجب أن أختارها؟ أي امرأة يجب أن أتزوجها؟...إلخ أمور تؤلم العقل. وجود أو عدم وجود قوة الاختيار يمكن أن يظهر ما إذا كان الشخص ناضج أم لا. ولكن من لا يملك رأياً مستقلاً، لا يتعذب بسبب الاختيار. لأنه عندما يأتي وقت اتخاذ القرار، يطلب دائمًا من الآخرين قولهم: 'ها، كيف تعتقد أن يجب أن نفعل؟' دائمًا ما يكون الأشخاص الذين يحققون نجاحات كبيرة من الذين لديهم قوة اختيار قوية. يفهمون أن نجاح أو فشل الأمور يعتمد على أن لا يوجد شخص يمكن أن يفعل ذلك نيابة عنهم، ولا أحد يمكن أن يقرر نيابة عنك. في لحظة الاختيار، يظهر نجاح أو فشل بالفعل. الحياة، ربما تكون العنصر الوحيد في الكون الذي يجب أن يتم تعظيمه. عملية الحمل والولادة وعرض الجوهر هي عملية مثيرة جدًا. الحياة مثل الموسيقى والصور تحمل بصمت نغمات محتومة أو ألوان دموية، عندما تُهاجم بالذبائح الكبيرة، عندما تسمع صوت الحافلات، تتحرك فجأة، تظهر جمالها وجلاءها. بالطبع، هذا الجوهر قد يكون قذراً وهرماً ومللاً؛ لا يوجد للمالك خيار. يجب أن نعترف بأن الحياة هي الأمل. يجب أن نقول أن لا يجب أن يتعجب الأشرار والسفلة وأنهم لم ينجحوا في القضاء على العظمة والنقاء. لا يمكن أن يستمر التمثيل أيضًا، لأن الوقت مثل نهر يتدفق بلا توقف، لا يمكن للأشرار والتجار والسفلة أن يرتديوا القبعات التعليمية والشعراء والجنود إلى الأبد. في نهاية حياتهم السعيدة، سيشعر أبناؤهم بالخزي على الدوام.
 for(var i = 0;i<oH.length;i++){
 oH[i].index = i;
 oH[i].onclick = function(){
 for(var j = 0;j<oH.length; j++){
 animate(oDiv[j],{height:0});
 }
 if(parseInt(getStyle(oDiv[this.index],'height')) == 0){
 animate(oDiv[this.index],{height:210}); 
 oDiv[this.index].children[0].innerHTML = str[this.index]; 
 }
 animate(oDiv[this.index],{height:0});
 }
 }
 } 
 </script>
</html>

هذا هو نهاية محتوى هذا المقال، نأمل أن يكون محتوى هذا المقال قد ساعدكم في التعلم أو العمل، ونأمل أيضًا أن تدعموا دليل النطق!

بيان: محتوى هذا المقال تم جمعه من الإنترنت، ويتمتع ملكية حقوق الطبع والنشر للمالك الأصلي، ويتم جمعه من قبل المستخدمين على الإنترنت بشكل متعاوني ويتم تحميله بشكل مستقل، لا يمتلك هذا الموقع حقوق الملكية، ولا يتم تعديل المحتوى بشكل يدوي، ولا يتحمل أي مسؤولية قانونية مرتبطة بذلك. إذا كنت قد وجدت محتوى يشتبه في حقوق الطبع والنشر، فيرجى إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال '#' ب '@') لإبلاغنا، وقدم الدليل على الدليل، وسيتم حذف المحتوى المزعوم فور التحقق منه.

تعليمية الأساس

من المحتمل أن تفضل