1. สถานการณ์แอปพลิเคชัน
Div ปรากฏขึ้นบนเมาส์โฮเวอร์และไม่สามารถซ่อนได้ทันทีหลังจากที่เมาส์ออกไปเนื่องจากมีพอร์ทัลฟังก์ชันใน Div นี้ ตัวอย่างเช่น:
ผลของการแสดงการ์ดโปรไฟล์เมื่อเมาส์ผ่านอวตารของเพื่อนในรายการเพื่อนมีดังนี้:
แสดงรหัส QR เมื่อโฮเวอร์
2. การรับรู้
ใช้เอฟเฟกต์ง่าย ๆ เช่นนี้: เมาส์วางตัวเพื่อแสดง B บน A เพื่อจำลอง
มีสองวิธีในการใช้งาน แนะนำให้ใช้ข้อที่สอง คนแรกมีข้อเสีย ฉันจะพูดถึงเรื่องนี้ด้านล่าง
1. วิธี 1
หลักการ: ใส่องค์ประกอบทริกเกอร์ A และองค์ประกอบที่แสดง B ในองค์ประกอบหลักเดียวกันและการแสดงผล B จะถูกกระตุ้นเมื่อเมาส์ผ่านองค์ประกอบหลัก ด้วยวิธีนี้เมื่อเมาส์เคลื่อนที่ไปที่ B DIV จะไม่ถูกซ่อนไว้
รหัส:
<! doctype html> <html> <head> <meta charset = "utf-8"/> <title> โฮเมอการแสดง b </title> <script src = "http://code.jquery.com/jquery-1.12.2.min.js" มาร์จิ้น: 10px 0 10px 10px; ความกว้าง: 50px; ความสูง: 50px; พื้นหลังสี: #CCC; }#msg-box {border: 1px solid black; ความกว้าง: 200px; ความสูง: 150px; แสดง: ไม่มี; ลอย: ซ้าย; Padding: 10px} </style> </head> <body> <div id = "hoverwrap"> <div id = "hook"> a </div> <div id = "msg-box"> โมดูลฟังก์ชั่น b </div> </div> <script type = "text/javascript"> $ ("#hoverwrap") $ ("#msg-box"). toggle ();}); </script> </body> </html>วิธีนี้ค่อนข้างง่ายในการใช้งาน แต่ต้องใช้การห่อเลเยอร์ของแท็กหลักและมีข้อเสีย: องค์ประกอบทั้งสองไม่สามารถเว้นระยะห่างได้
2. วิธี 2
หลักการ: เมื่อเมาส์ผ่าน A, B ปรากฏขึ้นเลื่อนออกไปตั้งค่าตัวจับเวลาให้ล่าช้า 0.5S จากนั้นปิด B ดังนั้นคุณต้องตัดสินเมื่อย้ายเข้า A. หากมีตัวจับเวลาให้ล้างตัวจับเวลาก่อนแล้วแสดง B. B. B.
เมื่อผู้ใช้ออกจาก A ซึ่งกระตุ้นเหตุการณ์ Data Card Div จะต้องล่าช้า 0.5 วินาทีก่อนปิด ผู้ใช้มีเวลาเพียงพอในการดำเนินการที่สอดคล้องกัน เมื่อเมาส์เคลื่อนเข้าสู่การ์ดข้อมูล B ตัวจับเวลาใน B ที่ก่อนหน้านี้จะปิด BE
รหัสที่สมบูรณ์มีดังนี้:
<! doctype html> <html> <head> <meta charset = "utf-8"/> <title> โฮเมอการแสดง b </title> <script src = "http://code.jquery.com/jquery-1.12.2.min.js" มาร์จิ้น: 10px; ความกว้าง: 50px; ความสูง: 50px; พื้นหลังสี: #CCC; }#msg-box {border: 1px solid black; ความกว้าง: 200px; ความสูง: 150px; แสดง: ไม่มี; ลอย: ซ้าย; Padding: 10px} </style> </head> <body> <div id = "hook"> a </div> <div id = "msg-box"> โมดูลฟังก์ชัน B </div> <script type = "text/javascript"> var จับเวลา; $ ("#hook,#msg-box"). bind ("mouseover", showmsgbox); $ ("#hook"). bind ("mouseout", hidemsgbox); $ ("#msg-box").}}}; showmsgbox () {ถ้า (ตัวจับเวลา) {cleartimeout (ตัวจับเวลา);} $ ("#msg-box"). show ();} ฟังก์ชั่น hidemsgbox () {timer = settimeout (ฟังก์ชัน () {$ ("#msg-box")JS Part:
<script type = "text/javascript"> var timer; $ ("#hook,#msg-box"). bind ("mouseover", showmsgbox); $ ("#hook"). ผูก ("mouseout", hidemsgbox); $ ("#msg-box") $ ("#msg-box"). hide ();}); function showmsgbox () {ถ้า (ตัวจับเวลา) {cleartimeout (ตัวจับเวลา);} $ ("#msg-box") แสดง ();} ฟังก์ชั่น hidemsgbox ();สิ่งที่ควรทราบ
1. ใช้ MouseOver แทน mousemove เพื่อกระตุ้นเหตุการณ์
MouseOver: ทริกเกอร์เมื่อเมาส์เคลื่อนที่ผ่านองค์ประกอบเป้าหมาย
Mousemove: เมาส์ยังคงกระตุ้นเมื่อเคลื่อนที่ภายในองค์ประกอบ
ดังนั้น Mouseover และ Mousemove จึงใช้ทรัพยากร
สำหรับข้อมูลเพิ่มเติมโปรดดูที่: http://www.cnblogs.com/starof/p/4106904.html
2. ประกาศก่อนโทรหาตัวจับเวลา
หากไม่ได้ประกาศตัวจับเวลาจะไม่ถูกประกาศในครั้งแรกที่เมาส์ถูกย้ายออกดังนั้นจะมีการรายงานข้อผิดพลาดเมื่อเมาส์ถูกย้ายเข้ามาเป็นครั้งแรก
3. ตัวจับเวลาจะต้องล้างก่อนที่จะเรียกเหตุการณ์ MouseOver
หากไม่เคลียร์ B จะถูกปิดโดยอัตโนมัติหลังจาก 0.5 วินาที
3. แพคเกจลงในฟังก์ชั่นสากล
เมื่อพิจารณาว่าฟังก์ชั่นนี้มีทั่วไปมากขึ้น เนื่องจาก JS จำเป็นต้องจัดการกับปัญหาความเข้ากันได้บางอย่างจึงถูกเขียนขึ้นใน jQuery
/*** @description เมาส์วางตัวไปที่ OHOOK เพื่อแสดง OMSGBOX * @author liuxiaoyan* @date 2016-03-24 15: 01: 13* @last แก้ไขโดย: liuxiaoyan* @last เวลาแก้ไข: 2016-03-24 15:01:13* // *** @param ohook: องค์ประกอบที่จะโฮเวอร์* @param omsgbox: องค์ประกอบ HovershowMsg.init ({hook: $ (". viewphone"), msgbox: $ (". viewphonescan")});*/var hovershowmsg = (ฟังก์ชั่น () {var ohook, omsgbox, ตัวจับเวลา; Ohook.bind ({MouseOver: showmsgbox, Mouseout: Hidemsgbox}); Omsgbox.hide ();ข้างต้นเป็นเนื้อหาเต็มรูปแบบของวิธีการบรรลุผลของการแสดงการ์ดข้อมูล (แนะนำ) ตาม JS ตาม QQ Friend Avatar Hover ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉัน บรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!