纯JavaScript智能缩放图片预览插件

当前位置:主页 > jQuery库 > 图片效果 > 纯JavaScript智能缩放图片预览插件
纯JavaScript智能缩放图片预览插件
分享:

    插件介绍

    zooming.js是一款纯JavaScript智能缩放图片预览插件。该图片缩放预览插件无任何外部依赖,使用纯Js来实现,它可以在点击页面中的缩略图之后,切换到高清大图来显示。

    浏览器兼容性

    浏览器兼容性
    时间:11-01
    阅读:
简要教程

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