سلام من میخواستم یک عکس توی موقعیت y قرار بگیره و وقتی ماوس میاد توی موقعیت x همون عکس هاور میکنه 10px به سمت چپ بره و اگه ماوس روی موقعیت n عکس هاور شد این عکس به سمت راست 10px حرکت کنه

سلام سوالتون خیلی واضح نیست. اما این چیزی من متوجه شدم، با استفاده جاوا اسکریپت یا جی کوئری میتونید انجام بدید

عکس واکنش گرا به ماوس

سلام 🖐
امیدوارم حالت خوب و عالی باشی🙏

برای ایجاد این عملکرد در HTML و CSS و JavaScript، میتونی از کدهای زیر استفاده کنی:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hover Image</title>
    <link rel="stylesheet" href="https://roocket.ir/style.css">
</head>
<body>
    <div class="container">
        <img src="your-image.jpg" alt="Your Image" class="hover-image" id="image">
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (style.css):

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.container {
    position: relative;
}

.hover-image {
    transition: transform 0.3s ease;
}

.hover-left {
    transform: translateX(-10px);
}

.hover-right {
    transform: translateX(10px);
}

JavaScript (script.js):

const image = document.getElementById("image");

image.addEventListener("mouseover", () => {
    image.classList.add("hover-left");
});

image.addEventListener("mouseout", () => {
    image.classList.remove("hover-left", "hover-right");
});

image.addEventListener("mousemove", (e) => {
    const mouseX = e.clientX;
    const imageX = image.getBoundingClientRect().left + window.scrollX;

    if (mouseX < imageX) {
        image.classList.remove("hover-right");
        image.classList.add("hover-left");
    } else if (mouseX > imageX + image.width) {
        image.classList.remove("hover-left");
        image.classList.add("hover-right");
    } else {
        image.classList.remove("hover-left", "hover-right");
    }
});

این کد تصویر را در موقعیت اولیه نمایش میده. وقتی موس روی تصویر میاد، تصویر به سمت چپ 10px حرکت میکنه. اگر موس از تصویر خارج بشه یا روی تصویر نگه داشته بشه ، تصویر به حالت اولیه باز می‌گرده. همچنین، اگر موس به سمت راست تصویر بروید، تصویر به سمت راست 10px حرکت می‌کند.

امیدوارم پاسخم بهت کمک کرده باشه | تشکر❤️
موفق و پیروز باشی 🤘🌹

عکس واکنش گرا به ماوس

پاسخ‌ها

واحد های واکنشگرا

اسکرو در حالت موبایل

مشکل ثبت داده ها در لایو وایر

عکس گرفتن از نقشه

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

عکس واکنش گرا به ماوس

پاسخ‌ها

گفتگوهای مرتبط

واحد های واکنشگرا

اسکرو در حالت موبایل

مشکل ثبت داده ها در لایو وایر

عکس گرفتن از نقشه

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید