1. سيناريوهات التطبيق
ينبثق Div من تحوم الماوس ولا يمكن إخفاؤه مباشرة بعد أوراق الماوس ، لأن هناك أيضًا بوابة وظيفة في هذا div. على سبيل المثال:
إن تأثير عرض بطاقة الملف الشخصي عندما يمر الماوس عبر الصورة الرمزية للصديق في قائمة الأصدقاء على النحو التالي:
عرض رمز الاستجابة السريعة عند التحوم
2. الإدراك
استخدم تأثيرًا بسيطًا مثل هذا: تحوم الماوس لعرض B على A للمحاكاة
هناك طريقتان لتنفيذها. ينصح بالثاني. الأول لديه عيوبه. سأتحدث عن ذلك أدناه.
1. الطريقة 1
المبدأ: ضع عنصر الزناد A والعنصر المعروض B في نفس العنصر الأصل ، ويتم تشغيل الشاشة B عندما يمر الماوس عبر العنصر الأصل. بهذه الطريقة ، عندما ينتقل الماوس إلى B ، لن يتم إخفاء Div.
شفرة:
<! doctype html> <html> <head> <meta charset = "utf-8"/> <title> احمر عرض B </itlect> <script src = "http://code.jquery.com/jquery-1.12.2.min.js الهامش: 10px 0 10px 10px ؛ العرض: 50 بكسل ؛ الارتفاع: 50 بكسل ؛ خلفية اللون: #CCC ؛ }#msg-box {border: 1px Solid Black ؛ العرض: 200 بكسل ؛ الارتفاع: 150 بكسل ؛ العرض: لا شيء ؛ تعويم: اليسار. padding: 10px} </style> </head> <body> <div id = "hoverwrap"> <div id = "hook"> a </viv> <div id = "msg-box"> module b </viv> </div> <script type = "text/javaScript"> $ ("#hoverwrap") $ ("#msg-box"). Toggle () ؛}) ؛ </script> </body> </html>هذه الطريقة بسيطة نسبيا للتنفيذ ، لكنها تتطلب لف طبقة من العلامات الأصل ولها عيب: لا يمكن تباعد العنصران.
2. الطريقة 2
المبدأ: عندما يمر الماوس A ، ينبثق B ، ويتحرك A Out ، ويضع مؤقتًا للتأخير بمقدار 0.5s ثم يغلق B ، لذلك تحتاج إلى الحكم عند الانتقال إلى A. إذا كان هناك مؤقت ، قم بمسح المؤقت أولاً ثم عرض B. B.
عندما يترك المستخدم A ، الذي يؤدي إلى حدوث الحدث ، يجب تأخير بطاقة البيانات DIV بمقدار 0.5 ثانية قبل الإغلاق. لدى المستخدم الوقت الكافي لإجراء العملية المقابلة. عندما ينتقل الماوس إلى بطاقة البيانات B ، فإن المؤقت في B الذي تم توقيته مسبقًا لإغلاق B.
الرمز الكامل كما يلي:
<! doctype html> <html> <head> <meta charset = "utf-8"/> <title> احمر عرض B </itlect> <script src = "http://code.jquery.com/jquery-1.12.2.min.js الهامش: 10px ؛ العرض: 50 بكسل ؛ الارتفاع: 50 بكسل ؛ خلفية اللون: #CCC ؛ }#msg-box {border: 1px Solid Black ؛ العرض: 200 بكسل ؛ الارتفاع: 150 بكسل ؛ العرض: لا شيء ؛ تعويم: اليسار. Padding: 10px} </style> </head> <body> <div id = "hook"> a </fire> <div id = "msg-box" Timer ؛ $ ("#hook ،#msg-box"). bind ("mouseover" ، showmsgbox) ؛ $ ("#hook"). bind ("mouseout" ، hidemsgbox) ؛ $ ("#msg-box"). bind ( ShowMsGbox () {if (timer) {cleartimeout (timer) ؛} $ ("#msg-box"). show () ؛} وظيفة hidemsgbox () {timer = setTimeOut (function () {$ ("#msg-box"). Hide () ؛} ، 500) ؛جزء JS:
<script type = "text/javaScript"> var timer ؛ $ ("#hook ،#msg-box"). bind ("mouseover" ، showmsgbox) ؛ $ ("#hook"). bind ("mouseout" ، hidemsgbox) ؛ $ ( $ ("#msg-box"). Hide () ؛أشياء يجب ملاحظتها
1. استخدم Mouseover بدلاً من Mousemove لإطلاق الأحداث.
Mouseover: يتم تشغيله عندما يتحرك الماوس فوق العنصر المستهدف.
Mousemove: يستمر الماوس في التشغيل عند التحرك داخل العنصر.
لذلك ، يستهلك Mouseover و Mousemove الموارد.
لمزيد من المعلومات ، يرجى الرجوع إلى: http://www.cnblogs.com/starof/p/4106904.html
2. أعلن ذلك قبل الاتصال المؤقت
إذا لم يُعلن ، فلن يتم الإعلان عن المؤقت في المرة الأولى التي يتم فيها نقل الماوس ، لذلك سيتم الإبلاغ عن خطأ عند نقل الماوس لأول مرة.
3. يجب مسح المؤقت قبل استدعاء حدث Mouseover
إذا لم يتم مسحها ، سيتم إغلاق B تلقائيًا بعد 0.5s.
3. حزمة في وظيفة عالمية
بالنظر إلى أن هذه الوظيفة أكثر عمومية ، يتم تعبئتها. نظرًا لأن JS يحتاج إلى التعامل مع بعض مشكلات التوافق ، فهو مكتوب في jQuery.
/*** Description Mouse تحوم إلى Ohook لعرض OMSGBox. * Author liuxioyan* date 2016-03-24 15: 01: 13* @last modified by: liuxioyan* @last modified الوقت: 2016-03-24 15:01:13* // *** param ohook: عناصر إلى hover* param omsgbox: elements لعرضها على hover* hovershowmsg.init ({hook: $ (". viewphone") ، msgbox: $ (". viewphonscan") ؛*/var hovershowmsg = (function () {var ohook ، omsgbox ، timer ؛ function init (o) {ohook = o.hook ؛ omsgbox = o.msgbox ؛ OHOOK.Bind ({mouseover: mouseout: hidemsgbox}) ؛ omsgbox.hide () ؛ما سبق هو المحتوى الكامل لكيفية تحقيق تأثير عرض بطاقات المعلومات (الموصى به) بناءً على JS بناءً على تحوم Avatar Friend. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، يرجى ترك رسالة لي. سوف يرد المحرر لك في الوقت المناسب. شكرا جزيلا لدعمك لموقع wulin.com!