سبد (0)

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

مقدمه

در این آموزش می خواهیم یک متن را در درون یک div قرار دهیم  که به شکل یک مستطیل است . و کاری کنیم که این مستطیل در کنار ماوس  و با حرکت ماوس حرکت کند . 

گام اول

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

کد 1.1

<html>

<head>
</head>

<body>

</body>

</html>

گام دوم  

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

کد2.1

<html>

<head>
</head>

<body>
 <div id="rect">
  <p>حرکت مستطیل</p>
 </div>

</body>

</html>

گام سوم 

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

کد 3.1

<html>

<head>

<style>
#rect{
position:absolute;
width:150px;
height:70px;
border:1px solid black;
background-color:#e470ff;
}
p{
margin:20px;
}
</style>

</head>

<body>
 <div id="rect">
  <p>حرکت مستطیل</p>
 </div>

</body>

</html>

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

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

گام چهارم 

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

کد 4.1 فرعی جاوا اسکریپت

1 var rect=document.getElementById("rect").style;

2 document.onmousemove=function(event){

3 var x=event.clientX;
4 var y=event.clientY;
5 rect.left=x+'px';
6 rect.top=y+'px';

7 }

تشریح : در خط ۱ یک متغیر به نام 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' به انها افزوده شود .  

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

4.2

<html>

<head>

<style>
#rect{
position:absolute;
width:150px;
height:70px;
border:1px solid black;
background-color:#e470ff;
}
p{
margin:20px;
}
</style>

</head>

<body>
 <div id="rect">
  <p>حرکت مستطیل</p>
 </div>

<script>

 var rect=document.getElementById("rect").style;

 document.onmousemove=function(event){

 var x=event.clientX;
 var y=event.clientY;
 rect.left=x+'px';
 rect.top=y+'px';

 }

</script>
</body>

</html>
خودتان امتحان کنید »

   

  

نوشته شده توسط احسان عباسی
بازدید: 16622

آموزش صوتی JavaScript

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

در میان شش هزار مطلب آموزشی منتشر شده در بیاموز، جستجو نمایید ...

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین - بانک ملت معرفی بیاموز در شبکه سه