سيشاركك هذا المثال معك رمز التنفيذ المحدد لنافذة السحب المنبثقة في JavaScript للرجوع إليها. المحتوى المحدد كما يلي
وصف المتطلبات:
1. انقر فوق زر الصفحة لإطفاء النافذة ؛
2. لديك قناع خلفية شفاف.
3. النافذة المنبثقة تحتوي على زوايا مستديرة ، النافذة شفافة ، لكن المحتوى غير شفاف ؛ مع الظل
4. يمكن سحب النافذة.
5. بعد توقف السحب ، يظل موضع النافذة دون تغيير عند تمرير الصفحة ؛
6. يمكنك استخدام jQuery.
7. هناك زر قريب.
وصف وظيفي إضافي:
انقر فوق الزر وسيكون هناك طبقة عائمة يمكن سحبها.
هناك قناع خلفية يدعم سحب شريط العنوان وإسقاطه. السحب خارج منطقة شريط العنوان ليس له أي تأثير. وظيفة السحب محدودة ، وتقتصر وظيفة السحب على المنطقة المرئية.
اسحب الأفكار:
الحصول على موقف الماوس. عندما يتحرك الماوس ، احصل على موضع الماوس ، واحصل على المحور X ، وقم بتعيينه إلى المحور X الخاص بالنافذة ، وجعل النافذة في وضعها تمامًا. إلغاء هذا الحدث عند إصدار الماوس.
مبدأ التنفيذ للسحب والإفلات:
عندما يتحرك الماوس ، يتم تحديث موضع الإحداثيات للطبقة العائمة باستمرار عندما يتحرك الماوس.
1. عندما يضغط الماوس على العنصر العائم ، حدد العنصر العائم حيث يمكن سحبه.
2. عندما يتحرك الماوس ، نتحقق أولاً مما إذا كان يمكن سحب تقلبات علامة العنصر العائمة. إذا كان الأمر كذلك ، فدع الطبقة العائمة تتحرك مع الماوس ، وتجاهلها إن لم يكن.
3. عند إطلاق الماوس ، لا يمكن سحب العنصر العائم.
4. js السحب والإفلات يستخدم بشكل أساسي ثلاثة أحداث ماوس: mousedown ، mousemove ، و mouseup.
موسى: اضغط على الماوس
Mouseup: حرر الماوس
Mousemove: Mouse Move
ملاحظة : الفرق بين Mousedown والنقر: ستحدث عملية النقر بأكملها من Mousedown مع ثلاثة أحداث: Mousedown → Mouseup → انقر ، والنقر لن يحدث بعد إصدار الماوس في النهاية.
الحديث عن هذا ، علينا أن نتحدث عن حدث الماوس.
دعنا نتحدث بإيجاز عن حدث الماوس أدناه:
(1) انقر فوق الحدث
(2) حدث DBCLICK
(3) حدث موسى
(4) حدث ماوس
(5) حدث الفأر
(6) حدث Mouseover
(7) حدث موسيليفر
(8) حدث ماوس
Explanation : (يتم تحديد شرح حدث الماوس من W3School)
(1) انقر فوق الحدث: يتم تشغيل حدث النقر عندما ينقر المستخدم على زر الماوس الأيسر على العنصر ويطلق الزر الأيسر على نفس العنصر.
(2) حدث DBCLICK: عند النقر نقرًا مزدوجًا للنقر المزدوج ، سيحدث حدث DBLCLICK. تحدث نقرة عندما يبقى مؤشر الماوس فوق العنصر ثم يضغط ويطلق زر الماوس الأيسر. تحدث نقرتان في وقت قصير جدًا ، وهو حدث نقر مزدوج.
مثال:
عند النقر المزدوج على الزر ، إخفاء أو عرض العنصر:
$ (document) .Ready (function () {$ ("button"). dblclick (function () {$ ("p"). slidetoggle () ؛}) ؛}) ؛(3) حدث Mousedown: عندما يتحرك مؤشر الماوس فوق العنصر ويضغط على زر الماوس ، سيحدث حدث Mousedown. على عكس حدث Click ، يتطلب حدث Mousedown فقط الضغط على المفتاح ولا يلزم إصداره.
$ (document) .Ready (function () {$ ("button"). mousedown (function () {$ ("p"). slidetoggle () ؛}) ؛}) ؛(4) حدث Mouseup: عندما يتم استرخاء زر الماوس على العنصر ، سيحدث حدث Mouseup.
على عكس حدث النقر ، لا يتطلب حدث Mouseup سوى زر استرخاء. عندما يكون مؤشر الماوس فوق العنصر ، فإن زر الماوس الاسترخاء يؤدي إلى الحدث.
$ (document) .Ready (function () {$ ("button"). mouseup (function () {$ ("p"). slidetoggle () ؛}) ؛}) ؛(5) حدث Mouseenter: عندما يمر مؤشر الماوس عبر عنصر ، سيحدث حدث Mouseenter. يتم استخدام هذا الحدث معظم الوقت مع حدث MouseLeave.
ملاحظة: على عكس حدث Mouseover ، لن يتم تشغيل حدث Mouseenter إلا عندما يمر مؤشر الماوس عبر العنصر المحدد. إذا مر مؤشر الماوس بأي عناصر طفل ، فسيتم أيضًا تشغيل حدث Mouseover.
(6) حدث Mouseover: عندما يكون مؤشر الماوس فوق العنصر ، سيحدث حدث Mouseover. يتم استخدام هذا الحدث معظم الوقت مع حدث Mouseout.
ملاحظة: على عكس حدث Mouseenter ، سيتم تشغيل حدث Mouseover بغض النظر عما إذا كان مؤشر الماوس يمر عبر العنصر المحدد أو عنصره الفردي. لن يتم تشغيل حدث Mouseenter إلا عندما يمر مؤشر الماوس عبر العنصر المحدد.
$ (document) .Ready (function () {$ ("p"). mouseover (function () {$ ("p").الفرق بين Mouseenter و Mouseover
<html> <head> <script type = "text/javaScript" src = "/jQuery/jQuery.js"> </script> <script type = "text/javaScript"> x = 0 ؛ y = 0 ؛ $ (document) .Ready (function () {$ ("div.over"). mouseover (function () {$ (". over span"). النص (x+= 1) ؛}) ؛ $ ("div.enter"). mouseenter (function () {$ ( </script> </head> <body> <p> سيتم تشغيل حدث Mouseover بغض النظر عما إذا كان مؤشر الماوس يمر عبر العنصر المحدد أو عنصره الطفل. </p> <p> لن يتم تشغيل حدث Mouseenter إلا عندما يمر مؤشر الماوس عبر العنصر المحدد. </p> <div style = "خلفية اللون: lightgray ؛ الحشو: 20px ؛ العرض: 40 ٪ ؛ تعويم: اليسار"> <h2 style = "خلفية اللون: أبيض ؛ style = "background-color: white ؛"> event mouseenter الحدث: <span> </span> </h2> </viv> </body> </html>(7) حدث MouseLeaver: عندما يمر مؤشر الماوس عبر عنصر ، سيحدث حدث Mouseenter.
يتم استخدام هذا الحدث معظم الوقت مع حدث MouseLeave.
ملاحظة: على عكس حدث Mouseout ، لن يتم تشغيل حدث MouseLeave إلا عندما يترك مؤشر الماوس العنصر المحدد. إذا ترك مؤشر الماوس أي عناصر طفل ، فسيتم تشغيل حدث الماوس أيضًا.
(8) حدث ماوس
يحدث حدث Mouseout عندما يتم نقل مؤشر الماوس بعيدًا عن العنصر.
يتم استخدام هذا الحدث معظم الوقت مع حدث Mouseover.
ملاحظة: على عكس حدث MouseLeave ، سيتم تشغيل حدث Mouseout بغض النظر عما إذا كان مؤشر الماوس يترك العنصر المحدد أو أي عنصر طفل. لن يتم تشغيل حدث MouseLeave إلا عندما يترك مؤشر الماوس العنصر المحدد.
يرجى الاطلاع على المثال التالي العرض التوضيحي.
<html> <head> <script type = "text/javaScript" src = "/jQuery/jQuery.js"> </script> <script type = "text/javaScript"> x = 0 ؛ y = 0 ؛ $ (document) .Ready (function () {$ ("div.out"). mouseout (function () {$ (". out span"). النص (x+= 1) ؛}) ؛ $ ("div.leave"). mouseLeave (function () {$ (". </script> </head> <body> <p> سيتم تشغيل حدث الماوس بغض النظر عما إذا كان مؤشر الماوس يترك العنصر المحدد أو أي عنصر طفل. </p> <p> لن يتم تشغيل حدث MouseLeave إلا عندما يترك مؤشر الماوس العنصر المحدد. </p> <div style = "خلفية اللون: lightgray ؛ الحشو: 20 بكسل ؛ العرض: 40 ٪ ؛ تعويم: يسار"> <h2 style = "خلفية اللون: أبيض ؛" style = "background-color: white ؛"> event mouseleve الحدث: <span> </span> </h2> </viv> </body> </html>ملاحظة: هذه المقالة أصلية ، العنوان: http://www.cnblogs.com/wanghuih/p/5569438.html
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.