محاسبه فاصله بین ماوس و عنصر مورد نظر

- visibility ۲ mode_comment

شاید تا حالا براتون پیش اومده باشه که بخواین فاصله ی ( Distance ) بین ماوستون و عنصری در صفحه رو محاسبه کنبد.

در این مطلب میخوام چنین کدی رو در اختیارتون قرار بدم.

برای دیدن دمو به اینجا برید.

 

کدهای HTML :

در تگ P فاصله مورد نظر قرار میگیره. تگ Div هم عنصر مورد نظر ما هست. کتابخانه jQuery رو هم به فایلتون اضافه کنید.

 

کدهای CSS :

کدهای jQuery :

اگه اینکارارو انجام بدین در نهایت در وسط صفحتون یک مربع سیاه رنگ دارین که با جابجا کردن ماوستون ، در هر لحظه فاصله ی ماوستون از مرکز این مربع محاسبه میشه و در مقابل Distance نمایش داده میشه.

 

منبع : CSS-Tricks

امیدوارم بدردتون بخوره.

موفق باشید.

comment دیدگاه کاربران
مهدی اکرمی

سلام آقای اسفندیاری
جالب بود ولی یه مشکلی داره !
فاصله رو نسبت به مرکز عنصر تایین میکنه !!!
یعنی اگه عنصر padding داشته باشه کلا اشتباه میشه!
راستی نویسندگی تون رو تبریک میگم 🙂 انشاا… موفق باشید … ❓

محمد اسفندیاری

مرسی ممنون از لطفتون
بله درسته
هدف من دادن ایده به کاربران بود
همونطور که خودتون میدونین برای رفع این مشکل راههای زیادی وجود داره
موفق باشید……یا علی

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.