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