111.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 边框 */
#main {
width: 635px;
height: 310px;
/* border:1px solid blue; */
}
#main #content img {
max-height: 310px;
max-width: 310px;
vertical-align: middle;
}
#show{
display: inline-block;
height: 310px;
width: 310px;
border: 1px solid silver;
/* text-align: center; */
}
a{
display: inline-block;
border: 1px yellow solid;
}
#content {
float: left;
position: relative;
/* border: 1px solid red; */
width: 310px;
height: 310px;
}
#square {
cursor:pointer;
background:url('./img/mask2.png');
/* opacity: 0.5; */
left: 0px;
top: 0px;
position: absolute;
display: none;
}
#enlarge {
float: right;
width: 310px;
height: 310px;
/* background-color: red; */
background: url('./img/05.jpg') no-repeat;
display: none;
border: 1px silver solid;
}
</style>
</head>
<body>
<div id="main">
<!-- 正方块310px -->
<div id="content">
<!-- 要展示的图片 -->
<a id='show'>
<img id="midImg" src="./img/05_mid.jpg" alt="">
</a>
<!-- 小正方块 -->
<div id="square">
</div>
</div>
<!-- 放大的区域 正方块310px -->
<div id="enlarge">
</div>
</div>
<div>
<img style="display: none;" id="bigImg" src="./img/05.jpg" />
</div>
<script>
var content = document.getElementById('content');
var square = document.getElementById('square');
var enlarge = document.getElementById('enlarge');
var midImg = document.getElementById('midImg');
var bigImg = document.getElementById('bigImg');
var show = document.getElementById('show');
content.onmouseover = function () {
// alert(square.offsetHeight)
// square.style.width = a + 'px';
// square.style.height = b + 'px';
enlarge.style.display = 'block';
square.style.display = 'block';
// midImg/bigImg=square/enlarge;
}
content.onmouseout = function () {
enlarge.style.display = 'none';
square.style.display = 'none';
}
content.onmousemove = function (e) {
//clientWidth不带边框
// alert(bigImg.width)
//设置蓝色小方块的大小
var n=enlarge.offsetWidth/(bigImg.width/midImg.width);
square.style.width=n+'px';
square.style.height=n+'px';
// alert(square.style.width)
var _event = e || window.event;
var mouseLeft = _event.clientX;
var mouseTop = _event.clientY;
var squareLeft = mouseLeft - square.offsetWidth / 2;
var squareTop = mouseTop - square.offsetHeight / 2;
if (squareLeft >= midImg.width - square.offsetWidth) {
squareLeft = midImg.width - square.offsetWidth;
}
if (squareTop >= midImg.height - square.offsetHeight) {
squareTop = midImg.height - square.offsetHeight;
}
if (squareTop < 0) {
squareTop = 0;
}
if (squareLeft < 0) {
squareLeft = 0;
}
square.style.left = squareLeft + 'px';
square.style.top = squareTop + 'px';
var scaleX = squareLeft / midImg.width;
var scaleY = squareTop / midImg.height;
var enlargeLeft= scaleX * bigImg.width;
var enlargeTop= scaleY * bigImg.height;
enlarge.style.backgroundPosition='-'+enlargeLeft+'px -'+enlargeTop+'px';
}
</script>
</body>
</html>
mask.png
