JS实现放大镜

首先我们要知道每个步骤要干什么，其次在用JS实现这个功能
1.实现放大镜效果必须要有两个区域，一个是原始图片，另一个则是放大后的图片
2.要使用什么事件来触发放大镜

css代码

*{
            margin: 0;
            padding: 0;
        }
        #pic{
            width: 480px;
            height: 300px;
        }
        #view{
            width: 200px;
            height: 200px;
            border: 2px solid red;
            position: relative;
            overflow: hidden;

        }
        #view img{
            width: 960px;
            height: 600px;
            position: absolute;
            /* left: -560px;
            top: -28px; */
        }

html代码

<!-- 原始图片 -->
    <img src="./d.jpg" alt="" id="pic">
    <!-- 放大镜区域 -->
    <div id="view">
        <!-- 放大2倍的图片 -->
        <img src="./d.jpg" alt="" id="pic2">
    </div>

js代码
首先我们要获取每一个需要的元素。因为需要放大镜效果，所以可以用鼠标事件"onmousemove"(当鼠标触碰时引发事件)
然后再为原始图片添加触碰事件，函数传入形参e。最后在通过改变被放大图片的位置来与鼠标相对称
e.clientX与e.clientY是JS中内置属性。坐标轴在图片右上角,所以此处使用负值

		var pic  = document.getElementById('pic')
        var pic2 = document.getElementById('pic2')
        var view = document.getElementById('view')

        pic.onmousemove = function(e){
            pic2.style.left = -e.clientX*2+100 + 'px'
            pic2.style.top  = -e.clientY*2+100 + 'px'
        }