内容介绍

前端开发过程中经常会有图片列表的需求，如后台系统审核用户上传的照片等，小伙伴们想要实现图片放大、切换、拖动等预览效果，自己封装费时费力，而且需要考虑切换动画等细节。今天推荐一个相册图片预览的插件——viewer.js（插件分jquery和js两种，之前项目中使用jquery版本出现一些问题，具体情况不做说明，以下为js版本）

支持功能：

支持移动设备触摸事件

支持响应式

支持放大/缩小

支持旋转（类似微博的图片旋转）

支持水平/垂直翻转

支持图片移动

支持键盘

支持全屏幻灯片模式（可做屏保）

支持缩略图

支持标题显示

支持多种自定义事件

效果演示

viewer.min.js资源

jquery.pagination.js资源

一、使用方法

// 图片预览var viewer = new Viewer(document.getElementById('viewer'), {
       // url: 'data-original',    button: true,    inline: false,    zoomable: false,    // minZoomRatio: 0.1,    // maxZoomRatio: 10,    // backdrop: true,    movable: true,    interval: 2000,    navbar: true,    loading: true,    show: function() {
           viewer.update();    }});

二、常用参数

参数	说明
inline	启用 inline 模式
button	显示右上角关闭按钮（jQuery 版本无效）
navbar	显示缩略图导航
title	显示当前图片的标题（现实 alt 属性及图片尺寸）
toolbar	显示工具栏
tooltip	显示缩放百分比
movable	图片是否可移动
zoomable	图片是否可缩放
rotatable	图片是否可旋转
scalable	图片是否可翻转
transition	使用 CSS3 过度
fullscreen	播放时是否全屏
keyboard	是否支持键盘
interval	播放间隔，单位为毫秒
zoomRatio	鼠标滚动时的缩放比例
minZoomRatio	最小缩放比例
maxZoomRatio	最大缩放比例
zIndex	设置图片查看器 modal 模式时的 z-index
zIndexInline	设置图片查看器 inline 模式时的 z-index
url	设置大图片的 url
build,built,show,shown,hide,hidden,view,viewed	回调函数

三、点击图片外的背景，隐藏预览图片

通过检查元素获取需要的元素类名，阻止事件冒泡；

// 点击图片外的背景，隐藏预览图片$("body").on("click", ".viewer-container", function(e) {
       viewer.hide()});$("body").on("click", ".viewer-canvas", function(e) {
       e.stopPropagation();});$("body").on("click", ".viewer-footer", function(e) {
       e.stopPropagation();});$("body").on("click", ".viewer-button", function(e) {
       e.stopPropagation();});$("body").on("click", ".viewer-tooltip", function(e) {
       e.stopPropagation();});$("body").on("click", ".viewer-player", function(e) {
       e.stopPropagation();});

四、示例

    
       
       mockjs，viewerjs，pagination示例

标签：javascript，viewer.js，工具类，照片预览，图片查看器

更多演示案例，查看

欢迎评论留言!

转载地址：http://tesvz.baihongyu.com/

你可能感兴趣的文章

目录