반응형
이벤트를 발생시킬 태그(gallery)에 마우스 커서를 오버하면 이미지가 자세히 나타나고,
해당영역에서 마우스를 이동하면 오버한 이미지의 위치가 변경된다.
마지막으로 마우스 아웃시 해당 이미지는 사라진다.
간단한 소스 이므로 예제를 보시면 쉽게 이해 되실거라 믿습니다.
mouseover() - 이벤트 태그의 영역에 들어왔을때 발생
mousemove() - 이벤트 태그에서 이동시 발생
mouseout() - 이벤트 태그의 영역 아웃시 발생
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
#preview {z-index:9999999;position:absolute;}
</style>
<script>
$(function() {
var xOffset = 10;
var yOffset = 30;
//마우스 오버시 preview 생성
$(document).on("mouseover",".gallery",function(e){
var image_data = $(this).data("image");
var add_caption = (image_data != undefined) ? "<br/>" + image_data : "" ;
$("body").append("<p id='preview'><img src='"+ $(this).attr("src") +"' width='500px' />"+ add_caption +"</p>");
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
});
//마우스 이동시 preview 이동
$(document).on("mousemove",".gallery",function(e){
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
//마우스 아웃시 preview 제거
$(document).on("mouseout",".gallery",function(){
$("#preview").remove();
});
});
</script>
<body>
<div id="img">
<p><img src='20220926_1664175902.png' class='gallery' width='100px'></p>
</div>
</body>반응형
'개발이야기 > jQuery' 카테고리의 다른 글
| [jQuery] 자식 요소 찾기, children() 사용법 / 테이블 행 정보 가져오기 (2) | 2022.10.06 |
|---|---|
| [jQuery] 휴대폰 번호, 전화번호 자동으로 하이픈 넣기 (keyup) (1) | 2022.10.05 |
| [jQuery] html 화면 PDF 다운로드 (1) | 2022.09.26 |
| [jQuery] 테이블(table)행 추가/삭제 (0) | 2022.09.23 |
| [jQuery] 상하롤링, 위아래 롤링 (1) | 2022.09.21 |
댓글