鼠標滑過放大圖片局部
阿新 • • 發佈：2018-07-24
處的 mage oev 100% left cli cal 20px 圖片路徑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
#box{
position:relative;
top:0;
left:0;
width:500px;
height:350px;
}
#box img{
width:100%;
height:100%;
}
#point{
position:absolute;
top:0;
width:150px;
height:100px;
background:rgba(0,0,0,0.2);
display:none;
}
#big{
position:absolute;
top:0;
left:520px;
width:500px;
height:350px;
overflow:hidden;
}
#big img{
position:absolute;
top:0;
left:0;
width:1000px;
height:700px;
display:none;
}
</style>
<script>
window.onload=function() {
var oPoint = document.getElementById(‘point‘);
var oBox = document.getElementById(‘box‘);
var oBig = document.getElementById(‘big‘);
var oMove = document.getElementById(‘move‘);
oBox.onmouseover = function (ev) {
var oEvent = ev || event;
oPoint.style.display = ‘block‘;
oMove.style.display = ‘block‘;
};
oBox.onmouseout = function (ev) {
var oEvent = ev || event;
oPoint.style.display = ‘none‘;
oMove.style.display = ‘none‘;
};
oBox.onmousemove = function (ev) {
var oEvent = ev || event;
var l = oEvent.clientX - oPoint.offsetWidth / 2;
var t = oEvent.clientY - oPoint.offsetHeight / 2;
if (l < 0) {
l = 0;
} else if (l > oBox.offsetWidth-oPoint.offsetWidth) {
l = oBox.offsetWidth-oPoint.offsetWidth;
}
if (t < 0) {
t = 0;
} else if (t > oBox.offsetHeight-oPoint.offsetHeight) {
t = oBox.offsetHeight-oPoint.offsetHeight;
}
var scale = l * (oBig.offsetWidth - oMove.offsetWidth) / (oBox.offsetWidth - oPoint.offsetWidth);
var scale2 = t * (oBig.offsetHeight - oMove.offsetHeight) / (oBox.offsetHeight - oPoint.offsetHeight);
oMove.style.left = scale + ‘px‘;
oMove.style.top = scale2 + ‘px‘;
oPoint.style.left = l + ‘px‘;
oPoint.style.top = t + ‘px‘;
};
}
</script>
</head>
<body>
<div id="box">
<img src="image/a(1).jpg"/>
<span id="point"></span>
</div>
<div id="big">
<img src="image/a(1).jpg" id="move"/>
</div>
<!--<div id="point"></div>-->
</body>
</html>
效果如下：
此處的圖片路徑可以自行更換。
鼠標滑過放大圖片局部