8000 GitHub - xxxgitone/img-zoom: by native javascript

More Web Proxy on the site http://driver.im/

Name		Name	Last commit message	Last commit date
Latest commit History 12 Commits
dist		dist
example		example
img		img
src		src
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
package.json		package.json
webpack.config.js		webpack.config.js

Repository files navigation

img-zoom图片放大器

介绍

很多电商网站（淘宝、京东...）在商品详情页中，鼠标悬停在商品图片上，便会出现对应的放大区域。

这里是该功能的简易版实现插件。

思路

采用ES6语法，面向对象编程。
鼠标移入图片框，创建移动遮罩框，以及对应大图显示区。
根据移动遮罩框的移动位置，动态改变大图片的绝对定位位置。

引入详细引入代码

new ImgZoom('.zoomWrapper', {
	zoomW: 420,  //放大框宽高，默认就是420
	zoomH:420
});

效果

0