放大镜练习

最新推荐文章于 2024-07-14 16:43:41 发布

我若成魔，佛赖我何，我就是程序狂魔

最新推荐文章于 2024-07-14 16:43:41 发布

阅读量128

点赞数 7

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/wangmengsasa/article/details/125503319

版权

HTML代码

   <div class="box">
      <div class="min-img">
        <img src="img/01.gif" alt="" width="300" height="300">
      </div>
      <p class="touming"></p>
      <div class="max-img">
        <img src="img/01.gif" alt="" width="800" class="datu">
      </div>
   </div>

CSS代码

  *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            width: 300px;
            height: 300px;
            margin: 40px auto;
            border: 1px solid gray;
            position: relative;
        }
        .box>.min-img{
            width: 300px;
            height: 300px;
        }
        
        .box>.touming{
            width: 100px;
            height: 100px;
            background: yellow;
            opacity: .5;
            position: absolute;
            top: 0px;
            left: 0px;
            display: none;
        }
        .box>.max-img{
            width: 500px;
            height: 500px;
            border: 1px solid gray;
            position: absolute;
            top: 400px;
            left: 0px;
            overflow: hidden;
            display: none;
        }
        .box>.max-img>.datu{
            position: absolute;
            top: 0px;
            left: 0px;
        }

JS代码

 function fangdajing(){//封装函数
           let box=document.querySelector(".box");
           let touming=document.querySelector(".box .touming");
           let datu=document.querySelector(".box .max-img .datu");
           let max=document.querySelector(".box .max-img"); 
     // offsetLeft意思是obj相对于版面或offsetParent属性指定的附坐标左侧位置,单位是像素
           let offleft=box.offsetLeft;
		   // offsetLeft意思是obj相对于版面或offsetParent属性指定的附坐标上侧位置,单位是像素
		   let offtop=box.offsetTop;
		   //鼠标移动触发事件，这里是鼠标移动获取鼠标位置的意思，
		   box.onmousemove=function(e){
            //鼠标移动在浏览器的横向位置
			   let x=e.pageX;
               //鼠标移动在浏览器竖向位置
			   let y=e.pageY;
               //鼠标X移动是100px让透明区域在X显示
			   let left=x-offleft - 100;
               //鼠标在Y轴移动100px让透明区域Y显示
			   let top=y-offtop - 100;
               //判断左边最大距离等于200
			   if(left>200){
				   left=200;
			   }
               //左边最小距离等于0
			   if(left<0){
				   left=0;
			   }
               //顶部最大距离等于200
			   if(top>200){
				   top=200;
			   }
               //顶部最小距离等于0
			   if(top<0){
				   top=0;
			   }
			   // 设置touming的位置
			   touming.style.left=left+"px"
			   touming.style.top=top+"px"
			   //获取图片的实际宽度
			   let imgwidth=datu.offsetWidth
               //获取图片的实际高度
			   let imgheight=datu.offsetHeight
			   let imgmaxwidth=imgwidth - 500
			   let imgmaxheight=imgheight - 500
			   // 计算大图片移动的距离x y
			   let imgx=(left*imgmaxwidth) / 200
			   let imgy=(top*imgmaxheight) / 200
			   // 设置图片的决定位置
			   datu.style.left= -imgx+"px"
			   datu.style.top= -imgy+"px"
		   }
           //鼠标移入显示元素
               box.onmouseover=function(){
               touming.style.display="block"
               max.style.display="block"
        }
    //鼠标移出隐藏元素
              box.onmouseout=function(){
               touming.style.display="none"
               max.style.display="none"
         }
    }
              fangdajing()//调用函数

效果图