مینی پروژه تغییر حالت موس با js

جامعه‌ها وبلاگ شروع یادگیری برنامه نویسی

سلام خسته نباشید یک سوالی داشتم من یک فایلی آماده کردم و ضمیمه میکنم فقط در یک جا باگ داره

اگر به روی سمت چپ برویم دایره‌ها را میبینیم اما تا زمانی که موس بر روی آنها قرار دارد به سمت راست چپ بالا پایین می‌آید اگر کمی موس را تند حرکت بدیم دایره‌ها توقف میکنند امکانش هست راهنمایی کنید؟

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Movemouse Javascripttitle>

<style>

body {

background-color: #060a10;

}

.circlemousebig {

width: 25px;

height: 25px;

border: 2px solid #637bff;

border-radius: 50%;

position: fixed;

transform: translate(-50% , -50%);

}

.circlemousesmall {

width: 5px;

height: 5px;

border: 2px solid #637bff;

border-radius: 50%;

position: fixed;

transform: translate(-50% , -50%);

}

style>

head>

<body>

<div class="mouse circlemousebig">div>

<div class="mouse circlemousesmall">div>

<script>

'use strick'

let mouseMovecircle = document.querySelectorAll('.mouse');

document.getElementsByTagName('body')[0].addEventListener('mousemove' , function(event){

x = event.clientX

y = event.clientY

mouseMovecircle[0].style.top = y + 'px'

mouseMovecircle[0].style.left = x + 'px'

mouseMovecircle[1].style.top = y + 'px'

mouseMovecircle[1].style.left = x + 'px'

});

script>

body>

html>

محمد امین شفیعی ۲۴ تیر ۱۴۰۲، ۱۵:۳۷

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Movemouse Javascripttitle>

<style>

body {

background-color: #060a10;

}

.circlemousebig {

width: 25px;

height: 25px;

border: 2px solid #637bff;

border-radius: 50%;

position: fixed;

transform: translate(-50% , -50%);

}

.circlemousesmall {

width: 5px;

height: 5px;

border: 2px solid #637bff;

border-radius: 50%;

position: fixed;

transform: translate(-50% , -50%);

}

style>

head>

<body>

<div class="mouse circlemousebig">div>

<div class="mouse circlemousesmall">div>

<script>

'use strick'

let mouseMovecircle = document.querySelectorAll('.mouse');

document.getElementsByTagName('body')[0].addEventListener('mousemove' , function(event){

x = event.clientX

y = event.clientY

mouseMovecircle[0].style.top = y + 'px'

mouseMovecircle[0].style.left = x + 'px'

mouseMovecircle[1].style.top = y + 'px'

mouseMovecircle[1].style.left = x + 'px'

});

script>

body>

html>

محمد امین شفیعی ۲۴ تیر ۱۴۰۲، ۱۵:۳۸

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Movemouse Javascripttitle>

<style>

body {

background-color: #060a10;

}

.circlemousebig {

width: 25px;

height: 25px;

border: 2px solid #637bff;

border-radius: 50%;

position: fixed;

transform: translate(-50% , -50%);

}

.circlemousesmall {

width: 5px;

height: 5px;

border: 2px solid #637bff;

border-radius: 50%;

position: fixed;

transform: translate(-50% , -50%);

}

style>

head>

<body>

<div class="mouse circlemousebig">div>

<div class="mouse circlemousesmall">div>

<script>

'use strick'

let mouseMovecircle = document.querySelectorAll('.mouse');

document.getElementsByTagName('body')[0].addEventListener('mousemove' , function(event){

x = event.clientX

y = event.clientY

mouseMovecircle[0].style.top = y + 'px'

mouseMovecircle[0].style.left = x + 'px'

mouseMovecircle[1].style.top = y + 'px'

mouseMovecircle[1].style.left = x + 'px'

});

script>

body>

html>

محمد امین شفیعی ۲۴ تیر ۱۴۰۲، ۱۵:۳۸

سلام،

از توضیحات چیزی متوجه نشدم، کدتون رو روی jsfiddle آپلود کنید و لینک کنید.

محسن موحد ۲۵ تیر ۱۴۰۲، ۰۹:۲۰