Jquery 또는 플러그인없이 마우스 오버 확대
HTML 코드 :
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<img id="imgZoom" onmousemove="zoomIn()" onmouseout="zoomOut()" src="http://ginger-mum.com/wp-content/uploads/2015/10/3633-1269758855-0da5042c33400a811a5d766be4579cb8.jpg">
<div id="overlay" onmousemove="zoomIn()"></div>
</body>
</html>
CSS 코드 :
#imgZoom {
height: 300;
}
#overlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:20%;
height:20%;
padding: 25px;
border: 5px solid gray;
background-color: white;
opacity:0.4;
text-align:center;
z-index: 1000;
}
자바 스크립트 코드 :
function zoomIn()
{
var element = document.getElementById("overlay");
element.style.visibility = "visible";
var x = event.clientX; // Get the horizontal coordinate
var y = event.clientY; // Get the vertical coordinate
element.style.top = y - 80;
element.style.left = x - 80;
}
function zoomOut()
{
var element = document.getElementById("overlay");
element.style.visibility = "hidden";
}
마우스 오버에서 배경 위치를 재생하여 마우스 오버에서 배경 위치를 이동하면됩니다. DEMO
function zoomIn(event) {
var element = document.getElementById("overlay");
element.style.display = "inline-block";
var img = document.getElementById("imgZoom");
var posX = event.offsetX ? (event.offsetX) : event.pageX - img.offsetLeft;
var posY = event.offsetY ? (event.offsetY) : event.pageY - img.offsetTop;
element.style.backgroundPosition = (-posX * 4) + "px " + (-posY * 4) + "px";
}
function zoomOut() {
var element = document.getElementById("overlay");
element.style.display = "none";
}#overlay {
border: 1px solid black;
width: 200px;
height: 200px;
display: inline-block;
background-image: url('http://ginger-mum.com/wp-content/uploads/2015/10/3633-1269758855-0da5042c33400a811a5d766be4579cb8.jpg');
background-repeat: no-repeat;
}<img id="imgZoom" width="200px" height="200px" onmousemove="zoomIn(event)" onmouseout="zoomOut()" src="http://ginger-mum.com/wp-content/uploads/2015/10/3633-1269758855-0da5042c33400a811a5d766be4579cb8.jpg">
<div id="overlay" onmousemove="zoomIn(event)"></div>이것은 나를 위해 작동합니다 : (여기 JSFiddle )
#imgZoom {
height: 300;
}
img#imgZoom:hover {
position: relative;
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
z-index: 1000;
}
멋진 전환 효과를 위해 이것을 추가 할 수도 있습니다.
* {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
* 또한 이미지뿐만 아니라 div에도 동일한 논리를 적용 할 수 있습니다.
function zoomIn(event) {
var element = document.getElementById("overlay");
element.style.display = "inline-block";
var img = document.getElementById("imgZoom");
var posX = event.offsetX ? (event.offsetX) : event.pageX - img.offsetLeft;
var posY = event.offsetY ? (event.offsetY) : event.pageY - img.offsetTop;
element.style.backgroundPosition = (-posX * 4) + "px " + (-posY * 4) + "px";
}
function zoomOut() {
var element = document.getElementById("overlay");
element.style.display = "none";
}#overlay {
border: 1px solid black;
width: 100px;
height: 100px;
display: inline-block;
background-image: url('http://ginger-mum.com/wp-content/uploads/2015/10/3633-1269758855-0da5042c33400a811a5d766be4579cb8.jpg');
background-repeat: no-repeat;
}<img id="imgZoom" width="200px" height="200px" onmousemove="zoomIn(event)" onmouseout="zoomOut()" src="http://ginger-mum.com/wp-content/uploads/2015/10/3633-1269758855-0da5042c33400a811a5d766be4579cb8.jpg">
<div id="overlay" onmousemove="zoomIn(event)"></div>
