zooming.js是一款纯JavaScript智能缩放图片预览插件。该图片缩放预览插件无任何外部依赖,使用纯Js来实现,它可以在点击页面中的缩略图之后,切换到高清大图来显示。
安装
可以通过npm来安装zooming.js插件。
npm install zooming --save
使用方法
在页面引入zooming.js文件。
<script src="zooming.js"></script>
HTML结构
使用该插件的方法非常简单,只需要在需要进行缩放的图片上添加data-action="zoom"
属性即可。
<img src="img/sample.jpg" data-action="zoom" />
或者使用data-original
属性来使放大的图片指向高清大图。
<img src="img/thumbnail.jpg" data-action="zoom" data-original="img/original.jpg" />
zooming.js图片放大预览插件的github地址为:https://github.com/kingdido999/zooming