放大镜

Posted 2020-08-21 hopeelephant

　　今天我们来学习一下怎样用原生态的代码实现放大的效果，。

　　具体我们要掌握的知识点有哪些呢，

　　1：offsetLeft 当前元素离父元素左边的距离；

　　2：offsetTop 当前元素离父元素上面的距离。

　　3: offsetWidth 当前元素的宽度；

　　4：offsetHeight 当前元素的高度；

　　5：clientX 鼠标离浏览器左边窗口的距离；

　　5：clientY 鼠标离浏览器上边窗口的距离；

　　有了这几点知识就差不多了，。

　　接着来看看代码 html

    <div id="box">
        <div id="small-box">
            <div id="float"></div>
            <img src="images/a.jpg" alt="">
        </div>
        <div id="big-box">
            <img src="images/a.jpg" alt="">
        </div>
    </div>

html里面的代码很简单，一个最外层的盒子里面放了两个盒子，一个盒子放小照片和一个float盒子，这个float盒子是用来移动鼠标的时候跟着一起动的放大镜，。

另外big-box这个盒子是放大图片的，。

　　css

　　

#box{
            margin-top: 50px;
            width: 400px;
            height: 255px;
            position: relative;
        }
        #float{
            width: 160px;
            height: 100px;
            display: none;
            background-color: #fff;
            opacity: 0.5;
            position: absolute;
            top: 0;
            left:0;
        }
        #small-box img{
            width: 400px;
            height: 255px;

        }
        #big-box{
            position: absolute;
            top:0;
            left:450px;
            width: 450px;
            height: 350px;
            overflow: hidden;
            display: none;
        }
        #big-box img{
            position: relative;
        }

另外css代码没什么需要介绍的，首先#float和#big-box元素需要隐藏，当鼠标放上去的时候让其显示，移动鼠标的时候让大图片的局部放大，。那么久引出了3个事件了，。分别是onmouseover，onmouseout，onmousemove，。

　　好了最后来看看js代码

　　

<script>
        window.onload =function(){
            var box =document.getElementById(\'box\');
            var small =document.getElementById("small-box");
            var float =document.getElementById("float");
            var big = document.getElementById("big-box");
            var bigImg =big.getElementsByTagName(\'img\')[0];
            small.onmouseover =function(){
                float.style.display="block";
                big.style.display="block";
            }
            small.onmouseout =function(){
                float.style.display="none";
                big.style.display="none";
            }
            small.onmousemove =function(ev){
                var event =ev;
                var left =event.clientX-box.offsetLeft-small.offsetLeft-float.offsetWidth/2;
                var top =event.clientY-box.offsetTop-small.offsetTop-float.offsetHeight/2;

                if(left<0){
                    left=0
                }else if(left>(small.offsetWidth-float.offsetWidth)){
                    left=small.offsetWidth-float.offsetWidth
                }

                if(top<0){
                    top=0
                }else if(top>(small.offsetHeight-float.offsetHeight)){
                    top=small.offsetHeight-float.offsetHeight
                }

                float.style.left=left+"px";
                float.style.top=top+"px";
                var percentX=left/(small.offsetWidth-float.offsetWidth);
                var percentY=top/(small.offsetHeight-float.offsetHeight);

                bigImg.style.left=-percentX*(bigImg.offsetWidth-big.offsetWidth)+"px";
                bigImg.style.top=-percentY*(bigImg.offsetHeight-big.offsetHeight)+"px";
                
            }




        }
    </script>

　　首先我们还是一如既往的找元素，我们习惯用getElementById和getElementsByTagName的方式来找元素，并给他们赋值。找到元素后，来两个事件，意识鼠标移入事件，二是鼠标移出事件，。

small.onmouseover =function(){
                float.style.display="block";
                big.style.display="block";
            }
            small.onmouseout =function(){
                float.style.display="none";
                big.style.display="none";
            }

再来引入最重要的事件，鼠标移动事件onmousemove,当鼠标移动的时候我们能获取很多我们想要的东西，。small.onmousemove =function(ev)

　　所以我们可以在function后面的括号里面传入参数ev,目的是用来获取我们在移动鼠标时想要来获取的一系列的值，。

　　var event =ev;声明一个变量event，给其赋值ev，也就是赋值移动鼠标的时候获得的参数，现在就可以通过变量event来获取值了，。

　　var left =event.clientX-box.offsetLeft-small.offsetLeft-float.offsetWidth/2;
　　var top =event.clientY-box.offsetTop-small.offsetTop-float.offsetHeight/2;　　

　　left和top分别指的是放大镜左边的距离和上面的距离，。

　　if(left<0){
　　left=0
　　}else if(left>(small.offsetWidth-float.offsetWidth)){
　　left=small.offsetWidth-float.offsetWidth
　　}

　　if(top<0){
　　top=0
　　}else if(top>(small.offsetHeight-float.offsetHeight)){
　　top=small.offsetHeight-float.offsetHeight
　　}

　　再来做一个判断，。这个判断的目的是为了当放大镜移动到最左最右最上最下的时候让放大镜不在移动的作用。

　　float.style.left=left+"px";

　　float.style.top=top+"px;

　　在算出放大镜左边的像素值和上面的像素值，记住一定的是加px的像素值，要不放大镜是不会跟着鼠标移动的，。元素只会跟着定位了的获得的带有像素的值走，虽然通过left=small.offsetWidth-float.offsetWidth，float.style.left=left+"px";虽然这两者获得的 值都是一样的，。但是作用却不一样，简单的来说，想让元素移动就必须获得px值。此时获得可px值之后放大镜就可以跟着鼠标一起动了，另外我们只需要获得大图片的left值和top值就可以实现我们想要的效果了，。

　　

　　var percentX=left/(small.offsetWidth-float.offsetWidth);
　　var percentY=top/(small.offsetHeight-float.offsetHeight);

　　bigImg.style.left=-percentX*(bigImg.offsetWidth-big.offsetWidth)+"px";
　　bigImg.style.top=-percentY*(bigImg.offsetHeight-big.offsetHeight)+"px";

　　这段代码是怎么出来的呢，left比上small.offsetWidth-float.offsetWidth等于bigImg.style.left比上bigImg.offsetWidth-big.offsetWidth，这样就可以很轻松的求出bigImg.style.left值，同理bigImg.style.top的值也是一样的道理求出来，最后还是记住，这两个值一定的加上px,要不图片是不会动的，。

好了，就是这样，放大镜出来了，是不是很简单呀。

还有一点

　　bigImg.style.left=-percentX*(bigImg.offsetWidth-big.offsetWidth)+"px";
　　bigImg.style.top=-percentY*(bigImg.offsetHeight-big.offsetHeight)+"px";

　　看看这两串代码为什么percentX和percentY为什么是负值，那是因为我们移动鼠标的方向和大图片移动的方向正好是相反的，你可以试试的。