大致效果如下:
js部分:
首要是自己先引入jquery.js文件,可自行去官网找
<script src="jquery.js"></script>
<script>
$(window).on('load', function () {
//1、当鼠标放至小图,出现黄色遮罩和右侧的大图
$('.imgbox').on('mouseover', function (e) {
$('.scale').css('display','block')
$('.mask').css('display','block')
//2、黄色遮挡层跟随鼠标功能
$('.imgbox').on('mousemove',function (e) {
// 鼠标在盒子里的坐标
var x = e.pageX - $('.imgbox').offset().left
var y = e.pageY - $('.imgbox').offset().top;
// mask 最终的left和top值
var maskX = x - $('.mask').width()/ 2;
var maskY = y - $('.mask').height() / 2;
var gapX = $('.imgbox').width() - $('.mask').width();
var gapY = $('.imgbox').height() - $('.mask').height();
if (maskX <= 0) {
maskX = 0; // 黄色遮挡层不能超出左边框
}else if (maskX >= gapX) {
maskX = gapX; // 黄色遮挡层不能再右移
}
//Y同理
if (maskY <= 0) {
maskY = 0;
}else if (maskY >= gapY) {
maskY = gapY;
}
$('.mask').css('left',maskX + 'px')
$('.mask').css('top',maskY + 'px')
$('.scale img').css('left',-1 * maskX + 'px')
$('.scale img').css('top',-1 * maskY + 'px')
})
})
$('.imgbox').on('mouseleave', function () {
$('.scale').css('display','none')
$('.mask').css('display','none')
})
})
</script>
html:
(其中,图片自己找一张哈)
<div class="imgbox">
<img style="height: 455px;width: 455px;" src="/img1.png" alt="">
<div class='mask'></div>
<div class="scale">
<img src="/img1.png" alt="">
</div>
</div>
css:
.imgbox{position: relative;width: 455px;height: 455px;border: 1px solid #ccc;}
.mask {display: none;position: absolute;top: 0;left: 0;width: 300px;height: 300px;background-color: #FEDE4F;opacity: .5;cursor: move;/* 鼠标按下时出现十字键头 */}
.scale {display: none;position: absolute;top: 0px;left: 460px;width: 600px;height: 600px;z-index: 999;/* 用z-index让它显示在最上层 */border:1px solid #ccc;overflow:hidden; /* 超出盒子的部分隐藏 */}
.scale img {position:absolute;top:0;left:0;}