如何用源生js做出淘宝放大镜效果？

如何用源生js写出淘宝的放大镜效果~？ 1，先写出静态界面，分别是两个div，一个div放小图片，另一个div放大图片。（当然这两张图片是一样的，只是大小不一样。） 2.大的那张图片要用background-image去设置他的背景设为这张图片，至于为什么，一会儿会讲到。 3.大的图片在未执行js的时候用dispaly：block隐藏，触发事件的时候再出现。 下面的是静态页面的代码。 Document #imgs{ width: 200px; height: 125px; float: left; } #imgs img{ width: 200px; height: 125px; } #big{ width: 400px; height: 250px; background-image: url(1.jpg); background-position:0px 0px; background-repeat: no-repeat; display: none; float: left; background-size: 200%; } #banner{ width: 850px; height: 260px; float: left; }

1.发出js代码前，我们先给大家讲一下基本原理，为什么不能用image标签，而是用background-image。因为如果我们要做出放大镜的效果，那个显示窗口是不能够显示全张图片的，就如下图所示：