script
마우스 오버시 이미지확대
- 관리자 2020.12.11 인기
-
7,566
0
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var xOffset = 0;
var yOffset = 10;
$(document).on("mouseover",".thumbnail",function(e){ //마우스 오버시
var bottom = $(window).height() - e.clientY; // bottom을 기준으로 마우스 좌표 알아내기 (현재 창 높이 - 현재 마우스 좌표)
$("body").append("<p id='preview'><img src='"+ $(this).attr("src") +"' width='300px' /></p>"); //보여줄 이미지를 선언
if(bottom <= 220){ // 현재 마우스위치가 bottom에서부터 220 이하 일때 발동
$("#preview")
.css("top",(e.pageY - 220) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast"); //bottom 에서 현재 마우스 위치가 220 이하일때 마우스 오버시 이미지가 마우스 위로 올라가기 미리보기 화면 설정 셋팅
}else{
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast"); //미리보기 화면 설정 셋팅
}
});
$(document).on("mousemove",".thumbnail",function(e){ //마우스 이동시
var bottom = $(window).height() - e.clientY;
if(bottom <= 220){
$("#preview")
.css("top",(e.pageY - 220) + "px")
.css("left",(e.pageX + yOffset) + "px") //bottom 에서 현재 마우스 위치가 220 이하일때 마우스 오버시 이미지가 마우스 위로 올라가기
}else{
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
}
});
$(document).on("mouseout",".thumbnail",function(){ //마우스 아웃시
$("#preview").remove();
});
});
</script>
<style>
/* 미리보기 스타일 셋팅 */
#preview{
z-index: 9999;
position:absolute;
border:0px solid #ccc;
background:#333;
padding:1px;
display:none;
color:#fff;
}
</style>
</head>
<body>
<img src="https://www.gstatic.com/webp/gallery/1.sm.jpg" class="thumbnail" height='50px' />
<div class="test"></div>
<img src="https://www.gstatic.com/webp/gallery/1.sm.jpg" class="thumbnail" height='50px' />
<div class="test"></div>
</body>
</html>
- 이전글jquery를 이용하여 hover시 툴팁과 이미지 미리보기2020.12.11
- 다음글audio 제어, 컨트롤2020.09.18
댓글목록
등록된 댓글이 없습니다.