js realizes the magnifying glass effect of detail page

  • 2021-09-04 23:28:57
  • OfStack

In this article, we share the specific code of js magnifying glass for your reference, the specific contents are as follows

1.html


<div id="small">
    <div id="mo">  
    </div>
    <img src="img/timg.jpg"/>
    <div id = "frame">  
    </div>  
  </div>
  <div id = "big">
    <img src="img/timg.jpg"/>
</div>  

2.css


<style>
      *{
        margin:0;padding:0;
      }
      #small{
        width:400px;
        height:400px;
        position:relative;
        box-shadow: 0 0 5px #000;
      }
      #small img{
        /*  Picture 100% , Completely overwrite the original box  */
        width:100%;
        height:100%;
      }
      #frame{
        width:100px;
        height:100px;
        position:absolute;
        box-shadow:0 0 5px #000;
        top:0;
        left:0;
        /*  Appears when the mouse moves into the original box , So the initial value is hidden  */
        display: none;
        /*  Insert a background image in a magnifying glass , Position according to background image , Change the picture in the magnifying glass and the original box 11 Correspondence  */
        /* 0 0  That is background-position Value of  */
        background: url(img/timg.jpg) no-repeat 0 0;
        /* CSS2 The contents in should be the same as those in CSS3 Separation in  */
        background-size: 400px 400px ;
      }
      #big{
        width:400px;
        height:400px;
        position:relative;
        box-shadow: 0 0 5px #000;
        /*  Because the contents of the zoom-in box 
         With a magnifying glass is 16 : 1 Amplified ,
         So when the original frame is the same size as the enlarged frame, 
         Use overflow: hidden; Intercept the size of the inserted picture with the zoom-in box  */
        overflow: hidden;
        /*  Appears when the mouse moves into the original box , So the initial value is hidden  */
        display: none;
      }
      #big img{
        width:1600px;
        height:1600px;
        position: absolute;
        left: 0;
        top:0;
      }
      
      #big,#small{
        margin-left: 100px;
        float: left;
      }
      #mo{
        /*  Uppermost 1 Layer width and height 100%, The hierarchy is at the top , Completely overlaying the original box, 
         Ensure that when the mouse moves over the original box, , The magnifying glass can move steadily, 
         That is, the reference object of mouse movement is only 1 */
        width:100%;
        height:100%;
        z-index: 999;
        position: absolute;
      }
</style>

3.js


<script>
  //获取原始框
  var oSmall = document.getElementById("small");
  //获取放大框
  var oBig = document.getElementById("big");
  //获取放大镜
  var oFrame = document.getElementById("frame");
  //获取放大框中的图片
  var oBig_img = oBig.children[0]
  //获取原始框中的图片
  var oSmall_img = oSmall.children[1];
  //鼠标移入事件(注:没有兼容问题)
  //放大镜和放大框显现出来
  oSmall.onmouseenter = function(){
    oBig.style.display = "block";
    oFrame.style.display = "block";
    //鼠标移入图片变模糊
    oSmall_img.style.opacity = "0.3";
  }
  //鼠标移出事件(注:没有兼容问题)
  //放大镜和放大框变回原始的隐藏状态
  oSmall.onmouseleave = function(){
    oBig.style.display = "none";
    oFrame.style.display = "none";  
    //鼠标移出,图片变清晰
    oSmall_img.style.opacity = "1"
  }
  //鼠标移动事件(注:有兼容问题)
  oSmall.onmousemove = function(event){
    //解决兼容问题
    var e = event || window.event;
    //获取鼠标在放大镜中心的位置坐标(用于判断放大镜不会移出原始框)
    //获取位置用offsetX/offsetY
    //size初始值为100,与放大镜未放大之前1致,
    //size/2是为了获取鼠标在放大镜的中心点
    //用size而不是定值,是为了后边放大镜随鼠标滚轮滚动放大缩小时
    //鼠标能1直在放大镜中心位置
    //e.offsetY/e.offsetX是鼠标到原始框边框的距离
    //size / 2是鼠标到放大镜边框的距离
    //nTop/nLeft是放大镜边框到原始框边框的距离
   var nTop = e.offsetY - size / 2;
    var nLeft = e.offsetX - size / 2;
    //判断放大镜的临界值
    //不小于最小值,不大于最大值
    //判断放大镜的最小值
    if(nTop <= 0){
      //差1点就等于零的时候,也赋值为零
      nTop = 0;
    }
    if(nLeft <= 0){
      nLeft = 0;
    }  
    //判断放大镜的最大值
    //因为坐标只有offsetLeft 和 offsetTop两个,所以计算最大值时:
    //需要获取放大镜的左和上的边框到原始框的左和上的边框的最大距离与原始框的坐标位置进行比较
    //offsetHeight/offsetWidth获取元素的宽高
    //原始框的宽高 - 放大框的宽高 == 放大镜可以移动的最大值
    var maxTop = oSmall.offsetHeight - oFrame.offsetHeight;
    var maxLeft = oSmall.offsetWidth - oFrame.offsetWidth;
    //放大镜的边框大于等于最大值,停
    if(nTop >= maxTop){
      nTop = maxTop;
    }
    if(nLeft >= maxLeft){
      nLeft = maxLeft;
    }  
    //放大镜的位置坐标
    oFrame.style.top = nTop + "px" 
    oFrame.style.left = nLeft + "px"
    //计算放大镜和放大框之间的缩放比例
    //计算比例用offsetWidth/offsetHeight
    var propX = oBig.offsetWidth/oFrame.offsetWidth;
    var propY = oBig.offsetHeight/oFrame.offsetHeight;
    //-nTop/-nLeft用负值,使放大框中的内容与放大镜所停的位置1致(图片内容移动方向相同)
    //如果是正值,放大镜移动时与放大框中的内容相反移动(放大框中不会出现对应的放大图片)
    oBig_img.style.top = -nTop*propY + "px"
    oBig_img.style.left = -nLeft*propX + "px"
    //鼠标移入时,放大镜清晰,原始框模糊
    //利用改变插入到放大镜中的背景图的position,进行图片的11对应
    //注意:``里的${}和${}中间用空格隔开
    oFrame.style.backgroundPosition = `${-nLeft}px ${-nTop}px`;
  }
    //鼠标滚轮事件
    //注意:兼容问题
    //设置size初始值为100,即放大镜未放大缩小时的原始状态
    //通过判断滚轮的上下滚动方向,改变放大镜的大小,即宽高同时增大或缩小
    var size = 100;
     //解决兼容问题
     //FF(火狐)
    if(document.addEventListener){
       //第1个参数是事件名称,
       //第2个参数是事件处理函数,
       //第3个参数是1个被废弃的参数,是以事件捕获的形式,还是事件冒泡的形式触发事件,默认false
       //第3个参数基本用不到
        document.addEventListener('DOMMouseScroll',handleEvent,false);
    }
     //IE/Opera(欧鹏)/Chrome(谷歌)
    window.onmousewheel = document.onmousewheel = handleEvent;
     // 分辨滚轮向上还是向下;
    function handleEvent(event){
        var e = event || window.event;
        // FF => detail 向上 是 负数 ;
        //           向下 是 正数;
        // Chrome => deltaY  向上 是 负数;
        //                 向下 是 正数;
        var flag = true
        if(e.detail != 0 ){
          // 说明浏览器是火狐;
            if(e.detail > 0){
                flag = false// 向下;
            }else{
                flag = true;// 向上;
            }
        }else{
          //说明浏览器是IE/Opera/Chrome
            if(e.deltaY > 0){
                flag = false// 向下;
            }else{
                flag = true;// 向上;
            }
        }
        //滚轮向上时,放大镜变大,放大框中的内容缩小;
        //滚轮向下时,放大镜缩小,放大框中的内容变大;
        if(flag){
           // 向上
            size ++;
        }else{
            size --;// 向下
        }
        //将size值赋给放大镜
        oFrame.style.width = size + "px";
        oFrame.style.height = size + "px";
        //当鼠标放在原始框上1动不动时,放大镜也不会再增大了
        oSmall.onmousemove(e);
        //放大缩小后放大镜和放大框的比例发生了变化,导致放大框中的内容与放大镜所在位置不符
        // 根据放大镜的缩放,重新计算放大框与放大镜之间的缩放比例
        var prop = 400 / size;
        // 根据比例缩放放大框中的图片 ;
        oBig_img.style.width = 400 * prop + "px";
        oBig_img.style.height = 400 * prop + "px";
    }
</script>

Related articles: