حرکت جعبه متن کنار ماوس

گام اول

ابتدا عناصر اصلی HTML را می نویسیم :

hh
گام دوم

سپس یک div در تگ body ایجاد می کنیم و درون این div یک پاراگراف ایجاد کرده و متن مورد نظر را در درون پاراگراف وارد می کنیم . و همچنین برای div یک id به نام rect قرار می دهیم .

hyy

گام سوم

حالا می خواهیم به مستطیل رنگ و لعاب بدهیم که این کار را با استفاده از دستورات css انجام می دهیم . پس در قسمت head تگ <style> ایجاد می کنیم و دستورات خود را وارد می کنیم .

juu

در دستورات که در بالا اضاف شد ما رنگ مستطیل (div) و کادر دور آن و رنگ پس زمینه آن را مشخص کردیم . و همچنین برای پاراگراف(p) هم تعریف کردیم که

در قسمت میانی دایو قرار بگیرد .
گام چهارم

حال به سراغ جاوا اسکریپت می رویم . در قسمت body یک تگ <script> را باز کرده و می بندیم (ایجاد می کنیم) و کد های زیر را به آن اضاف می کنیم :

iyy

تشریح : در خط ۱ یک متغیر به نام rect ایجاد می کنیم . و در ادامه آن را برابر با استایل(خصوصیات) دایوی که نامش rect بود قرار می دهیم .

پس اول به وسیله دستور grtElementById عنصر مورد نظر را می گیریم و سپس یک نقطه گذاشته و سپس می نویسیم style .

یه وسیله ی این دستور می توانیم به استایل یک عنصر دسترسی پیدا کنیم .

در خط ۲ از یک شنونده رویداد استفاده کرده ایم . توجه کنید که document به معنی سند html است . به برنامه می گوییم که وقتی رویداد onmousemove روی سند اچ تی ام ال (صفحه اصلی)رخ داد خصوصیات این رویداد را در متغیر event ذخیره کرده و به تابع رو به روی آن بفرست .

رویداد ommousemove یعنی همان حرکت ماوس . بعبارت ساده تر به برنامه می گوییم که وقتی ماوس روی صفحه حرکت کرد خصوصیات حرکت را به تابع مورد نظر بده .. و تابع مورد نظر و دستورات درون آن را اجرا کن .

پس وقتی ماوس حرکت می کند خصوصیات حرکت به تابع ارسال شده و تابع اجرا می شود .

در خط ۳ و ۴ متغیرهایی به نام x و y را ایجاد کرده ایم تا مختصات ماوس را به دست بیاوریم و درون آنها قرار دهیم .

event.clientX یعنی از همان رویداد که رخ داد و ما به نام event آن را به تابع ارسال کردیم ، x آن را بگیر و به ما بده .

event.clientY هم همانطور است . یعنی y ماوس را به ما بده . و سپس آنها را در متغیر هایی به نام x و y ذخیره کن .

خب حالا ما مختصات ماوس را در اختیار داریم . می خواهیم این مختصات را به مستطیل مفروض بدهیم .

rect.left , rect.top یعنی مختصات سمت بالا و مختصات سمت چپ مستطیل که آنها را برابر با x و یا y قرار داده ایم و همچنین به آنها عبارت ‘px’ را هم افزوده ایم .

حتما باید عبارت ‘px’ به انها افزوده شود .

پس کد ما به شکل زیر در می آید :

jgg

khh