حرکت یک عنصر کنار نشانگر موس | نائی وب

امیرحسین نائی | نائی وب

حرکت یک عنصر کنار نشانگر موس

حرکت یک عنصر کنار نشانگر موس

برای اینکه یک عنصر کنار نشانگر موس حرکت کند از کد جاوااسکریپت زیر استفاده میکنیم:

	
<html>
<head>
<title>ahnaei.ir</title>
<script>
function move(){
	var myid=document.getElementById("myid");
	x=event.clientX;
	y=event.clientY; 
	myid.style.left=x;
	myid.style.top=y;
}
</script>
</head>
<body onmousemove="move()">
<b id="myid" style="position:fixed;">AmirHossein Naei</b>
</body>
</html>
		
	

در خط اول کدهای جاوا اسکریپت عنصر مورد نظرمون رو انتخاب کردیم و در متغیر myid ریختیم.
در دو خط بعد مختصات نشانگر موس رو دریافت کردیم.
در دو خط بعدی هم مختصات عنصرمون رو با مختصات نشانگر موس برابر کردیم.
در قسمت تگ body هم با شناسه onmousemove تعریف کردیم که هر موقع که نشانگر موس تکون خورد تابع move() اجرا بشه.

من در مثال بالا عنصر رو یک متن در نظر گرفتم اما شما میتونید هر چیزی قرار بدید
فقط کافیه ای دی myid رو به عنصر مورد نظر بدید و position رو هم fixed کنید.

	
<html>
<head>
<title> naeiweb.com </title>
<script>
function move(){
	var myid=document.getElementById("myid");
	x=event.clientX;
	y=event.clientY; 
	myid.style.left=x;
	myid.style.top=y;
}
</script>
</head>
<body onmousemove="move()">
<img id="myid" src="https://naeiweb.com/image/logo.png" style="position:fixed;" >
</body>
</html>
	

تاریح ارسال/ویرایش پست : 27/5/1395

مدیر سایت

امیرحسین نائی | نائی وب

امیرحسین نائی هستم .
متولد سال 1379 ، عاشق برنامه نویسی ، مخصوصا اندروید و وب :)
مشتاق برای یادگیری بیشتر ...
خستگی ناپذیر و بدون توقف !!! (بیشتر ...)

نظرات

نظرات hedyeh

خوب بود ...

نظرات reza512

عالی بود .

ارسال نظر

account_circle
mail
security
متن نظر :