jquery实现淘宝商品图片局部放大 jquery实现淘宝商品图片局部放

【jquery实现淘宝商品图片局部放大】本篇博文用于简单记录图片放大功能实现，供大家参考，具体内容如下
功能实现还存在一些小漏洞在文章结尾提出，希望各位指正
1、图片放大初考虑将图片转换为字体图片形式，然后进行放大处理，但最终本人技术不过关无法实现，后用width: 200%; 进行一般的图片放大，所以当图片越大就存在一些失真；
2、图片放大后的显示为本次实现的关键，通过获取鼠标指针的位置从而获取指针在图片的那一个位置，再以当前位置进行图片放大，放大后将图片进行偏移，偏移量以鼠标指针在原图的位置上获取的left和top值乘以放大倍数就可以显示局部放大的功能了

*{margin: 0; padding: 0; }.div1{width: 450px; height: 300px; overflow: hidden; display: inline-block; }.div1>img{width: 100%; }.div2{width: 450px; height: 300px; border: 1px solid #A9A9A9; overflow: hidden; display: inline-block; position: relative; }.div2>img{position: absolute; width: 200%; height: 200%; }.list1{width: 70px; height: 50px; float: left; margin-left: 10px; }.list1>img{width: 100%; }#zhezhao{width: 100px; height: 100px; background: #BC8F8F; opacity: 0.7; display: none; position: absolute; }
文章图片

文章图片

文章图片

文章图片

文章图片

文章图片