بالنسبة لمطوري موقع الويب ، فإن إضافة تأثير انزلاق أو كاروسيل إلى محتوى العرض هو حاجة شائعة للغاية. هناك الكثير من المكونات الإضافية المدفوعة والمجانية. يقدم الكثير منهم الكثير من خيارات التكوين المفيدة والتأثيرات الديناميكية.
في كثير من الأحيان ، إذا كان مشروعك يحتاج إلى كاروسيل خفيف الوزن ، فهذا لا يتطلب الكثير من الميزات. في الوقت نفسه ، فإن مشروعك هو استخدام Bootstrap ، (الإطار الأمامي المفتوح المصدر الأكثر شعبية). يمكنك الرجوع إلى مكون bootstrap الرسمي.
ستوضح لك هذه المقالة كيفية إضافة تأثيرات الرسوم المتحركة المثيرة للاهتمام إلى carousel bootstrap. في الوقت نفسه ، تأكد من توسيع مكون JS هذا بحرية وبدأ بسرعة.
مقدمة إلى animate.css
من أجل جعل تأثير الرسوم المتحركة كتبت بنفسي جديراً بالثناء ، استخدمت مكتبة الرسوم المتحركة CSS3 الشهيرة المصدر الشهيرة ، والتي تسمى بوضوح ANIMATE.CSS. كتبه دان عدن.
هذا هو الكود الذي يسمح لي بالتركيز على المهمة المطروحة ، بدلاً من شرح الرسوم المتحركة CSS3.
يتطلب استخدام animate.css خطوتين:
1. إدخال animate.min.css في وثيقة HTML.
2. أضف فئة الرسوم المتحركة yourchosenanimation إلى العناصر لتكون الرسوم المتحركة في صفحة الويب.
بعد ذلك ، يمكنك استخدام اسم الفصل حول الرسوم المتحركة التي تراها على موقع animate.css لاستبدال YourchosenAnimation.
تقديم مكون carousel bootstrap
يحتوي مكون bootstrap carousel على ثلاثة أجزاء رئيسية.
--- يشير الكاروسيل إلى عدد الصفحات المعروضة على الشريحة ، مما يوفر للمستخدم فكرة بصرية وتوفير تنقل منزلق.
--- دخول الكاروسيل ، فئة تسمى .carousel-inner ، الواردة في الحدود الخارجية. يمثل كل منزلق مستقل. يمكن وضع الصور في كل صورة. يمكنك أيضا إضافة عنوان. يمكنك أيضًا إضافة اسم فئة Carousel-Caption على عنصر HTML. سوف bootstrap أسلوبه الخاص. يمكننا إضافة الرسوم المتحركة من خلال هذه العناصر.
--- أخيرًا ، هناك سهم التحكم في Carousel ، وهو الوظيفة التي تسمح للمستخدم بالانزلاق ذهابًا وإيابًا.
من أجل عرض العرض التوضيحي ببساطة ، لن يتم إضافة أي صور. ركز أولاً على إطار الكاروسيل كرسوم متحركة.
بناء هيكل HTML
إليك تلك التي تحتاج إلى اقتباسها في مشروعك:
jQuery
CSS و JavaScript's Bootstrap
animate.css
ورقة الأنماط وتوثيق JS.
من أجل تسريع عملية التطوير ، تتم الرجوع إلى القوالب والملفات اللازمة من الموقع الرسمي لـ Bootstrap.
فيما يلي رمز carousel bootstrap :
<div id = "carousel-example-generic" dative = "carousel"> <!-مؤشرات-> <ol> <li t-arget = "#carousel-example-generic" data-slide-to- "0"> </li> <li data-target = "#carousel-example-generic-generic" data-target = "#carousel-example-generic" data-slide-to = "2"> </li> </ol> <!-Wrapper for Slides-> <div rebox = "listbox"> <!-first slide-> <viv> <h3 data-animation = "animated bounceinleft" BounceInright "> هذا هو التسمية التوضيحية للشريحة 1 </h3> <button-animation =" animated zoominup "> زر </button> </div> </viv> <!-/. BounceIndown "> bounceinup"> هذا هو التسمية التوضيحية للشريحة 2 </h3> <button-animation = "animated zoominright"> زر </button> </viv> </viv> <!-/. بيانات البيانات = "الرسوم المتحركة flipinx"> هذا هو التسمية التوضيحية للشريحة 3 </h3> <button data-animation = "animated lightspeedin"> زر </button> </viv> </viv> <!-/. data-slide = "prev"> <span aria-hidden = "true"> </span> <span> السابق </span> </a> <a href = "#carousel-example-generic" rob = "button" data-slide = "next"> <span aria-hidden = "true" </span> </span>
إذا لم يكن الكود أعلاه خاطئًا ، فسترى كاروسيل يمكن تشغيله عند فتحه في المتصفح. كل شيء أعلاه لا يحتوي على سطر من رمز JavaScript. إذا لم تضيف أي صور ،
فقط أضف قيمة الارتفاع دقيقة إلى كتلة فئة. Carousel في وثيقة CSS لمنع انهيار الكاروسيل.
أضف تغيير بيانات سمة الرسوم المتحركة إلى العناصر الموجودة داخل عنوان Carousel ، باستخدام مكتبة الرسوم المتحركة الخاصة هذه كقيمة لها.
إذا كنت ترغب في تجربة الرسوم المتحركة الأخرى من مكتبة ANIMAT.CSS ، فاستخدم اسم فئة الرسوم المتحركة التي يختارونها بدلاً من قيمة خاصية تشكيل البيانات.
نحن نستخدم قيمة سمة تشكيل البيانات في رمز JavaScript.
على الرغم من أنه يمكن العثور على كاروسيل تلقائي بسيط في بعض الحالات ، إلا أننا نتحكم في هذه الحالة.
في الخطوة الأولى في هذا الاتجاه ، قم بإزالة قيمة Data Ride = "Carousel" من العنصر ، وتهيئة قيمة سمة قوس البيانات دون كتابة أي رمز. ومع ذلك ، فإننا نعتزم استخدام رمز JS للتحكم في Carousel ، لذلك فإن خاصية Data Ride هذه غير ضرورية.
أضف نمط CSS إلى الكاروسيل
استخدم الآن إبداعك لإضافة أنماط إلى عنوان Carousel وفقًا لتفضيلاتك. قواعد الأسلوب التي سأكتبها هي العروض التوضيحية التي تعمل بسلاسة.
وبشكل أكثر تحديدًا ، نزيد من السيطرة على خصائص تأخير الرسوم المتحركة. حدد عندما تبدأ كل الرسوم المتحركة (لاحظ أنه من أجل العرض التوضيحي البسيط ، يتم حذف بادئة المتصفح)
.Carousel-Caption H3: First-Child {الرسوم المتحركة-الولادة: 1S ؛}.في مقتطف الرمز أعلاه ، تأكد من أن العنصر الرسوم المتحركة يبدأ بطريقة منظمة. يمكن القيام بآثار أخرى. على سبيل المثال ، يمكنك تحديد أول لقبين لتظهر في نفس الوقت. ثم هناك زر الزر. يمكنك أن تقرر بنفسك وتستمتع.
اكتب رمز jQuery:
نبدأ في تهيئة هذا الكاروسيل وإضافة الرمز إلى ملف JavaScript المخصص الخاص بك:
var $ mycarousel = $ ('#carousel-example-generic') ؛ // تهيئة carousel $ mycarousel.carousel () ؛لقد أنشأنا carousel ديناميكيًا ، وبعد ذلك ، دعنا نحل هذه الرسوم المتحركة.
من أجل تحريك عنوان الشريحة الأولى ، يجب تشغيل البرنامج النصي بعد تحميل الصفحة في المتصفح. تدخل عرض الشرائح اللاحق مجال العرض الخاص بنا تحت الرسوم المتحركة ، ويتم تشغيل التعليمات البرمجية الخاصة بنا على حدث slide.bs.carousel. بمعنى أن نفس الرمز يعمل مرتين: يتم تحميل الصفحة مرة واحدة وحدث slide.bs.carousel مرة واحدة.
نظرًا لأننا نرغب في اتباع مبدأ عدم التكرار ، فإننا نعتزم تغليف رمزنا في الوظائف والرجوع إليها عند الاقتضاء.
شفرة:
دالة doanimations (eLEMS) {var arminendev = 'WebKitAnimationEnd AnimationEnd' ؛ elems.ach (function () {var $ this = $ (this) ، $ AnimationType = $ this.data ('الرسوم المتحركة') ؛ // إضافة فئات animate.css إلى // العناصر المراد أن تكون الرسوم المتحركة // remitive. $ this.removeclass ($ AnimationType) ؛ وظائف الوظائف ($ firstanimatingelems) ؛ // إيقاف تشغيل carousel $ mycarousel.carousel ('توقف مؤقت') ؛ $ AnimatingElems = $ (دعنا نحلل الرمز أعلاه.
انظر إلى وظيفة doanimations ()
المهام التي تؤديها وظيفة doanimations () هي كما يلي.
يبدأ بسلاسل ذاكرة التخزين المؤقت التي تحتوي على اسم حدث الرسوم المتحركة في المتغير. يخبرنا هذا الحدث أنك قد تكون قد خمنت عندما تنتهي كل رسوم متحركة. نحتاج إلى معلومات لهذه النقطة ، لأنه بعد انتهاء كل الرسوم المتحركة ، نقوم بإزالة فئة ANIMATE.CSS. إذا لم نقم بإزالة الإزالة ، فلن يكون للقب Carousel الرسوم المتحركة إلا مرة واحدة ، أي مجرد عرض شريحة محددة في الكاروسيل الأول.
var animationEndev = 'WebKitAnimationEnd AnimationEnd' ؛
بعد ذلك ، حلق وظيفتنا من خلال كل عنصر نريد أن نحصل على الرسوم المتحركة والحصول على قيمة خاصية تشكيل البيانات. فكر في ما هو مذكور أعلاه ، تحتوي هذه القيمة على فئة ANIMATE.CSS التي نريد إضافتها إلى العنصر بحيث يكون لها تأثير رسوم متحركة.
elems.ach (function () {var $ this = $ (this) ، $ AnimationType = $ this.data ('Animation') ؛ // etc ...}) ؛أخيرًا ، تضيف دالة doanimations () ديناميكيًا إلى كل عنصر من عناصر فئة ANIMATE.CSS لتنفيذ الرسوم المتحركة. عندما تنتهي الرسوم المتحركة ، يتم إرفاق الاستماع للحدث أيضًا. بعد انتهاء الرسوم المتحركة ، نقوم بإزالة الفئة المضافة من animate.css. هذا يضمن أن الكاروسيل التالي يعود إلى المنطقة الحالية. (تحاول حذف هذا الرمز ومعرفة ما يحدث)
$ this.addClass ($ animationType) .One (animendev ، function () {$ this.removeClass ($ AnimationType) ؛}) ؛العنوان الأول الرسوم المتحركة
عندما يتم تحميل الصفحة في المتصفح ، فإننا نحفز المحتويات في الشريحة الأولى:
var $ festanimatingelems = $ mycarousel.find ('. البند: الأول') .find ("[data-animation ^= 'Animated']") ؛ doanimations ($ festanimatingelems) ؛في هذا الرمز ، نجد الضوء الأول ، نريد الحصول على قيمة سمة الرسوم المتحركة من عنوان الرسوم المتحركة باستخدام تحليل البيانات. ثم نمرر المتغير $ firstanimatingelems كمعلمة لوظيفة doanimations () ، ثم تنفيذ الوظيفة.
وظيفة توقف كاروسيل
عندما يتم تنفيذ محتوى الشاشة الأول ، نوقف وظيفة الكاروسيل هذه.
$ mycarousel.carousel ('Pause') ؛
هذه ميزة يمنع فيها مكون bootstrap carousel الدوران المستمر. الدوران المستمر قد يجعل الزائرين غير سعداء.
في هذه الحالة ، أوصي بالتأكد من أن carousel لا يحلق مباشرة إلى الضوء التالي حتى يتم تشغيل جميع الرسوم المتحركة. يمكن التحكم في ذلك عن طريق تعيين خيار "الفاصل" في رمز التهيئة:
$ mycarousel.carousel ({الفاصل: 4000}) ؛في رأيي ، يقفز عنوان Carousel لانهائي في كل مرة لا تكون الشريحة في الأفق مثالية.
الرسوم المتحركة العنوان الشريحة الكاروسيل
يجب أن تصبح الخطوات الموضحة أدناه مرئية لعنوان Carousel المتحرك لكل شريحة.
أولاً ، نضيف مستمع حدث على slide.bs.carousel.
يطلق الحدث على الفور عندما يتم استدعاء طريقة مثيل الشريحة.
$ mycarousel.on ('slide.bs.carousel' ، function (e) {// do adusts ...}) ؛بعد ذلك ، نختار الأضواء الحالية ونجد العناصر التي نريد إضافة الرسوم المتحركة. يستخدم الرمز التالي خاصية .reledTarget لحدث slide.bs.carousel لربط الرسوم المتحركة.
var $ animatingelems = $ (
أخيرًا ، نسمي وظيفة doanimations () ونمر $ animatingelems كمعلمة.
doanimations ($ animatingelems) ؛
إذا كنت لا تزال ترغب في التعلم بعمق ، فيمكنك النقر هنا للتعلم وإرفاق موضوعين مثيرين لك: Bootstrap التعلم التعليمي التعليمي التعليمي العملي
مشاركة موضوع رائع: صورة jQuery carousel JavaScript Picture carousel bootstrap picture carousel
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.