鼠标滑过放大图片局部
Posted myhanyu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了鼠标滑过放大图片局部相关的知识，希望对你有一定的参考价值。
<!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>
效果如下：
此处的图片路径可以自行更换。
以上是关于鼠标滑过放大图片局部的主要内容，如果未能解决你的问题，请参考以下文章