效果图

效果描述

1.鼠标在左边的小盒子里的时候，右边的大盒子会显现，鼠标离开左边小盒子右边的大盒子会消失

2.鼠标在左边盒子移动时，放大镜也会跟随着移动（不会出界），且右边的大盒子里面的产品图也会跟随着等比例移动

设计思路

1.设计两个盒子，一个装一张产品图和一个放大镜的盒子，另一个装一个图片（注意照片的尺寸，超过的部分要隐藏）

2.   先获取鼠标在盒子里面的静态位置距离：鼠标到页面两侧的距离 - 鼠标到左边盒子边框的距离；，然后在鼠标移动过程中：鼠标在盒子里的静态位置数，将其给放大镜盒子的定位属性就行了（最外面的盒子是静止的，放大镜是相对于静止的盒子移动的）

3.将放大镜的中心移到鼠标的位置，将定位属性值减去放大镜宽度/高度的一半

4.  防止放大镜出界：设置定位属性值的范围：在移动到左极限和又极限时，吧定位属性的值改成定值

5.右边盒子的定位属性  根据左边盒子的最大/小移动距离  等比例的移动，

6.设置不同情况下的显示或者隐藏问题

代码如下

HTML框架

HTML框架

JavaScript部分

JavaScript部分