JavaScript 实现放大镜效果

JavaScript 实现放大镜效果

前言：放大镜，顾名思义，就是将所要观看的物体放大，让其看的更加清除和细致。那如何用JavsSript来实现对图片的放大呢？

正文：既然是放大镜，那么首先得有个放大镜…下面先来创建放大镜。

步骤1:放大镜只不过是一个幌子，我们创建一个div,用来通过在图片上不断移动，来实现图片放大的效果。首先创建一个小div用来存放图片

            <div class="minBox">
                <img src="img/233758hw7o7h08kkozkcwi.jpg"/>
                <div class="moveBox">       
                </div>
            </div>
            //div样式
            .minBox{
                border: 1px solid red;
                width: 400px;
                height: auto;
                position: relative;
                display: inline-block;
                vertical-align: top;
            }
            .minBox img{
                width: 100%;
                height: auto;

            }

这样我们将用来进行放大的div创建好了，接下来是创建可以移动的放大镜。即给上面的moveBox一个样式。

            .moveBox{
                border:1px solid black;
                width: 100px;
                height: 100px;
                background: yellow;
                opacity: 0.5;
                border-radius:50% ;
                position: absolute;
                left: 0px;
                top: 0px;
                display: none;//刚开始隐藏，鼠标移动到图片上时显示。
            }

步骤2:接下来，我们创建一个div用来存放我们放大好的图片，即将上面所要观看的图片的width和height都增大一定的倍数。

            <div class="maxBox">
                <img src="img/233758hw7o7h08kkozkcwi.jpg"/>         
            </div>
            //样式
            .maxBox{
                display: inline-block;      
                width: 700px;
                height:600px;
                overflow:hidden;
                border: 10px solid yellow;
                display: none;
            }
            .maxBox img{
                width: 2800px;
                height: auto;
            }

仔细查看的话，发现我们给这个div一个overflow:hidden以及display:none,这样可以保证图片其余的部分不显示出来，并且刚开始是隐藏的，只有在放大镜移入所要查看的图片时才让它显示。

步骤3:接下来就是用JavaScript来实现放大镜的移动和让图片随着镜头来放大。

    minBox.onmousemove=function(){
            var event=window.event||event;
            moveX=event.clientX-50;//获取鼠标
            moveY=event.clientY-50;
            //下面4个判断是用来防止放大镜移到图片外面。
            if(moveX<0){
                moveX=0;
            }
            if(moveY<0){
                moveY=0
            }
            if(moveX>=minBox.offsetWidth-moveBox.offsetWidth){
                moveX=minBox.offsetWidth-moveBox.offsetWidth
            }
            if(moveY>=minBox.offsetHeight-moveBox.offsetHeight){
                moveY=minBox.offsetHeight-moveBox.offsetHeight
            }
            moveBox.style.left=moveX+'px';
            moveBox.style.top=moveY+'px';
            moveBox.style.display='inline-block';
            maxBox.style.display='inline-block';
            console.log(maxBox.scrollLeft)
            //获取比例,让放大图片的镜头一直和放大镜所指向的内容保持一致，主要通过改变maxBox的scorllLeft和scorllTop来实现该功能。
            var scaleX=moveBox.offsetLeft/(minBox.offsetWidth-moveBox.offsetWidth)
            var scaleY=moveBox.offsetTop/(minBox.offsetHeight-moveBox.offsetHeight)
            maxBox.scrollLeft=(maxImg.clientWidth-maxBox.clientWidth)*scaleX;
            maxBox.scrollTop=(maxImg.clientHeight-maxBox.clientHeight)*scaleY;
        }

效果图如下：

源码下载地址