วิธีสร้างเอฟเฟกต์แว่นขยายบนเว็บไซต์

เนื้อหา

• คำสั่ง
• เคล็ดลับ
• การเตือน

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

คำสั่ง

ให้ภาพ "ระยะใกล้" แก่ผู้เยี่ยมชมเว็บไซต์ของคุณ (Brand X Pictures / Brand X Pictures / Getty Images)

1. รวม JavaScript และ jQuery ในส่วน "head" ของรหัส HTML พร้อมคำแนะนำ:

   ในตัวอย่างนี้ไลบรารี jQuery ตั้งอยู่ในไดเรกทอรี HTML เริ่มต้น

2. แทรกแท็ก CDATA เพื่อป้องกันไม่ให้เบราว์เซอร์พยายามวิเคราะห์ตัวดำเนินการ jQuery:

3. ตั้งค่าตัวแปรความสูงและความกว้างที่ใช้แสดงภาพ:

   var W = 743; var H = 1155; var w = 192; var h = 300;

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

   $ (เอกสาร) .ready (function () {

   $ ("# myimage"). mouseover (ฟังก์ชั่น (e) {$ (เอกสาร) .mememove (myMM); $ ("# glass"). fadeIn ('fast');

   
   

   });

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

   ฟังก์ชัน myMM (e) {var myImage = $ ("# myimage"); var glassImage = $ ("# glass-image"); var glass = $ ("# glass"); var xs = e.pageX - myImage.offset (). left; var ys = e.pageY - myImage.offset (). top; var bx = glassImage.width () / 2 - xsW / w; var โดย = glassImage.height () / 2 - ysH / h; glass.css ("ซ้าย", e.pageX-75-89 + "px") css ("ด้านบน", e.pageY-75-10 + "px"); glassImage.css ("พื้นหลังตำแหน่ง", bx + "px" + โดย + "px"); if (bx <-W || โดย <-H || bx> 150 || โดย> 150) {myImage.unbind ('mousemove', myMM); glass.fadeOut ('เร็ว'); }}

6. ปิด jQuery "script" และลบตัวแยกวิเคราะห์ CDATA ด้วยคำแนะนำ:

   
   

   // ]]>

7. ตั้งค่าเค้าโครงหน้าด้วย CSS เพื่อวางตำแหน่งภาพพื้นหลังที่ใหญ่ขึ้นและขอบหน้าต่างการขยายด้วยรหัส:

   type = "text / css"> #monaimage {margin-left: 200px; } #glass {background-repeat: no-repeat; พื้นหลังตำแหน่ง: บนซ้าย; ความกว้าง: 250px; ความสูง: 170px; padding-top: 10px; padding-left: 89px; กำไรขั้นต้น: 0; ตำแหน่ง: สัมบูรณ์; แสดง: ไม่มี; } # glass-image {background-image: url ('myImageLarge.jpg'); ความกว้าง: 150px; ความสูง: 150px; รัศมีเส้นขอบ: 75px; -moz-border-radius: 75px; พื้นหลังซ้ำ: ไม่ทำซ้ำ; พื้นหลังสี: #fff; กำไรขั้นต้น: 0; การเติมเต็ม: 0; เคอร์เซอร์: ไม่มี; }

8. เขียนรหัส HTML เพื่อแสดงหน้าในส่วน "เนื้อหา":

   >

   เลื่อนเม้าส์ไปที่รูปภาพ

   

เคล็ดลับ

• รหัสนี้ขึ้นอยู่กับ CSS3 เพื่อสร้างฟิลด์การขยายแบบกลมและอาจไม่ทำงานในเบราว์เซอร์รุ่นเก่า สำหรับความเข้ากันได้ย้อนหลังกับการใช้ CSS แบบเก่าให้ตั้งค่าฟิลด์สี่เหลี่ยมสำหรับ "# glass-image" (แว่นขยาย)

การเตือน

• หากไม่มีแท็ก CDATA เบราว์เซอร์จะพยายามวิเคราะห์โอเปอเรเตอร์น้อยกว่า "<" และมากกว่า ">" เป็นแท็ก HTML ใช้ตัวดำเนินการ JavaScript และ jQuery ร่วมกับแท็ก CDATA เสมอเพื่อหลีกเลี่ยงความล้มเหลว "script"