ภาพเคลื่อนไหว bootstrap ที่ยอดเยี่ยมมาก

สำหรับนักพัฒนาเว็บไซต์การเพิ่มเอฟเฟกต์การเลื่อนหรือม้าหมุนให้กับเนื้อหาการแสดงผลเป็นความต้องการที่พบบ่อยมาก มีปลั๊กอินม้าหมุนที่ได้รับค่าตอบแทนและฟรีมากมาย หลายคนเสนอตัวเลือกการกำหนดค่าที่มีประโยชน์มากมายและเอฟเฟกต์แบบไดนามิก

หลายครั้งหากโครงการของคุณต้องการม้าหมุนที่มีน้ำหนักเบามันไม่จำเป็นต้องมีคุณสมบัติมากมาย ในเวลาเดียวกันโครงการของคุณคือใช้ Bootstrap (เฟรมเวิร์กโอเพนซอร์สที่ได้รับความนิยมมากที่สุด) คุณสามารถอ้างถึงองค์ประกอบ bootstrap อย่างเป็นทางการ

บทความนี้จะแสดงวิธีเพิ่มเอฟเฟกต์ภาพเคลื่อนไหวที่น่าสนใจให้กับ Bootstrap Carousel ในเวลาเดียวกันตรวจสอบให้แน่ใจว่าส่วนประกอบ JS นี้มีการขยายอย่างอิสระและเริ่มต้นอย่างรวดเร็ว

รู้เบื้องต้นเกี่ยวกับการเคลื่อนไหว

เพื่อที่จะทำให้เอฟเฟกต์แอนิเมชั่นฉันเขียนด้วยตัวเองสมควรได้รับการยกย่องฉันใช้ห้องสมุดแอนิเมชั่นโอเพนซอร์ส CSS3 ที่มีชื่อเสียงมากซึ่งเรียกว่า antiMive.css เขียนโดย Dan Eden

นี่คือรหัสที่ช่วยให้ฉันสามารถมุ่งเน้นไปที่งานที่อยู่ในมือแทนที่จะอธิบายภาพเคลื่อนไหว CSS3

การใช้ Animate.css ต้องใช้ 2 ขั้นตอน:

1. แนะนำ animate.min.css ในเอกสาร HTML

2. เพิ่มคลาสของคุณใช้แอนิเมชั่นแอนิเมชั่นในองค์ประกอบที่จะเป็นภาพเคลื่อนไหวในหน้าเว็บ

ถัดไปคุณใช้ชื่อคลาสเกี่ยวกับภาพเคลื่อนไหวที่คุณเห็นในเว็บไซต์ antimate.css เพื่อแทนที่ ourchosenimation ของคุณ

แนะนำส่วนประกอบ bootstrap carousel

ส่วนประกอบ Bootstrap Carousel มีสามส่วนหลัก

--- ม้าหมุนระบุจำนวนหน้าเว็บที่แสดงบนสไลด์ ทำให้ผู้ใช้มีเบาะแสที่มองเห็นได้และให้การนำทางแบบเลื่อน

--- รายการม้าหมุน , คลาสที่เรียกว่า. carousel-inner, มีอยู่ในเส้นขอบด้านนอก หมายถึงแถบเลื่อนอิสระแต่ละตัว สามารถวางรูปภาพในแต่ละภาพ คุณยังสามารถเพิ่มชื่อ นอกจากนี้คุณยังสามารถเพิ่มชื่อคลาส Carousel-caption ในองค์ประกอบ HTML Bootstrap จะมีสไตล์ของตัวเอง เราสามารถเพิ่มภาพเคลื่อนไหวผ่านองค์ประกอบเหล่านี้

--- ในที่สุดก็มี ลูกศรควบคุม Carousel ซึ่งเป็นฟังก์ชั่นที่ช่วยให้ผู้ใช้เลื่อนไปมา

เพื่อที่จะแสดงการสาธิตจะไม่มีการเพิ่มรูปภาพ มุ่งเน้นไปที่เฟรมม้าหมุนเป็นภาพเคลื่อนไหว

อาคารโครงสร้าง HTML

นี่คือสิ่งที่คุณต้องอ้างในโครงการของคุณ:

jQuery

CSS และ JavaScript ของ Bootstrap

Animate.css

เอกสารสไตล์ชีทและ JS

เพื่อเร่งกระบวนการพัฒนาเทมเพลตและไฟล์ที่จำเป็นจะถูกอ้างอิงจากเว็บไซต์ทางการของ Bootstrap

ด้านล่างนี้เป็น รหัสม้าหมุน bootstrap :

 <div id = "carousel-example-generic" data-ride = "Carousel"> <!-ตัวบ่งชี้-> <ol> <li data-target = "#carousel-example-generic" data-slide-to = "0"> </li> data-target = "#carousel-example-generic" data slide-to = "2"> </li> </ol> <!-wrapper สำหรับสไลด์-> <div role = "listbox"> <! bounceInright "> นี่คือคำบรรยายภาพสำหรับสไลด์ 1 </h3> <ปุ่ม data-animation =" zoominup animated "> ปุ่ม </duct> </div> </div> <!-/.item-> <!-สไลด์ที่สอง-> <div> <div> <h3 BounceInup "> นี่คือคำบรรยายภาพสำหรับสไลด์ 2 </h3> <ปุ่ม data-animation =" animated zoominright "> ปุ่ม </button> </div> </div> <!-/.item-> <!-สไลด์ที่สาม-> <div> <div> flipinx "> นี่คือคำบรรยายภาพสำหรับสไลด์ 3 </h3> <ปุ่ม data-animation =" แอนิเมชั่น lightspeedin "> ปุ่ม </button> </div> </div> <!-/.item-> </div> <!-/.carousel-inner-> <! aria-hidden = "true"> </span> <span> ก่อนหน้า </span> </a> <a href = "#carousel-example-generic" role = "button" data-slide = "next"> <span aria-hidden = "true"> </span> <pan>

หากรหัสข้างต้นไม่ผิดคุณจะเห็นม้าหมุนที่สามารถทำงานได้เมื่อเปิดในเบราว์เซอร์ ทุกอย่างข้างต้นไม่มีบรรทัดของรหัส JavaScript หากคุณไม่เพิ่มภาพใด ๆ

เพียงเพิ่มค่าต่ำสุดใน. carousel .item class block ในเอกสาร CSS เพื่อป้องกันการล่มสลายของม้าหมุน

เพิ่มแอ็พชั่นแอนิเมชั่นแอนิเมชั่นแอนิเมชั่นในองค์ประกอบภายในชื่อ Carousel โดยใช้ไลบรารีแอนิเมชั่นพิเศษนี้เป็นค่าของพวกเขา

หากคุณต้องการสัมผัสกับภาพเคลื่อนไหวอื่น ๆ จากไลบรารี antiMive.css ให้ใช้ชื่อคลาสแอนิเมชันที่คุณเลือกแทนค่าคุณสมบัติของข้อมูลแอนิเมชั่น

เราใช้ค่าแอนิเมชั่นข้อมูลในรหัส JavaScript

แม้ว่าจะพบม้าหมุนอัตโนมัติแบบง่าย ๆ ในบางกรณีเราสามารถควบคุมกรณีนี้ได้มากขึ้น

ในขั้นตอนแรกในทิศทางนี้ให้ลบค่า data-ride = "carousel" ออกจากองค์ประกอบและเริ่มต้นค่าแอตทริบิวต์ข้อมูลข้อมูลโดยไม่ต้องเขียนโค้ดใด ๆ อย่างไรก็ตามเราตั้งใจที่จะใช้รหัส JS เพื่อควบคุมม้าหมุนดังนั้นคุณสมบัติการขี่ข้อมูลนี้จึงไม่จำเป็น

เพิ่มสไตล์ CSS ลงในม้าหมุน

ตอนนี้ใช้ความคิดสร้างสรรค์ของคุณเพื่อเพิ่มสไตล์ลงในชื่อม้าหมุนตามความชอบของคุณ กฎสไตล์ที่ฉันจะเขียนคือการสาธิตที่ทำงานได้อย่างราบรื่น

โดยเฉพาะอย่างยิ่งเราเพิ่มการควบคุมคุณสมบัติการหน่วงของแอนิเมชั่น กำหนดเมื่อแต่ละภาพเคลื่อนไหวเริ่มต้น (โปรดทราบว่าสำหรับการสาธิตง่าย ๆ คำนำหน้าเบราว์เซอร์จะถูกละเว้น)

 .Carousel-Caption H3: ลูกคนแรก {Animation-Delay: 1S;}. Carousel-Caption H3: Nth-Cild (2) {Animation-Delay: 2S;}. ปุ่ม carousel-caption {Animation-delay: 3S;}}

ในตัวอย่างโค้ดด้านบนตรวจสอบให้แน่ใจว่าภาพเคลื่อนไหวองค์ประกอบเริ่มต้นอย่างเป็นระเบียบ ผลกระทบอื่น ๆ สามารถทำได้ ตัวอย่างเช่นคุณสามารถเลือกสองชื่อแรกที่จะปรากฏในเวลาเดียวกัน จากนั้นมีปุ่มปุ่ม คุณสามารถตัดสินใจด้วยตัวเองและสนุกสนาน

เขียนรหัส jQuery:

เราเริ่มต้นการเริ่มต้นม้าหมุนนี้และเพิ่มรหัสลงในไฟล์ JavaScript ที่กำหนดเองของคุณ:

 var $ mycarousel = $ ('#carousel-example-generic'); // เริ่มต้นม้าหมุน $ mycarousel.carousel ();

เราได้ตั้งค่าม้าหมุนแบบไดนามิกและต่อไปให้แก้ภาพเคลื่อนไหวนี้

เพื่อที่จะเคลื่อนไหวชื่อของสไลด์แรกสคริปต์จะต้องเรียกใช้หลังจากโหลดหน้าเว็บในเบราว์เซอร์ สไลด์โชว์ที่ตามมาจะเข้าสู่มุมมองของเราภายใต้ภาพเคลื่อนไหวและรหัสของเราทำงานบนเหตุการณ์ Slide.bs.carousel หมายความว่ารหัสเดียวกันทำงานสองครั้ง: หน้าโหลดหนึ่งครั้งและเหตุการณ์ slide.bs.carousel หนึ่งครั้ง

เนื่องจากเราต้องการทำตามหลักการของการไม่ทำซ้ำเราจึงตั้งใจที่จะห่อหุ้มรหัสของเราในฟังก์ชั่นและอ้างอิงตามความเหมาะสม

รหัส:

 ฟังก์ชั่น doanimations (elems) {var animendev = 'webkitanimationend animationend'; elems.each (function () {var $ this = $ (this), $ animationType = $ this.data ('animation'); // เพิ่มคลาส animate.css ลงใน // องค์ประกอบที่จะเป็นภาพเคลื่อนไหว // ลบคลาส imimate.css // $ this.removeclass ($ animationType);}); functiondoanimations ($ firstimatingelems); // หยุดชั่วคราวม้าหมุน $ mycarousel.carousel ('หยุดชั่วคราว'); // แนบ doanimations ของเรา () ฟังก์ชั่นกับ // carousel slide.bs.carousel เหตุการณ์ $ mycarousel.on (slide.barousel $ (E.RelatedTarget) .Find ("[Data-Animation ^= 'Animated']");

มาวิเคราะห์รหัสข้างต้นกันเถอะ

ดูฟังก์ชั่น doanimations ()

งานที่ดำเนินการโดยฟังก์ชั่น doanimations () นี้มีดังนี้

มันเริ่มต้นด้วยสตริงแคชที่มีชื่อเหตุการณ์แอนิเมชั่นในตัวแปร เหตุการณ์นี้บอกเราว่าคุณอาจเดาได้เมื่อแอนิเมชั่นแต่ละครั้งสิ้นสุดลง เราต้องการข้อมูลสำหรับจุดนี้เพราะหลังจากภาพเคลื่อนไหวแต่ละครั้งจบลงเราจะลบคลาส antiMive.css หากเราไม่ทำการลบชื่อของม้าหมุนจะมีแอนิเมชั่นเพียงครั้งเดียวนั่นคือเพียงแค่แสดงสไลด์เฉพาะในม้าหมุนตัวแรก

var AnimationEndev = 'WebKitAnimationend AnimationEnd';

ต่อไปฟังก์ชั่นของเราวนผ่านแต่ละองค์ประกอบที่เราต้องการมีแอนิเมชั่นและรับค่าคุณสมบัติของการอนิเมชั่นข้อมูล ลองนึกถึงสิ่งที่กล่าวถึงข้างต้นค่านี้มีคลาส antiMive.css ที่เราต้องการเพิ่มลงในองค์ประกอบเพื่อให้มีเอฟเฟกต์ภาพเคลื่อนไหว

 elems.each (function () {var $ this = $ (this), $ animationType = $ this.data ('ภาพเคลื่อนไหว'); // ฯลฯ ... });

ในที่สุดฟังก์ชั่น doanimations () จะเพิ่มไดนามิกให้กับแต่ละองค์ประกอบของคลาส animate.css เพื่อเรียกใช้ภาพเคลื่อนไหว เมื่อแอนิเมชั่นสิ้นสุดลงการฟังเหตุการณ์จะถูกแนบมาด้วย หลังจากแอนิเมชั่นสิ้นสุดลงเราจะลบคลาสที่เพิ่มออกจาก antimate.css สิ่งนี้ทำให้มั่นใจได้ว่าม้าหมุนตัวต่อไปจะกลับไปยังพื้นที่ปัจจุบัน (คุณพยายามลบรหัสนี้และดูว่าเกิดอะไรขึ้น)

 $ this.addclass ($ animationType). One (animendev, function () {$ this.removeClass ($ animationType);});

ภาพเคลื่อนไหวชื่อแรก

เมื่อหน้าโหลดในเบราว์เซอร์เราจะเคลื่อนไหวเนื้อหาในสไลด์แรก:

 var $ firstanimatingelems = $ mycarousel.find ('. รายการ: First') .find ("[data-animation ^= 'ภาพเคลื่อนไหว']"); Doanimations ($ firstimatingelems);

ในรหัสนี้เราพบแสงแรกเราต้องการรับค่าของแอตทริบิวต์แอนิเมชั่นจากชื่อแอนิเมชั่นโดยใช้ Data-Animation จากนั้นเราผ่านตัวแปร $ FirstimatingElems เป็นพารามิเตอร์ไปยังฟังก์ชัน doanimations () จากนั้นเรียกใช้ฟังก์ชัน

ฟังก์ชั่น Stop Carousel

เมื่อมีการดำเนินการเนื้อหาหน้าจอแรกเราจะหยุดฟังก์ชั่นม้าหมุนนี้

$ mycarousel.carousel ('หยุดชั่วคราว');

นี่คือคุณสมบัติที่ส่วนประกอบ Bootstrap Carousel ป้องกันการหมุนอย่างต่อเนื่อง การหมุนอย่างต่อเนื่องอาจทำให้ผู้เข้าชมไม่มีความสุข

ในกรณีนี้ฉันขอแนะนำให้แน่ใจว่าม้าหมุนจะไม่วนไปยังแสงถัดไปโดยตรงจนกว่าแอนิเมชั่นทั้งหมดจะทำงานอยู่ สามารถควบคุมได้โดยการตั้งค่าตัวเลือก "Interval" ในรหัสการเริ่มต้น:

 $ mycarousel.carousel ({Interval: 4000});

ในความคิดของฉันชื่อม้าหมุนวนที่ไม่มีที่สิ้นสุดกระโดดทุกครั้งที่สไลด์เข้าสู่สายตาไม่เหมาะ

แอนิเมชั่นชื่อสไลด์แบบหมุน

ขั้นตอนที่อธิบายไว้ด้านล่างจะต้องมองเห็นได้สำหรับชื่อม้าหมุนภาพเคลื่อนไหวของแต่ละสไลด์

ก่อนอื่นเราเพิ่มผู้ฟังเหตุการณ์บน slide.bs.carousel

เหตุการณ์จะเกิดขึ้นทันทีเมื่อมีการเรียกวิธีการสไลด์อินสแตนซ์

 $ mycarousel.on ('slide.bs.carousel', ฟังก์ชั่น (e) {// ทำสิ่งของ ... });

ต่อไปเราเลือกไฟปัจจุบันและค้นหาองค์ประกอบที่เราต้องการเพิ่มภาพเคลื่อนไหว รหัสต่อไปนี้ใช้คุณสมบัติ. relatedTarget ของเหตุการณ์ slide.bs.carousel เพื่อผูกแอนิเมชั่น

var $ animatingelems = $ (e.RelatedTarget) .find ("[data-animation ^= 'ภาพเคลื่อนไหว']");

ในที่สุดเราเรียกฟังก์ชั่น doanimations () และส่งผ่าน $ animatingelems เป็นพารามิเตอร์

Doanimations ($ Animatingelems);

หากคุณยังต้องการเรียนรู้อย่างลึก

การแบ่งปันหัวข้อที่ยอดเยี่ยม: ภาพ jQuery Carousel JavaScript รูปภาพ Carousel Bootstrap Picture Carousel

ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น