javascript放大镜效果

寵の児 提交于 2020-01-20 20:27:45

JS实现放大镜效果

首先我们先设想一下放大镜效果

1、当鼠标进入小盒子的时候,把大图片显示出来

2、当指定移动区域的时候,显示当前放大区域(放大效果)

3、鼠标移除我们让它消失

一、实现页面布局HTML+CSS

二、实现放大镜的功能js

 

下面来看代码,让你思路变清晰

 

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title>放大镜</title>        <style>            #box{                width:  350px;                height: 350px;                margin: 100px 0 0 100px;                position: relative;            }               #small_box{                width:100%;                height: 100%;                border:1px solid #ccc;                position: relative;            }                   #mask{                height: 100px;                width: 100px;                                left: 0px;                top: 0px;                position: absolute;                display: none;                cursor: move;            }               #big_box{                height: 600px;                width: 600px;                border: 1px solid #ccc;                overflow: hidden;                top:0px;                left: 360px;                position: absolute;                display: none;            }               </style>    </head>    <body>        <div id="box">            <div id="small_box">                <img src="img/pic01.jpg" />                <span id="mask"></span>            </div>            <div id="big_box">                <img src="img/pic001.jpg" style="position: absolute;"/>            </div>        </div>                <script>            window.onload = function(){                //1.获取需要的元素                var box = document.getElementById("box");                var small_box = document.getElementById("small_box");                var big_box = document.getElementById("big_box");                var mask = document.getElementById("mask");                var big_img = big_box.children[0];                                //2.鼠标移入小盒子事件                small_box.onmouseover = function(){                    //2.1鼠标移入,显示放大镜和大图片                    big_box.style.display = 'block';                    mask.style.display = 'block';                                        //2.2移动鼠标的同时移动放大镜,获取鼠标的移动事件                    small_box.onmousemove = function(event){                        // //获取鼠标的坐标点X  Y                        var pointX = event.clientX - box.offsetLeft - mask.offsetHeight*0.5;                        var pointY = event.clientY - box.offsetTop - mask.offsetWidth*0.5;                                                //做边界的校验                        if(pointX<0){//当鼠标的坐标点X小于0的时候我们让它等于0,目的是让它不出去                            pointX = 0;                        }else if(pointX>small_box.offsetWidth-mask.offsetWidth){//当鼠标的坐标点大于(小盒子事件源宽度-指针区域事件源的宽度)时,我们就让它等于那个宽度,防止不出界。                            pointX = small_box.offsetWidth-mask.offsetWidth;                        }                                                if(pointY<0){                            pointY = 0;                        }else if(pointY>small_box.offsetHeight-mask.offsetHeight){                            pointY = small_box.offsetHeight-mask.offsetHeight;                        }                                                //移动mask                        mask.style.left = pointX + 'px';                        mask.style.top = pointY + 'px';                                                //移动大图                        //小盒子中移动的距离:大盒子中移动的距离 = 小盒子的宽度:大盒子的宽度                        //大盒子中移动的距离 = 小盒子中移动的距离/(小盒子的宽度:大盒子的宽度);                        big_img.style.left = -pointX/(small_box.offsetWidth/big_box.offsetWidth)+'px';                        big_img.style.top = -       pointY/(small_box.offsetHeight/big_box.offsetHeight)+'px';                    }                }                    //3.鼠标移除小盒子事件    small_box.onmouseout = function(){    //2.1鼠标移入,显示放大镜和大图片    big_box.style.display = 'none';    mask.style.display = 'none';    }    }    </script>    </body></html>​

 

注意

移动大图

小盒子中移动的距离:大盒子中移动的距离 = 小盒子的宽度:大盒子的宽度大盒子中移动的距离 = 小盒子中移动的距离/(小盒子的宽度:大盒子的宽度);

big_img.style.left = -pointX/(small_box.offsetWidth/big_box.offsetWidth)+'px';                        big_img.style.top = -       pointY/(small_box.offsetHeight/big_box.offsetHeight)+'px';

里面的减号指的是方向,方向为反方向,这样才能可以实现你所预想的结果,你可以试一下没有减号的效果你就知道是什么样的了

 

其它不懂的地方欢迎留言

 

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!