ใช้ HTML5+CSS3 เพื่อให้ได้เอฟเฟกต์การสลับตัวเลื่อนกล่าวคำอำลากับ JavaScript+CSS

ความคิดเห็น: เมื่อพูดถึงตัวเลื่อนในอดีต CSS+JS ถูกนำมาใช้เพื่อให้ได้ผลการสลับที่เกี่ยวข้อง ฉันได้ยินมาว่าทุกคนได้พูดคุยเกี่ยวกับวิธีการใช้งานของการใช้ HTML5+CSS3 แต่ฉันไม่เคยใช้มันเอง โอเคฉันมีเวลาเล่น CSS3 ในครั้งนี้ เพื่อนที่สนใจสามารถเรียนรู้เพิ่มเติมได้

ครั้งสุดท้ายที่ฉันบอกว่าฉันจะเพิ่มบทความสองสามอย่างอย่างรวดเร็ว แต่ฉันก็นัดหมายอย่างใจเย็น มันได้รับการตีพิมพ์ในอีกหนึ่งเดือนซึ่งน่าหดหู่จริงๆ ฉันพบว่าฉันไม่สามารถหาเวลาได้เมื่อเร็ว ๆ นี้และโดยทั่วไปจัดทำโครงการหนึ่งหลังจากโครงการอื่น ฉันไม่สามารถหาหัวข้อที่ถูกต้องเมื่อฉันว่างหรือไม่พบเวลาที่ฉันสับสน ดังนั้นฉันจึงตัดสินใจสรุปจุดความรู้ของปัญหาที่ฉันดิ้นรนเป็นระยะเวลาหนึ่งและศึกษาพวกเขาทีละคนเมื่อฉันเป็นอิสระแล้วจัดระเบียบพวกเขาเป็นบทความและแบ่งปันพวกเขา

เริ่มต้นจากหัวข้อเมื่อคุณพูดถึงตัวเลื่อนคุณมักจะใช้ CSS+JS เพื่อให้ได้เอฟเฟกต์การสลับที่เกี่ยวข้อง ฉันได้ยินมาว่าทุกคนได้พูดคุยเกี่ยวกับวิธีการใช้งานของการใช้ HTML5+CSS3 แต่ฉันไม่เคยใช้มันเอง โอเคฉันมีเวลาเล่น CSS3 ในครั้งนี้ ในความเป็นจริงฉันยังถูกดึงดูดด้วยข้อความเกี่ยวกับ Weibo เมื่อเห็นว่าผลลัพธ์ที่ผู้อื่นประสบความสำเร็จนั้นดีมากฉันก็อยากจะทำ

1. แผนภาพการทำสำเนา

มันดูไม่แตกต่างจากเอฟเฟกต์ที่เกิดจาก JS ในอดีต แต่ความรู้สึกโดยรวมนั้นสง่างามมาก พลังของ CSS3 คือฉันได้เขียนรหัสน้อยมากเพื่อให้ได้ผลลัพธ์ที่ซับซ้อนมากขึ้น อย่างไรก็ตามตัวอย่างนี้ยังมีสิ่งที่ไม่สมบูรณ์แบบ เมื่อสลับระหว่างภาพสองภาพหากมีรูปภาพอยู่ตรงกลางคุณจะยังคงเห็นมันในระหว่างการดำเนินการของแอนิเมชั่น CSS3 ซึ่งมีประสิทธิภาพน้อยกว่า แต่คิดเกี่ยวกับมันนี่เป็นผลกระทบที่เกิดจาก CSS3 บริสุทธิ์ การเปลี่ยนแปลงโครงสร้าง HTML ที่ซับซ้อนที่ใช้โดยใช้ JS ไม่สามารถมองเห็นได้ที่นี่ดังนั้นเอฟเฟกต์ข้างต้นจึงยากที่จะนำไปใช้กับ CSS3

2. โครงสร้าง HTML

<div>

<อินพุต checked type = "วิทยุ">

<อินพุต type = "วิทยุ">

<อินพุต type = "วิทยุ">

<อินพุต type = "วิทยุ">

<อินพุต type = "วิทยุ">

<div>

<div>

<div>

<บทความ>

<div>

<H1> title1 </h1>

<a href = "#"> คำอธิบาย 1 </a>

</div>

<img src = "img/pic1.png"/>

</บทความ>

<บทความ>

<div>

<H1> title2 </h1>

<a href = "#"> คำอธิบาย 2 </a>

</div>

<img src = "img/pic2.png"/>

</บทความ>

<บทความ>

<div>

<H1> title3 </h1>

<a href = "#"> คำอธิบาย 3 </a>

</div>

<img src = "img/pic3.png"/>

</บทความ>

<บทความ>

<div>

<H1> title4 </h1>

<a href = "#"> คำอธิบาย 4 </a>

</div>

<img src = "img/pic4.png"/>

</บทความ>

<บทความ>

<div>

<H1> title5 </h1>

<a href = "#"> คำอธิบาย 5 </a>

</div>

<img src = "img/pic5.png"/>

</บทความ>

</div>

</div>

</div>

<div>

<label for = "slider1"> </lable>

<label for = "slider2"> </lable>

<label for = "slider3"> </lable>

<label for = "slider4"> </lable>

<label for = "slider5"> </lable>

</div>

<div>

<label for = "slider1"> </lable>

<label for = "slider2"> </lable>

<label for = "slider3"> </lable>

<label for = "slider4"> </lable>

<label for = "slider5"> </lable>

</div>

</div>

รหัสด้านบนเป็นโครงสร้าง HTML หลักซึ่งมีกลุ่มวิทยุอินพุตซึ่งคุณสามารถเห็นได้ที่นี่เป็นฮับและมีบทบาทสำคัญมากในตัวอย่างนี้ (นี่คือเหตุผลที่ฉันไม่ต้องการซ่อนมันไว้ในตัวอย่างฮีโร่ตัวจริงไม่ควรเป็นฮีโร่เบื้องหลัง)

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

การควบคุมคือลูกศรสลับที่ด้านซ้ายและด้านขวาของภาพ ไม่ต้องกังวลทำไมคุณต้องออกแบบ 5 ดูเหมือนว่าทั้งสองจะเพียงพอ โปรดเตือนเราว่าในตัวอย่างนี้เราจะไม่ใช้ JS เพื่อให้ได้การสลับ

ล่าสุดที่ใช้งานอยู่คือปุ่มคลิกด้านล่างภาพ คุณสามารถเลือกรูปภาพที่คุณต้องการเรียกดูได้โดยตรงโดยคลิก นอกจากนี้คุณยังสามารถเพิ่มโครงสร้างภายในเพื่อออกแบบเอฟเฟกต์รูปขนาดย่อ

3. แผ่นสไตล์ CSS

@Charset UTF-8;

/* ทั่วไป */

ร่างกาย {พื้นหลัง: #DDD; Overflow-X: Hidden;}

#BD {WIDTH: 960PX; มาร์จิ้น: 100px auto; max-width: 960px;}

/ * โมดูล: ตัวเลื่อน */

#Sliders {

แนวชายแดน: 5px;

Box-Shadow: 1px 1px 4px #666;

ช่องว่าง: 1%;

ความเป็นมา: #FFFF;

-

#OverFlow {

ความกว้าง: 100%;

ล้น: ซ่อน;

-

#Sliders .inner {

ความกว้าง: 500%;

Transiton: 1S เชิงเส้นทั้งหมด;

-webkit-transition: 1S เชิงเส้นทั้งหมด;

-

#Sliders บทความ {

ลอย: ซ้าย;

ความกว้าง: 20%;

-

#Sliders บทความ. info {

ตำแหน่ง: สัมบูรณ์;

ความทึบ: 0;

ช่องว่าง: 30px;

สี: #666;

Font-Family: Arial;

การเปลี่ยนแปลง: ความทึบ 0.1s ง่ายขึ้น;

-webkit-transform: Translatez (0);

-webkit-transition: ความทึบ 0.1s ง่ายขึ้น;

-

#Sliders บทความ. info h1 {

ขนาดตัวอักษร: 22px;

Font-Weight: ตัวหนา;

มาร์จิ้น: 0 0 5px;

-

#Sliders บทความ. info a {

สี: #666;

การตกแต่งข้อความ: ไม่มี;

-

/ * โมดูล: ควบคุม */

#controls {

ความสูง: 50px;

ความกว้าง: 100%;

อัตรากำไรขั้นต้น: -25%;

-

#controls label {

แสดง: ไม่มี;

ความกว้าง: 50px;

ความสูง: 50px;

ความทึบ: 0.3;

เคอร์เซอร์: ตัวชี้;

-

#Controls Label: Hover {

ความทึบ: 1;

-

/ * โมดูล: Active */

#คล่องแคล่ว{

ความกว้าง: 100%;

อัตรากำไรขั้นต้น: 23%;

TEXT-ALIGN: CENTER;

-

#แอคทีฟฉลาก {

แสดง: Inline-Block;

ความกว้าง: 10px;

ความสูง: 10px;

แนวชายแดน: 5px;

ความเป็นมา: #BBB;

สีชายแดน: #777;

-

#แอคทีฟป้ายกำกับ: โฮเวอร์ {

ความเป็นมา: #CCC;

-

/ * อินพุตตรวจสอบสไตล์การเปลี่ยนแปลงสไตล์ */

#slider1: ตรวจสอบ ~ #แอคทีฟฉลาก: nth-child (1),

#slider2: ตรวจสอบ ~ #แอคทีฟฉลาก: nth-child (2),

#slider3: ตรวจสอบ ~ #แอคทีฟฉลาก: nth-child (3),

#slider4: ตรวจสอบ ~ #แอคทีฟฉลาก: nth-child (4),

#slider5: ตรวจสอบ ~ #แอคทีฟฉลาก: nth-child (5) {

ความเป็นมา: #333;

-

#slider1: ตรวจสอบ ~ #controls label: nth-child (5),

#slider2: ตรวจสอบ ~ #controls label: nth-child (1),

#slider3: ตรวจสอบ ~ #controls ฉลาก: nth-child (2),,

#slider4: ตรวจสอบ ~ #controls ฉลาก: nth-child (3),

#slider5: ตรวจสอบ ~ #controls label: nth-child (4) {

แสดง: บล็อก;

ลอย: ซ้าย;

ความเป็นมา: url (../ img/prev.png) ไม่ต้องทำซ้ำ;

ขอบซ้าย: -70px;

-

#slider1: ตรวจสอบ ~ #controls label: nth-child (2),

#slider2: ตรวจสอบ ~ #controls ฉลาก: nth-child (3),

#slider3: ตรวจสอบ ~ #controls ฉลาก: nth-child (4),

#slider4: ตรวจสอบ ~ #controls ฉลาก: nth-child (5)

#slider5: ตรวจสอบ ~ #controls label: nth-child (1) {

แสดง: บล็อก;

ลอย: ขวา;

ความเป็นมา: url (../ img/next.png) ไม่ต้องทำซ้ำ;

มาร์จิ้น -ขวา: -70px;

-

#slider1: ตรวจสอบ ~ #sliders บทความ: nth-child (1) .info,

#slider2: ตรวจสอบ ~ #sliders บทความ: nth-child (2) .info,

#slider3: ตรวจสอบ ~ #sliders บทความ: nth-child (3) .info,

#slider4: ตรวจสอบ ~ #sliders บทความ: nth-child (4) .info,

#slider5: ตรวจสอบ ~ #sliders บทความ: nth-child (5) .info {

ความทึบ: 1;

การเปลี่ยนแปลง: ความสะดวก 0.6S ทั้งหมด 1S;

-webkit-transition: 0.6s ทั้งหมดง่ายขึ้น 1S;

-

#slider1: ตรวจสอบ ~ #sliders .inner {

ขอบซ้าย: 0;

-

#slider2: ตรวจสอบ ~ #sliders .inner {

ขอบซ้าย: -100%;

-

#slider3: ตรวจสอบ ~ #sliders .inner {

ขอบซ้าย: -200%;

-

#slider4: ตรวจสอบ ~ #sliders .inner {

ขอบซ้าย: -300%;

-

#slider5: ตรวจสอบ ~ #sliders .inner {

ขอบซ้าย: -400%;

-

โอเคฉันยอมรับว่ารหัส CSS ข้างต้นนั้นซับซ้อนและซับซ้อนมากขึ้น แต่มันก็ประสบความสำเร็จอย่างมากและเมื่อฉันเขียนเสร็จฉันก็รู้สึกประทับใจกับความมหัศจรรย์ขนาดใหญ่ของ CSS3 - -

รหัสในช่วงครึ่งแรกของสิ่งนี้ส่วนใหญ่ใช้ในการออกแบบโครงสร้างของตัวเลื่อนรวมถึงมุมโค้งมนและการออกแบบการตกแต่งเงาเงา ครึ่งหลังส่วนใหญ่มีเอฟเฟกต์ภาพเคลื่อนไหวบางอย่างเพื่อรับรู้เอฟเฟกต์แบบไดนามิกบางอย่างเมื่อเปลี่ยนรูปภาพหรือปุ่มควบคุม อย่างไรก็ตามสิ่งที่สำคัญที่สุดคือการใช้ตัวเลือก CSS3 ด้านล่างซึ่งตระหนักถึงฟังก์ชั่นของการสลับภาพอย่างแท้จริง ฉันคิดว่าตัวเลือกมีบทบาทสำคัญมากในตัวอย่างเพราะนี่คือสิ่งที่ฉันไม่สนใจในการเรียนรู้ CSS3 ในอดีต ฉันมักจะคิดว่าสิ่งที่ทรงพลังเกี่ยวกับ CSS3 คือมุมโค้งมนเงาการเสียรูปและภาพเคลื่อนไหว แต่รหัสนี้บอกเราว่าตัวเลือกมีความสำคัญอย่างไรใน CSS3 ในตรรกะที่ซับซ้อนบางอย่างการใช้ตัวเลือก CSS3 เหล่านี้สามารถบรรลุเอฟเฟกต์ที่ไม่สามารถจินตนาการได้

4. หลักการของการใช้งานตัวเลื่อน

เมื่อฉันอ่านรหัสด้านบนเสร็จแล้วคุณจะต้องเหมือนที่ฉันทำตั้งแต่เริ่มต้น ฉันไม่เชื่อว่ารหัสดังกล่าวสามารถบรรลุผลของตัวเลื่อน

ตกลงให้ฉันวิเคราะห์หลักการดำเนินการ

ดังที่ฉันได้กล่าวไว้ข้างต้นกลุ่มวิทยุชั้นนำมีความสำคัญมากและเป็นศูนย์กลางของการใช้งานตัวเลื่อน ใช่มันเป็นจริง

ในการใช้ตัวเลื่อนมีเพียงสองประเภทของการสลับนั่นคือเมื่อคลิกปุ่มควบคุมภาพจะถูกสลับ ในเวลาเดียวกันเมื่อสลับภาพตรวจสอบให้แน่ใจว่าปุ่มควบคุมทั้งหมดจะปรากฏขึ้นอย่างถูกต้อง

ในตัวอย่างนี้เราใช้ป้ายกำกับเป็นปุ่มควบคุมบทความมีรูปภาพและด้านในเป็นคอนเทนเนอร์ของรูปภาพ

แค่คิดเกี่ยวกับเรื่องนี้ง่าย ๆ ฉลากและบทความไม่สามารถเชื่อมต่อได้และข้อมูลสถานะฉลากนั้นยากที่จะสะท้อนตัวเลือกของบทความ เว้นแต่จะมีบางสิ่งที่สามารถบันทึกสถานะการสลับของฉลากแล้วเลือกรูปภาพในลำดับที่สอดคล้องกันเพื่อแสดงผ่านวิธีการบางอย่าง

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

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

หลักการดำเนินการข้างต้นนั้นค่อนข้างง่าย ในความเป็นจริงตราบใดที่คุณสามารถบันทึกสถานะการคลิกของปุ่มควบคุมคุณสามารถบรรลุเอฟเฟกต์ตัวเลื่อนผ่านตัวเลือก

ไม่เพียง แต่กลุ่มวิทยุเท่านั้นที่สามารถทำได้ A: โฮเวอร์ยังสามารถใช้การสลับภาพเมื่อโฮเวอร์ตามแนวคิดนี้ แน่นอนว่ามีวิธีการดำเนินการอื่น ๆ อีกมากมายตราบใดที่คุณเข้าใจหลักการของการดำเนินการ

5. สรุป

ในความเป็นจริง CSS3 นั้นสนุกจริงๆมีเอฟเฟกต์มากมาย ใน CSS3 มีผลลัพธ์ที่ไม่คาดคิดเท่านั้น แต่ไม่มีใครสามารถทำได้ บางครั้งฉันพบว่าการเขียน CSS3 นั้นต้องใช้ความฉลาดเล็กน้อยและบางครั้งวิธีการใช้งานที่ยอดเยี่ยมบางอย่างก็น่ายกย่องจริงๆ

ในฐานะที่เป็นวิธีปฏิบัติเล็ก ๆ ตัวอย่างนี้ได้รับมากโดยเฉพาะตัวเลือกที่ทรงพลังซึ่งทำให้ฉันละอายใจที่ฉันไม่สนใจมันในอดีต - -

ฉันต้องพิจารณาปัญหาการสลับภาพที่ไม่ต่อเนื่อง ดูเหมือนว่าฉันต้องใช้ JS เล็กน้อยเพื่อช่วยเหลือ

ตกลงแบ่งปันกันถ้ามีผลลัพธ์