ZooMove jQuery Plugin เพื่อซูมภาพบนโฮเวอร์

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

ปลั๊กอิน ZooMove เป็นวิธีที่ดีในการ ทำซ้ำเอฟเฟกต์นี้ บนเว็บไซต์ของคุณ มัน ขับเคลื่อนโดย jQuery, เพื่อให้คุณสามารถเริ่มต้นใช้งานได้อย่างรวดเร็วโดยไม่ต้องใช้รหัสมาก.

ZooMove นั้นฟรีและโอเพ่นซอร์สอย่างสมบูรณ์ บน GitHub สำหรับนักพัฒนาที่อยากรู้อยากเห็น มันสามารถติดตั้งผ่าน NPM, ซุ้มไม้ในสวน, เส้นด้าย, หรือดาวน์โหลดโดยตรงจาก CDNJS.

ในการตั้งค่าภาพ ZooMove คุณจะต้อง สามไฟล์ที่เฉพาะเจาะจง ในส่วนหัวของหน้า:

1. jQuery
2. ZooMove CSS
3. ZooMove JS

ทั้งไฟล์ ZooMove สามารถย่อให้เล็กลง หากคุณต้องการโหลดหน้าเว็บที่เร็วขึ้น คุณสามารถรวมไฟล์ CSS ลงในสไตล์ชีทหลักของคุณได้ถ้าทำได้ง่ายกว่า.

ความมหัศจรรย์ที่แท้จริงทั้งหมดเกิดขึ้นใน HTML ที่คุณสามารถทำได้ ตั้ง HTML5 คุณลักษณะ data- * สำหรับเอฟเฟกต์ต่าง ๆ.

สิ่งนี้จะช่วยให้คุณประดิษฐ์ ผลการซูมที่กำหนดเองของตัวเอง ขึ้นอยู่กับพารามิเตอร์ที่แตกต่างกันสี่:

1. ข้อมูลสวนสัตว์ขนาด - กำหนด ขนาดการซูมทั้งหมดเมื่อโฮเวอร์ (เช่น 2.0 สำหรับ 200%)
2. ข้อมูลสวนสัตว์ย้าย - กำหนดว่าภาพ เคลื่อนที่ไปพร้อมกับเคอร์เซอร์
3. ข้อมูลสวนสัตว์มากกว่า - กำหนดภาพที่ซูม ปรากฏขึ้นเหนือต้นฉบับ
4. ข้อมูลสวนสัตว์เคอร์เซอร์ - กำหนด จุดเคอร์เซอร์

พารามิเตอร์ที่ห้าสุดท้ายช่วยให้คุณกำหนดสิ่งที่ URL รูปภาพใหม่ ควรจะ (ถ้าจำเป็น).

คุณสามารถใช้ ZooMove ในเบราว์เซอร์หลักทั้งหมดรวมถึง IE9 + ปลั๊กอินนี้คือ สนับสนุนอย่างกว้างขวาง และมอบประสบการณ์การใช้งานที่ดีเยี่ยม.

หากคุณกำลังมองหา ไลบรารี hover-to-zoom ง่าย ๆ ZooMove เป็นตัวเลือกที่ยอดเยี่ยม มัน เบาพอสมควร เพื่อให้ทำงานบนเว็บไซต์ใด ๆ ก็ได้ ขับเคลื่อนโดย jQuery, ดังนั้นคุณไม่จำเป็นต้องเขียนโค้ดมากนักเพื่อให้มันทำงานได้.

ไปที่หน้าหลักเพื่อดูการทำงานและตรวจสอบเอกสารใน GitHub เพื่อเรียนรู้เพิ่มเติม.