گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
ثبت پرسش جدید
![user-avatar]()
دولوپر باهوش
@devbrain
1 سال پیش
مطرح شد
گزارش تخلف
کپی کردن
0
سلام
سوالتون خیلی واضح نیست.
اما این چیزی من متوجه شدم، با استفاده جاوا اسکریپت یا جی کوئری میتونید انجام بدید
گزارش تخلف
کپی کردن
0
سلام 🖐
امیدوارم حالت خوب و عالی باشی🙏
برای ایجاد این عملکرد در 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="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 حرکت می‌کند.
امیدوارم پاسخم بهت کمک کرده باشه | تشکر❤️
موفق و پیروز باشی 🤘🌹