تخفیف ویژه هفته کتاب و کتاب خوانی، فرصت یادگیری با 40٪ تخفیف (کد تخفیف: Ketab)
زمان باقی مانده
سبد (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>
خودتان امتحان کنید »

   

  

دیدگاه‌ها  

+1 # محمدرضا محبی 1394-06-03 21:25
جا داره حتما از شما تشکر کنم واقعا ممنون و خسته نباشید
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # شهربانو دوستی 1394-06-04 00:41
سلام
ممنون از لطف شما.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # lili foroghi 1393-10-28 13:08
سلام میشه ساخت اسلاید شو رو به صورت مرحله به مرحله آموزش بدید؟؟؟؟؟ خیلی نیاز دارم.! لطفا مرسی
روز بخیر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # احسان عباسی 1393-11-05 16:25
سلام نمونه ی یک اسلاید شو رو می تونید در آدرس زیر ببینید :
http://codepen.io/sbaloot/pen/NPjqea
یا اینکه یک نمونه ی ساده تر را در آدرس زیر ببینید:
http://codepen.io/sbaloot/pen/OPXqpK?editors=001
آموزش گام به گام یک نمونه ی ساده اسلاید شو را بعدا قرار خواهیم داد
یا اگر که با جی کوئری آشنایی دارید می توانید اسلاید شو زیبای زیر را ببینید:
http://codepen.io/bozdoz/pen/esakE

اگر که یک اسلاید شو آماده و کاربردی را لازم دارید می توانید آن را از سایت زیر دانلود کنید و همچنین دستور کار آن را در این سایت ببینید:
http://webbies.dk/SudoSlider/#download
http://webbies.dk/assets/files/SudoSlider/package/demos/all%20effects.html
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1393-10-28 13:31
سلام، به لینک زیر برید:
www.beyamooz.com/jquery/340-jquery-plugin/2603
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # احسان عباسی 1393-08-07 16:49
مقالات درخواستی خود را به ایمیل بنده ارسال کنید یا در قسمت نظرات درخواست کنید .
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # N.I 1393-11-02 21:59
سلام
لطفا نحوه ی استایل دادن به title عکس ها رو بگید خیلی نیاز دارم
ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # احسان عباسی 1393-11-05 17:13
سلام . تگimg خصوصیتی به نام title ندارد . اما فکر می کنم که منظور شما innerHTML (متن درون تگ) این تگ باشد . که در این صورت هم دستور innerHTML برای این تگ کار نمی کند .می توانید عکس را در درون یک div قرار دهید .
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی JavaScript

بستن
مدرس:
سوال و جواب:

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

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

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