用JS写对图片的放大镜效果，思路及过程是怎样-群英

上一篇：用jQuery方法怎么制作一个简单的弹窗，代码是什么下一篇：Vue框架下table行click事件怎么添加，哪些事项要注意

这篇文章主要讲解了“用JS写对图片的放大镜效果，思路及过程是怎样”，文中的讲解内容简单、清晰、详细，对大家学习或是工作可能会有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。

样式展示：

思路

先准备两张图片,一张小图,一张大图，并且两张图片有一个整数比值

在小图片的上方设置一个放大镜样式,背景设为透明色即可

大图片外边套一个父元素,超出父元素隐藏，大小为只能容纳你的放大部分即可
父元素与放大镜样式的比值=大图与小图的比值

在小图片上进行鼠标移动时获取鼠标的坐标，得到鼠标当前处于小图片上的坐标
根据对应的比例求出大图片的坐标并移动大图片令放大部分处于父元素可见范围

代码

1.html部分

<div id="box">
        <!-- toBig是放大镜元素 -->
     <div id="toBig"></div>
        <!-- 小图片 -->
  <img src="img/05.jpg" id="smallImg" width="800px">
</div>
<div id="beBig">
        <!-- 大图片,比例为1.5倍数 -->
  <img src="img/05.jpg" id="bigImg" width="1200px">
</div>

2.css样式部分

 *{
          margin: 0px;
          padding: 0px;
            }    
            #box{
             position: relative;
             float: left;
            }
   #toBig{
    width: 80px;
    height: 80px;
    border: 1px solid gray;
    background-color: transparent;
    position: absolute;
   }
   #beBig{
    float: left;
    overflow: hidden;
    border: 1px solid gray;
    position: relative;
    left: 40px;
    top:325px ;
   }
   #bigImg{
    position: absolute;
   }

3.脚本部分

<script type="text/javascript">
            //获取小图片,大图片,放大镜元素,大图片的父元素
   var smallImg=document.querySelector("#smallImg");
   var bigImg=document.querySelector("#bigImg");
   var toBig=document.querySelector("#toBig");
   var beBig=document.querySelector("#beBig");
 
            /*在页面加载时就先计算出小图片与大图片的比例*/
            var q=0;
   window.onload=function(){
    q=bigImg.offsetWidth/smallImg.offsetWidth;
                //根据放大镜的宽高和比例计算要显示放大内容的大小
    beBig.style.width = toBig.clientWidth * q +"px";
    beBig.style.height = toBig.clientHeight * q +"px";
   }
            //获取放大镜元素的中心，保证鼠标在放大镜中心
   var xCenter=toBig.clientWidth/2;
   var yCenter=toBig.clientHeight/2;
 
            //flag是一个标志,当鼠标按下时为true,可以进行移动
   flag=false;
   toBig.onmousedown = function(){
    flag=true;
   }
   toBig.onmouseup = function(){
    flag=false;
   }
   
   window.onmousemove=function(ev){
    var ev = ev || window.event;
                //flag为true时,放大镜元素被按下并可以进行拖动
    if(flag){
                    //获取鼠标当前所在位置并计算除了元素自身外要移动的位置
     var mouseX=ev.clientX,mouseY=ev.clientY;
     var trueX=mouseX - xCenter;
 
                    //判断放大镜元素是否超出小图片范围
     if(trueX < smallImg.offsetLeft){
      trueX = smallImg.offsetLeft;
     }
     if(trueX > smallImg.clientWidth - toBig.offsetWidth){
      trueX = smallImg.clientWidth - toBig.offsetWidth;
     }
     var trueY=mouseY - yCenter;
     if(trueY <= smallImg.offsetTop){
      trueY = smallImg.offsetTop;
     }
     if(trueY > smallImg.clientHeight - toBig.offsetHeight){
      trueY = smallImg.clientHeight - toBig.offsetHeight;
     }
 
                    //小图片移动
     toBig.style.left = trueX + "px";
     toBig.style.top = trueY + "px";
     console.log(trueX,trueY);
     
     // 大图片要移动的位置
     
     bigImg.style.left =-(trueX * q) + "px";
     bigImg.style.top =-(trueY * q) + "px";
    }
   }
   
</script>

现在大家对于用JS写对图片的放大镜效果，思路及过程是怎样的内容应该都有一定的认识了吧，希望这篇能对大家有所帮助。最后，想要了解更多，欢迎关注群英网络，群英网络将为大家推送更多相关的文章。