استنادًا إلى احتياجات المشروع ، يجب إنشاء تأثير الصفحة التالي: عندما يمرر المستخدم الصورة الرمزية للصديق في قائمة الصديق ، يتم عرض المعلومات الأساسية للصديق ، وهي في الواقع وظيفة مماثلة لتلك الخاصة بعميل QQ.
لقد وجدت الكثير من الرموز عبر الإنترنت ، وأدركت جميعها بشكل أساسي أن الماوس قد تم تعليقه وأن Div ظهر ، ثم اختفى فور مغادرته. هناك أيضًا بعض رموز CSS النقية التي تحقق هذا التأثير ، لكنها عديمة الفائدة بالنسبة لي. ما أحتاجه هو JS (لأنه يجب الحصول على بياناتي من خلال AJAX) ، ولا يمكن إخفاء الماوس فور مغادرته. هناك أيضا إدخال وظيفة على هذا div. لقد كان تأثير هذا الصفحة يرميني ليوم واحد ، مما يدل على أن تقنيات JS و CSS الخاصة بي تحتاج إلى تحسين ...
بعد البحث لفترة طويلة ، وجدت أخيرًا فكرتين ممكنتين على النحو التالي. هناك مثال على هاتين الطريقتين. لم أكتبها ولم أستخدمها أيضًا. دعونا نشاركهم ويتم عرض العنوان التجريبي. تشير طريقتي إلى فكرة الطريقة ب.
الطريقة أ:
ضعي العنصر العائم والعنصر المشغل في نفس العنصر الأصل ، وقم بإعداد الشاشة عندما يمر الماوس عبر العنصر الأصل. وبهذه الطريقة ، عندما ينتقل الماوس إلى DIV ، لا يزال داخل العنصر الأصل ، ولن يتم إخفاء DIV.
الطريقة ب:
يظهر Div عندما يمر الماوس أ. عندما يغادر الماوس A ، يتم تعيين مؤقت لإيقاف Div. إذا انتقل الماوس إلى div ، يتم مسح المؤقت.
―――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――
تعتمد طريقتي فكرة الطريقة B أعلاه. عندما يترك المستخدم الصورة التي تثير الحدث ، يجب تأخير بطاقة البيانات DIV بنسبة 3 ثوان قبل إغلاقها. لدى المستخدم الوقت الكافي لإجراء العملية المقابلة. عندما ينقر المستخدم على صور الأصدقاء الأخرى ، سيتم استدعاء الطريقة المخفية على الفور لإغلاق الفتحة السابقة وتوقيت Div.
هنا هو رمز JS لطريقتي:
// إظهار بطاقة البيانات VAR قبل ؛ . // على الفور إخفاء Div Evenid = 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 ، "left": l}). show () ؛ // var objdiv = $ ("#"+id) ؛ $ (objdiv) .css ("display" ، "block") ؛ $ (objdiv) .css ("left" ، event.clientx-280) ؛ . . } الوظيفة Hidden (id) {$ ("#"+id) .Hide () ؛ }فيما يلي مقتطف من رمز DIV المخفي في HTML:
<div id = "id" style = "display: none ؛ width: 250px ؛ الارتفاع: 150px ؛ خلفية اللون:#d1eeee ؛ الموضع: absolute ؛"> </div>
في HTML ، تحتاج إلى استدعاء أساليب ShowInfocard و HideInfocard ، والاستماع إلى أحداث الماوس باستخدام العبارة التالية:
onMouseover = "ShowInfocard (هذا ، '$ {friend.friendid}')" onMouseout = "HideInfocard ('$ {friend.friendid}')") "هذه هي قصاصات التعليمات البرمجية الديناميكية. عند استخدامه ، تحتاج إلى تقديم إطار عمل jQuery.js ، وبالطبع يمكن أيضًا تعديله في JS Pure. ما سبق الانتهاء. يحصل Ajax على المعلومات ، ثم يستخدم JS لإدخال رمز HTML في DIV أعلاه لإكمال الشاشة. أخيرًا ، لديّ عرض أولي ، وهو قبيح للغاية ...