jQuery 放大镜功能 简易放大镜
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>放大的图片</title>
<script src="./js/jquery.min.js"></script>
<style>
*{margin:0;padding: 0;}
.box_images{width:600px;margin: 0 100px; text-align: center;position:relative;}
.box_images .box{width:auto;height:350px;overflow: hidden;max-width: 100%;max-height: 100%;display:flex;align-items: center;justify-content: center}
.box_images .box img{width:auto;height:auto;max-height: 100%;max-width: 100%;}
.fat{position: absolute; top: 0; left: 110%;width:400px;display: none;overflow: hidden;box-sizing: border-box; height: 350px;}
.fatBox{position: relative;display: block;;width:100%;height:100%;}
.fatBox img{position: absolute;top:0;left:0;object-fit: cover;}
</style>
</head>
<body>
<div class="box_images">
<div class="box">
<img src="images/mei.jpg" alt="">
<!--<img src="images/beauty.jpg" alt="">-->
</div>
<div class="fat">
<div class="fatBox">
<img src="" alt="">
</div>
</div>
</div>
<script>
function magnify(){
let imagesBox = $(".box");
let boxImg = $(".box img");
let boxImgH = boxImg.height();
let boxImgw = boxImg.width();
let fat = $(".fat");
let fatImg = $(".fat img");
//定义一个变量来确定移动比例;
let nums = 3;
//当前鼠标移入,移除
boxImg.hover(function(){
let $_this = $(this);
fat.show()//显示放大区域
let srcIs = $_this.attr("src");
fatImg.attr("src", srcIs)
},function(){
fat.hide();//隐藏放大的区域
});
//当鼠标滑动的时候
boxImg.on("mousemove",function(e){
event = e || window.event;//兼容IE
let offset_top = $(this).offset().top;
let offset_left = $(this).offset().left;
//动态设置 fatImg 的宽度
fatImg.css({width:boxImgw*nums,height:boxImgH*nums,'object-fit': 'cover'});
let x = e.pageX , y = e.pageY;
let xx = x - offset_left;
let yy = y - offset_top;
let xy = (x - offset_left) * nums;
let yx = (y - offset_top) * nums;
if(xy > fatImg.width() - fat.width() ){
xy = fatImg.width() - fat.width()
}
if(yx > fatImg.height() - fat.height() ){
yx = fatImg.height() - fat.height()
}
fatImg.css({
top:-yx,
left:-xy
})
})
}
magnify();
</script>
</body>
</html>
说明： 此代码属于个人笔记。不做他用勿喷。
