效果
JS代码
window.addEventListener('load', function () {//获取元素var small = document.querySelector('.preview-img');var big = document.querySelector('.belt');var mask = document.querySelector('.mask');var img = document.querySelector('.belt img');//1、当鼠标按下小图时，出现黄色遮罩和右侧的大图small.addEventListener('mousedown', function (e) {//在css里面设置为none了big.style.display = 'block';mask.style.display = 'block';//2、黄色的遮挡层跟随鼠标功能，把鼠标在盒子内的坐标(x,y) 给 黄色遮挡层的中心（X,Y)small.addEventListener('mousemove', move);function move(e) {//(1)计算鼠标在盒子里的坐标var x = e.pageX - small.offsetLeft;var y = e.pageY - small.offsetTop;//（2)计算出mask 最终的left和top值，为了让鼠标在盒子中间要减去盒子自身宽高的一半var maskX = x - mask.offsetWidth / 2;var maskY = y - mask.offsetHeight / 2;// (3) 让黄色盒子不超过边界(如果x或y小于0)//如果盒子往左移动，left值小于0的话，就让它等于0，不能超出左边框//a.声明一个变量gap等于图片的宽度/高度 - 黄色遮罩的宽度/高度var gapX = small.offsetWidth - mask.offsetWidth;var gapY = small.offsetHeight - mask.offsetHeight;if (maskX <= 0) {maskX = 0;}// b.如果盒子往右移动超过 图片的宽度 - 黄色遮罩的宽度 = 455 -300 = 155 的话，那就让maskX直接等于155，不能再大else if (maskX >= gapX) {maskX = gapX;}//c. Y同理if (maskY <= 0) {maskY = 0;}else if (maskY >= gapY) {maskY = gapY;}mask.style.left = maskX + 'px';mask.style.top = maskY + 'px';// 3、移动黄色的遮挡层，大图片随之移动//让小盒子的(x,y)成为大盒子的中心//大图片与小图片的比例为2，小图片移动m，大图片就移动2mimg.style.left = -2 * maskX + 'px';img.style.top = -2 * maskY + 'px';}})// 4、鼠标抬起时，黄色的遮挡层和右边的大盒子都消失small.addEventListener('mouseup', function () {big.style.display = 'none';mask.style.display = 'none';})})
框架
<body><div class="preview-wrap"><div class="preview-img" id='preview'><img src="/第五天资料/images/pic.jpg" alt=""><div class='mask' id="mask"></div><div class="belt"><img src="/第五天资料/images/big.jpg" alt=""></div></div></div></body>
样式
<style>.preview_wrap {width: 400px;height: 500px;}.preview-img {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;/* 鼠标按下时出现十字键头 */}.belt {display: none;position: absolute;top: 0px;left: 460px;width: 600px;height: 600px;z-index: 999;/* 用z-index让它显示在最上层 */border:1px solid #ccc;overflow:hidden; /* 超出盒子的部分隐藏 */}.belt img {position:absolute;top:0;left:0;}
