原生js实现商品放大镜效果

实现原理

大图上的放大镜:小图的显示区域=大图片大小:小图片大小=大图片的offsetLeft:小图片的offsetLeft

那么以上的公式中只有大图片的offsetLeft 是未知的,所以大图片的offsetLeft=大图片大小/小图片大小*小图片的offsetLeft

代码中有详细注释

完整代码

注:复制到本地后自行替换图片查看效果





demo



以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

你可能感兴趣的:(原生js实现商品放大镜效果)