<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片放大镜效果</title>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<style type="text/css">
.original-image {
float: left;
}
.slidingBlock {
position: absolute !important;
width: 190px;
height: 190px;
background-color: #ff720a;
opacity: 0.5;
pointer-events: none;
}
.enlarged-image {
background-color: white;
width: 400px;
height: 380px;
position: absolute;
margin-left: 381px;
z-index: 10;
}
.big-picture {
width: 380px;
height: 380px;
margin-left: 19px;
overflow: hidden;
border: 1px solid #e4e4e4;
}
.slidingBlock{
margin-left: 9px;
margin-top: 8px;
}
</style>
</head>
<body>
<div class="original-image" id="originalImage">
<span>
<img id="largeImage" style="height: 380px;width: 380px;cursor: move;" src="img/picture.jpg"/>
<span id="slidingBlock" class="slidingBlock" style="display: none;"></span>
</span>
</div>
<div class="enlarged-image" id="enlargedImage" style="display: none;">
<div class="big-picture" id="bigPicture">
<img id="bigImage" style="position: relative;height: 760px;width: 760px;" src="img/picture.jpg" />
</div>
</div>
<script type="text/javascript">
$(function() {
$("#originalImage").mousemove(function(event) {
$("#enlargedImage").show();
$("#slidingBlock").show();
var leftDiv = event.offsetX;
var topDiv = event.offsetY;
var widthValue = 95;
if((leftDiv < widthValue)) {
document.getElementById("slidingBlock").style.left = 0 + "px";
document.getElementById("bigImage").style.left = 0 + "px";
} else if((leftDiv + widthValue) > 380) {
document.getElementById("slidingBlock").style.left = (380 - widthValue * 2) + "px";
document.getElementById("bigImage").style.left = -380 + "px";
} else {
document.getElementById("slidingBlock").style.left = (leftDiv - widthValue) + "px";
document.getElementById("bigImage").style.left = -2 * (leftDiv - widthValue) + "px";
}
if((topDiv < widthValue)) {
document.getElementById("slidingBlock").style.top = 0 + "px";
document.getElementById("bigImage").style.top = 0 + "px";
} else if((topDiv + widthValue) > 380) {
document.getElementById("slidingBlock").style.top = (380 - widthValue * 2) + "px";
document.getElementById("bigImage").style.top = -380 + "px";
} else {
document.getElementById("slidingBlock").style.top = (topDiv - widthValue) + "px";
document.getElementById("bigImage").style.top = -2 * (topDiv - widthValue) + "px";
}
});
$("#originalImage").mouseleave(function() {
$("#enlargedImage").hide();
$("#slidingBlock").hide();
});
})
</script>
</body>
</html>