حرکت جعبه متن کنار ماوس
مقدمه
در این آموزش می خواهیم یک متن را در درون یک 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>
- نوشته شده توسط احسان عباسی
- بازدید: 16269