โฮมเพจ » การเข้ารหัส » วิธีการสร้าง CSS บริสุทธิ์บนเอฟเฟกต์การซูมรูปภาพคลิก

    วิธีการสร้าง CSS บริสุทธิ์บนเอฟเฟกต์การซูมรูปภาพคลิก

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

    อย่างไรก็ตามเอฟเฟกต์นี้มีอายุสั้น: เมื่อผู้ใช้ปล่อยเมาส์, :คล่องแคล่ว ไม่ทำงานอีกต่อไป เราต้องหาวิธีอื่นให้ได้ จำลองเหตุการณ์คลิกใน CSS.

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

    คุณสามารถดูผลลัพธ์สุดท้ายด้านล่าง - โซลูชัน CSS-only สำหรับ การซูมภาพเมื่อคลิก.

    เมื่อใดจึงจะใช้โซลูชัน CSS-Only

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

    สำหรับ เหมาะสม คลังภาพ JavaScript ให้ความยืดหยุ่นและประสิทธิภาพมากขึ้น.

    เทคนิค Front-End ที่เราจะใช้

    ตอนนี้คุณได้รับคำเตือนแล้วให้เราดูอย่างรวดเร็ว 3 เทคนิคสำคัญ เราจะใช้:

    1. แท็ก HTML ที่อนุญาตให้เบราว์เซอร์ สร้างพื้นที่ที่ลิงก์ได้เหนือภาพ. อ่านเพิ่มเติมเกี่ยวกับ องค์ประกอบในโพสต์ก่อนหน้าของฉัน.
    2. usemap คุณลักษณะของ แท็ก, ที่เชื่อมโยงรูปภาพกับแผนผังรูปภาพ.
    3. : เป้าหมาย CSS pseudo-class ที่แสดงถึงองค์ประกอบที่ได้รับการกำหนดเป้าหมายโดยใช้ตัวเลือกรหัส.
    1. สร้างฐาน HTML

    ก่อนอื่นมาสร้าง HTML กันเถอะ ในรหัสด้านล่างเราเพิ่ม ภาพที่จะซูมและขยาย & ไอคอนปุ่มปิด สำหรับซูมเข้าและออก.

        

    เป็นสิ่งสำคัญที่จะต้องมี ID บนภาพที่จะซูมและปุ่มปิดจะต้องเป็นลิงค์ที่มี href = "#" คุณลักษณะฉันจะอธิบายว่าทำไมในภายหลังในโพสต์.

    2. เพิ่ม CSS

    เริ่มแรกไอคอนปิด ไม่ควรแสดง. ตำแหน่ง, ขอบ-, ซ้าย, และ ด้านล่าง คุณสมบัติ สถานที่ ขยายและปิดไอคอน ที่เราต้องการให้พวกเขาเป็น - ที่มุมขวาบนของภาพ.

    ตัวชี้เหตุการณ์: ไม่มี; กฎช่วยให้เหตุการณ์เมาส์ ผ่านไอคอนขยาย และ ไปถึงภาพ.

     .img height: 150px; ความกว้าง: 200px;  .cl background-image: url ("Close-icon.png"); พื้นหลังซ้ำ: ไม่ทำซ้ำ; ด้านล่าง: 418px; แสดง: ไม่มี; ความสูง: 32px; ซ้าย: 462px; margin-top: -32px; ตำแหน่ง: ญาติ; ความกว้าง: 32px; . ขยาย bottom: 125px; ระยะขอบซ้าย: -32px; ระยะขอบ - ขวา: 16px; ตัวชี้เหตุการณ์: ไม่มี; ตำแหน่ง: ญาติ;  
    สถานะเริ่มต้นพร้อมไอคอนขยายและซ่อนที่มองเห็นได้
    3. เพิ่มแผนที่รูปภาพ

    บนแผนที่รูปภาพ พื้นที่คลิกได้ ควรจะเป็น ที่มุมขวาบน ของรูปภาพด้านล่างไอคอนขยายและขนาดของมัน วาง องค์ประกอบก่อนหน้าแรก แท็กใน HTML เราจะผูกรูปภาพกับแผนที่ในขั้นตอนต่อไป.

        

    ในบล็อกรหัสด้านบน แท็กกำหนด รูปร่างขนาดและ URI ของพื้นที่ที่ลิงก์ได้ ภายในแผนที่รูปภาพ สำหรับ รูปทรงสี่เหลี่ยมผืนผ้า, รูปร่าง คุณลักษณะใช้เวลา ดูแลรักษา ค่าและ สี่ค่า ของ coords คุณลักษณะแสดงระยะทางเป็นพิกเซลระหว่าง:

    1. ขอบด้านซ้ายของรูปภาพ & ขอบด้านซ้ายของพื้นที่ลิงก์
    2. ขอบด้านบนของรูปภาพและขอบด้านบนของพื้นที่ลิงก์
    3. ขอบด้านซ้ายของภาพ & ขอบด้านขวาของพื้นที่ลิงก์
    4. ขอบด้านบนของรูปภาพและขอบด้านล่างของพื้นที่ลิงก์

    ค่าของ href คุณลักษณะต้องเป็น hash identifier ของรูปภาพ (นี่คือเหตุผลที่ภาพควรมี รหัส).

    4. ผูกรูปภาพกับ Image Map

    เพิ่ม usemap คุณลักษณะกับภาพเพื่อ ผูกเข้ากับแผนที่ภาพ. ค่าของมันจะต้องเป็น ตัวแทนแฮชของ ชื่อ คุณลักษณะของ แท็ก เราเพิ่มในขั้นตอนที่ 3.

      

    พื้นที่ที่สามารถคลิกได้ของแผนที่ภาพในขณะนี้ อยู่ด้านหลังปุ่มขยาย. เมื่อผู้ใช้คลิกปุ่มขยายมันเป็นพื้นที่ที่สามารถคลิกได้ซึ่งถูกคลิกตามความเป็นจริง - โปรดจำไว้ว่าเราได้สร้างปุ่มขยาย “พอควร” กับ ตัวชี้เหตุการณ์: ไม่มี; กฎในขั้นตอนที่ 2.

    วิธีนี้ผู้ใช้ กำหนดเป้าหมายภาพเอง ด้วยการคลิกและหลังจากคลิก URI จะถูกต่อท้ายด้วย "# img1" ตัวระบุส่วน.

    5. สไตล์ : เป้าหมาย Pseudo-Class

    จนกระทั่ง "# img1" ตัวระบุชิ้นส่วนอยู่ที่ส่วนท้ายของ URI รูปภาพที่กำหนดเป้าหมายสามารถเป็นได้ สไตล์ด้วย : เป้าหมาย หลอกชั้น

    ขนาดของภาพเป้าหมายเพิ่มขึ้นปุ่มปิดจะปรากฏขึ้นและปุ่มขยายจะถูกซ่อน.

     .img: เป้าหมาย สูง: 450px; ความกว้าง: 500px;  .img: target + .close display: block;  .img: target + .close + .expand display: none;  
    รูปภาพที่ซูมด้วยปุ่มปิดที่มองเห็นได้
    ปุ่มปิดทำงานอย่างไร

    ในฐานะที่เป็นปุ่มปิดถูกเพิ่มเป็นภาพพื้นหลัง (ขั้นตอนที่ 2) และเป็นจริง แท็กด้วย href = # คุณลักษณะ (ขั้นตอนที่ 1) เมื่อคลิกแล้วจะลบตัวระบุชิ้นส่วนออกจากส่วนท้ายของ URI ดังนั้นมันยัง ลบ : เป้าหมาย หลอกชั้น จากภาพและภาพ กลับไปเป็นขนาดก่อนหน้า.

    ตอนนี้เอฟเฟกต์ซูมอย่างคลิกอย่างเดียวเสร็จสิ้นแล้วลองดูตัวอย่างด้านล่างหรืออ่านทฤษฎีเกี่ยวกับแผนที่ภาพในส่วนถัดไปเล็กน้อย.

    ข้อมูลความเป็นมา: ทำไม และไม่ ?

    ถึงตอนนี้คุณคงเข้าใจแล้วว่าสิ่งที่สำคัญที่สุดสำหรับการแก้ปัญหา CSS-only ในการทำงานคือ กำหนดเป้าหมายภาพโดยใช้ href = "# imgid" คุณลักษณะ, ซึ่งสามารถทำได้โดยใช้ แท็กแทนแผนที่ภาพ.

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

      

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

    หากต้องการพูดเกี่ยวกับคำเตือนของคำตอบนี้ ชี้เหตุการณ์ คุณสมบัติ CSS (เราใช้ในขั้นตอนที่ 2) ได้รับการสนับสนุนโดย Internet Explorer เฉพาะจากรุ่น 11.

    เพื่อรองรับเบราว์เซอร์ IE ก่อนหน้านั้นคุณอาจต้องการใช้อย่างใดอย่างหนึ่ง แทน , หรือขยายภาพโดยคลิกที่ใดก็ได้บนภาพ (ในกรณีนี้ไม่จำเป็นต้องใช้ไอคอนขยาย).