jQuery中图像查看插件viewer.js的使用示例

这篇文章主要介绍了jQuery中图像查看插件viewer.js的使用示例，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

在网站建设、做网站过程中，需要针对客户的行业特点、产品特性、目标受众和市场情况进行定位分析，以确定网站的风格、色彩、版式、交互等方面的设计方向。创新互联还需要根据客户的需求进行功能模块的开发和设计，包括内容管理、前台展示、用户权限管理、数据统计和安全保护等功能。

jquery是什么

jquery是一个简洁而快速的JavaScript库，它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器，并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件，是继Prototype之后又一个优秀的JavaScript代码库，能够用于简化事件处理、HTML文档遍历、Ajax交互和动画，以便快速开发网站。

一、简介

Viewer.js 是一款强大的图片查看器。

Viewer.js 有以下特点：

支持移动设备触摸事件
支持响应式
支持放大/缩小
支持旋转（类似微博的图片旋转）
支持水平/垂直翻转
支持图片移动
支持键盘
支持全屏幻灯片模式（可做屏保）
支持缩略图
支持标题显示
支持多种自定义事件
Viewer.js 提供了纯 JS 版本和 jQuery 版本,版本名字虽然一样，但代码不一样，不能通用。

二、下载

纯JS版本：

下载地址：https://github.com/fengyuanchen/viewerjs

jQuery 版本：

下载地址：https://github.com/fengyuanchen/jquery-viewer

三、使用方法

1、直接引入文件

Javascript版：

jQuery版：

2、npm安装

npm install viewerjs

3、Html结构

4、JavaScript

Javascript版：

var image = new Viewer(document.getElementById('image'),{
 url: 'data-original'
});

var viewer = new Viewer(document.getElementById('viewer'),{
 url: 'data-original'
});

jQuery 版：

$('#image').viewer({
 url: 'data-original'
});

$('#viewer').viewer({
 url: 'data-original'
});

四、配置

下面是其他网友的补充

需求：在信息详情页面实现点击图片可以预览

准备工作：引入jquery.js、viewer.js 、viewer.css

代码如下：

注意：js中初始化viewer的时候位置要放到img标签后边

效果：

感谢你能够认真阅读完这篇文章，希望小编分享的“jQuery中图像查看插件viewer.js的使用示例”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!