고정 헤더 영역
상세 컨텐츠
본문
반응형
동적으로 이미지 리스트를 생성 할때 on을 사용하여 이미지 확대 하는 소스 입니다.
body 에 p 태그를 선언하고 해당 테그 안에 이미지를 넣어 보여주는 소스 입니다.
<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 = 10;
var yOffset = 30;
$(document).on("mouseover",".thumbnail",function(e){ //마우스 오버시
$("body").append("<p id='preview'><img src='"+ $(this).attr("src") +"' width='400px' /></p>"); //보여줄 이미지를 선언
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast"); //미리보기 화면 설정 셋팅
});
$(document).on("mousemove",".thumbnail",function(e){ //마우스 이동시
$("#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' />
</body>
</html>
반응형
'JavaScript & HTML' 카테고리의 다른 글
| javascript 삼항연산자, 체크박스 체크여부 (checkbox true false) (0) | 2015.06.25 |
|---|---|
| jquery each break (루프 밖에서는 'break'을 사용할 수 없습니다.) (0) | 2015.06.24 |
| jQuery Event (0) | 2015.06.18 |
| Select Box jQuery (0) | 2015.06.18 |
| html5 지원 (현재 브라우저 점수) (0) | 2015.06.05 |
댓글 영역