728x90
300x250
SMALL
$("#target").animate({
left:이동 위치값,
top:이동 위치값
}, 이동시간);
이미지 부드럽게 이동하기 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지 부드럽게 이동하기</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<style>
#movingImage {
position: absolute;
left: 0;
top: 0;
transition: left 0.5s, top 0.5s; /* CSS transition 속성을 이용해 부드러운 이동 효과 추가 */
}
</style>
</head>
<body>
<img id="movingImage" src="your_image_url.jpg" alt="Moving Image">
<script>
$(document).ready(function() {
// 이미지를 클릭할 때 부드럽게 이동
$("#movingImage").on("click", function() {
// 새로운 위치로 이동
var newX = 100; // 원하는 x 좌표
var newY = 50; // 원하는 y 좌표
// animate() 함수를 사용하여 부드럽게 이동
$(this).animate({
left: newX + "px",
top: newY + "px"
}, 500); // 500ms 동안 부드럽게 이동
});
});
</script>
</body>
</html>728x90
반응형
LIST
'javaScript > jQuery' 카테고리의 다른 글
| 심플 갤러리 부드럽게 정렬하기 - 비공개 (0) | 2024.01.11 |
|---|---|
| jQuery nice-select 다운 및 select 꾸미기 (0) | 2024.01.10 |
| html 특정 태그 안의 텍스트만을 가져오고 싶을때 (0) | 2023.12.13 |
| detach() 메서드 (0) | 2023.11.12 |
| 한줄 공지사항 상하 롤링 - 비공개 (0) | 2023.10.22 |
댓글