امیرحسین نائی | امیر اچ ان

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

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

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

	
<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

مدیر سایت

امیرحسین نائی | امیر اچ ان

امیرحسین نائی (amirhn - امیر اچ ان) هستم.
متولد 1379 عاشق❤️ برنامه نویسی با انواع زبان های مختلف 😃
از 15 سالگی یادگیری برنامه نویسی رو شروع کردم
و تا امروز همچنان درحال یادگیری هستم .
در تلاش برای تبدیل شدن به یک Full Stack Developer 💪
روز به روز بیشتر عاشق برنامه نویسی میشم و هرگز برام خسته کننده نمیشه !!!

نظرات

نظرات hedyeh

خوب بود ...

نظرات reza512

عالی بود .

ارسال نظر

account_circle
mail
security
متن نظر :