ตามความต้องการของโครงการจะต้องสร้างเอฟเฟกต์หน้าต่อไปนี้: เมื่อผู้ใช้ผ่านอวตารของเพื่อนในรายการเพื่อนข้อมูลพื้นฐานของเพื่อนจะปรากฏขึ้นซึ่งเป็นฟังก์ชั่นที่คล้ายกับไคลเอนต์ QQ
ฉันพบรหัสจำนวนมากออนไลน์และโดยทั่วไปแล้วพวกเขาทั้งหมดตระหนักว่าเมาส์ถูกระงับและ Div โผล่ขึ้นมาแล้วก็หายไปทันทีหลังจากออกไป นอกจากนี้ยังมีรหัส CSS บริสุทธิ์บางอย่างที่บรรลุผลกระทบนี้ แต่มันไร้ประโยชน์สำหรับฉัน สิ่งที่ฉันต้องการคือ JS (เพราะข้อมูลของฉันจะต้องได้รับผ่าน AJAX) และเมาส์ไม่สามารถซ่อนได้ทันทีหลังจากออกไป นอกจากนี้ยังมีรายการฟังก์ชั่นใน div นี้ เอฟเฟกต์หน้านี้ได้โยนฉันไปหนึ่งวันซึ่งแสดงให้เห็นว่าเทคโนโลยี JS และ CSS ของฉันจำเป็นต้องได้รับการปรับปรุง ...
หลังจากค้นหาเป็นเวลานานในที่สุดฉันก็พบความคิดสองอย่างที่เป็นไปได้ดังนี้ มีตัวอย่างของสองวิธีนี้ ฉันไม่ได้เขียนพวกเขาและฉันก็ไม่ได้ใช้มันเช่นกัน มาแบ่งปันกันและที่อยู่สาธิตจะปรากฏขึ้น วิธีการของฉันหมายถึงแนวคิดของวิธีการ B
วิธี A:
ใส่องค์ประกอบ Div และทริกเกอร์ A ในองค์ประกอบหลักเดียวกันและทริกเกอร์หน้าจอเมื่อเมาส์ผ่านองค์ประกอบหลัก ด้วยวิธีนี้เมื่อเมาส์เคลื่อนไปยัง DIV มันยังคงอยู่ในองค์ประกอบหลักและ DIV จะไม่ถูกซ่อนไว้
วิธี B:
Div ปรากฏขึ้นเมื่อเมาส์ผ่าน เมื่อเมาส์ออกจาก A ตัวจับเวลาจะถูกตั้งค่าให้ปิด div หากเมาส์เคลื่อนที่ไปที่ DIV ตัวจับเวลาจะถูกล้าง
-
วิธีการของฉันใช้แนวคิดของวิธี B ด้านบน เมื่อผู้ใช้ออกจากภาพที่ทริกเกอร์เหตุการณ์ Data Card Div จะต้องล่าช้า 3 วินาทีก่อนที่จะปิด ผู้ใช้มีเวลาเพียงพอในการดำเนินการที่สอดคล้องกัน เมื่อผู้ใช้คลิกที่ภาพเพื่อนคนอื่นวิธีที่ซ่อนอยู่จะถูกเรียกทันทีเพื่อปิดการเปิดก่อนหน้าและช่วงเวลาก่อนหน้านี้
นี่คือรหัส JS สำหรับวิธีการของฉัน:
// แสดงการ์ดข้อมูล var ก่อนหน้า; // กำหนดฟังก์ชั่นตัวแปรส่วนกลาง showinfocard (thisobj, id) {this.hidden (purdid); // ซ่อน DIV ที่เลือกก่อนหน้านี้ไว้ก่อนหน้า = id ทันที; // Alert (id); // var d = $ (thisobj); // var pos = d.offset (); // var t = pos.top + d.height () - 5; // ตำแหน่งบนของกล่องป๊อปอัพ // var l = pos.left - d.width () - 600; // ตำแหน่งซ้ายของกล่องป๊อปอัพ // $ ("#"+id) .css ({"top": t, "ซ้าย": l}). show (); // var objdiv = $ ("#"+id); $ (objdiv) .css ("แสดง", "block"); $ (objdiv) .css ("ซ้าย", event.clientx-280); // ค่า x ของกล่องป๊อปอัพคือ $ (objdiv) .css ("top", event.clienty-10); // ค่า y ของกล่องป๊อปอัพคือค่า y} ฟังก์ชั่น hideinfocard (id) {// ซ่อน div // ล่าช้าเป็นเวลา 3 วินาที settimeout ('hidden ('+id+')', 3000); } ฟังก์ชั่นซ่อน (id) {$ ("#"+id) .hide (); -นี่คือตัวอย่างรหัส DIV ที่ซ่อนอยู่ใน HTML:
<div id = "id" style = "จอแสดงผล: ไม่มี; ความกว้าง: 250px; ความสูง: 150px; พื้นหลังสี:#d1eeee; ตำแหน่ง: สัมบูรณ์;"> </div>
ใน HTML คุณต้องเรียกวิธีการ showinfocard และ hideinfocard และฟังเหตุการณ์เมาส์โดยใช้คำสั่งต่อไปนี้:
onMouseOver = "showinFocard (นี่, '$ {friend.friendid}')" onMouseOut = "hideInfocard ('$ {friend.friendid}')"นี่คือตัวอย่างโค้ดแบบไดนามิก เมื่อใช้งานคุณจะต้องแนะนำกรอบ jQuery.js และแน่นอนว่ามันสามารถปรับเปลี่ยนเป็น JS บริสุทธิ์ได้ ข้างต้นเสร็จสมบูรณ์ AJAX ได้รับข้อมูลจากนั้นใช้ JS เพื่อแทรกรหัส HTML ลงใน DIV ด้านบนเพื่อกรอกจอแสดงผล ในที่สุดฉันก็มีการเรนเดอร์เบื้องต้นซึ่งค่อนข้างน่าเกลียด ...