要求：鼠标放上去之后，能够在旁边出现一个放大的大图片
1，先写两个盒子，都设置为隐藏
在大盒子里添加一个小盒子，并设置半透明
.mask{position: absolute;left: 0;top: 0;height: 200px;width: 200px;background-color: #FEDE4F;/* 半透明 */opacity: 0.5;/* 鼠标经过箭头变成十字形状 */cursor: move;}
在旁边建一个大盒子用于显示放大的效果，并且设置显示在最上层
.big{position: absolute;left: 410px;top: 0;width: 500px;height: 500px;background-color: pink;overflow: hidden;/* 设置显示最上层 */z-index: 999;}
两个盒子先都设置为隐藏，等鼠标经过触发了事件再显示出来
.mask和.big里面都设置
display: none;
2.写js代码，鼠标经过两个盒子都显示出来
// 先把页面加载完再加载js。window.addEventListenerwindow.addEventListener('load',function(){var preview = document.querySelector('.preview');var mask = document.querySelector('.mask');var big = document.querySelector('.big');//鼠标经过两个盒子都显示出来preview.addEventListener('mouseover',function(){mask.style.display='block';big.style.display='block';})//鼠标离开两个盒子都消失preview.addEventListener('mouseout',function(){mask.style.display='none';big.style.display='none';})//这里填写鼠标移动的效果代码})
3.让黄色的小盒子跟着鼠标移动
把鼠标在图内的坐标给小盒子e.pageX是鼠标在整个浏览器的横坐标this.offsetLeft是装图片盒子距离浏览器左边的位置e.pageX - this.offsetLeft结果为鼠标在盒子内的位置透明盒子移动的范围控制在图片盒子中间
// 鼠标移动的效果preview.addEventListener('mousemove',function(e){// 鼠标在盒子内的位置,var x=e.pageX-this.offsetLeft;var y=e.pageY-this.offsetTop;// console.log(x,y)// 把坐标赋值个透明遮挡盒子,mask.offsetWidth是遮挡盒子的宽度// 并且把鼠标移到遮挡盒子中间,复制给小盒子坐标var maskX=x - mask.offsetWidth / 2;var maskY=y - mask.offsetHeight / 2;// preview.offsetWidth-mask.offsetWidth是最大移动的范围var maskMax = preview.offsetWidth-mask.offsetWidth;// 进行判断，不让透明盒子超出图片盒子的边界if(maskX<=0){maskX=0;// ，不能超过右边界}else if(maskX>maskMax){maskX=maskMax;}if(maskY<=0){maskY=0;// preview.offsetWidth-mask.offsetWidth是移动的范围，不能超过右边界}else if(maskY>maskMax){maskY=maskMax;}mask.style.left =maskX + 'px';mask.style.top = maskY + 'px';//大图片移动的距离代码位置})
4.让大盒子显示的图片跟着透明盒子一块移动
小盒子向右移，大盒子要向左移移动的距离成比例
大图片移动距离=透明层最大移动距离*大图片最大移动距离/透明层移动距离
//大图片移动的距离代码var big_img=document.querySelector('.big_img');// 大图片最大移动距离=大盒子－图片,款和高相同的var big_imgMax=big.offsetWidth-big_img.offsetWidth;//大图片移动距离=透明层移动距离*大图片最大移动距离/ 透明层最大移动距离 var bigX=maskX*big_imgMax/maskMax;var bigY=maskY*big_imgMax/maskMax;// 需要先给大盒子加个定位big_img.style.left= -bigX + 'px';big_img.style.top= -bigY + 'px';
欢迎关注公众号：oldCode
期待和你一起进步
公众号后台回复：放大镜效果获得整个项目文件
