JS操作Dom，商城放大镜

JS操作Dom，商城放大镜

​ 思路：将鼠标在小图的位置，赋值给大图背景的position。

1.设置样式

​ 准备两个div，和两张图（一张放大的，一张普通的）。代码如下：

​

	<div id="left">

    </div>
    <div id="right">

   	</div>

​ css样式：

<style>
        * {
            margin: 0;
            padding: 0;
        }

        #left {
            width: 300px;
            height: 300px;
            background: url('./img//68836f52ffaaad96.jpg');
            background-size: 100% 100%;
        }

        #right {
            width: 500px;
            height: 500px;
            background: url("./img//68836f52ffaaad96 (1).jpg");
            background-position: center;
            position: absolute;
            top: 0;
            left: 300px;
            
        }

2.给大图设置定位，让她不跟原图分开。

​ 原图到左边框的距离+原图本身的长度就是，大图定位的距离。

​ 原图距离上边框的距离就是大图定位Top的距离。

    let l = $("#left").offsetLeft + $('#left').offsetWidth
    let r = $("#left").offsetTop

        $("#right").style.left = l + 'px'
        $("#right").style.top = r + 'px'

3.将鼠标在原图中移动的距离算成百分比，赋值给大图。

​ 用鼠标的位置x减去原图到左边边框的距离，得到平移的长度。

​ Y轴同理可得。