Viewer 是一款强大的 jQuery 图像浏览插件。

主要功能:

  • 支持选项
  • 支持方法
  • 支持事件
  • 支持触摸
  • 支持移动
  • 支持缩放
  • 支持旋转
  • 支持键盘
  • 跨浏览器支持

查看演示      立即下载

部分插件网站提供的下载包有缺陷,不能兼容ie8-10。错误表现为放大的图片没有取到url,导致图片不显示。所以此链接为 viewer的官方演示,及github上的开源代码。

使用方法:

1.引入css和js

<link rel="stylesheet" href="css/viewer.min.css">
<script src="js/viewer.min.js"></script>

2. html 部分

<ul id="viewer">
<li><img src="img/tibet-1.jpg" data-original="img/tibet-1.jpg" alt="图片1"></li>
<li><img src="img/tibet-2.jpg" data-original="img/tibet-2.jpg" alt="图片2"></li>
<li><img src="img/tibet-3.jpg" data-original="img/tibet-3.jpg" alt="图片3"></li>
<li><img src="img/tibet-4.jpg" data-original="img/tibet-4.jpg" alt="图片4"></li>
<li><img src="img/tibet-5.jpg" data-original="img/tibet-5.jpg" alt="图片5"></li>
<li><img src="img/tibet-6.jpg" data-original="img/tibet-6.jpg" alt="图片6"></li>
</ul>

插件默认会取图片的src地址。如果想要放大之后换一张大图的话,可以把大图的路径写在data-original属性中,然后设置url : "data-original" 。

alt用来存放图片的标题。

3. JavaScript 部分

$('#viewer').viewer();

配置

名称 类型 默认值 说明
inline 布尔值 false 启用 inline 模式
button 布尔值 true 显示右上角关闭按钮(jQuery 版本无效)
navbar 布尔值/整型 true 显示缩略图导航
title 布尔值/整型 true 显示当前图片的标题(现实 alt 属性及图片尺寸)
toolbar 布尔值/整型 true 显示工具栏
tooltip 布尔值 true 显示缩放百分比
movable 布尔值 true 图片是否可移动
zoomable 布尔值 true 图片是否可缩放
rotatable 布尔值 true 图片是否可旋转
scalable 布尔值 true 图片是否可翻转
transition 布尔值 true 使用 CSS3 过度
fullscreen 布尔值 true 播放时是否全屏
keyboard 布尔值 true 是否支持键盘
interval 整型 5000 播放间隔,单位为毫秒
zoomRatio 浮点型 0.1 鼠标滚动时的缩放比例
minZoomRatio 浮点型 0.01 最小缩放比例
maxZoomRatio 数字 100 最大缩放比例
zIndex 数字 2015 设置图片查看器 modal 模式时的 z-index
zIndexInline 数字 0 设置图片查看器 inline 模式时的 z-index
url 字符串/函数 src 设置大图片的 url
build 函数 null 回调函数,具体查看演示
built 函数 null 回调函数,具体查看演示
show 函数 null 回调函数,具体查看演示
shown 函数 null 回调函数,具体查看演示
hide 函数 null 回调函数,具体查看演示
hidden 函数 null 回调函数,具体查看演示
view 函数 null 回调函数,具体查看演示
viewed 函数 null 回调函数,具体查看演示

参数的用法:

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

都看到这里了,如果对你有帮助,请帮我点个推荐呀~ :)

viewer.js--一个强大的jQuery图像查看插件的更多相关文章

  1. Viewer 是一款强大的 jQuery 图像浏览插件。

    Viewer 是一款强大的 jQuery 图像浏览插件. 主要功能: 支持选项 支持方法 支持事件 支持触摸 支持移动 支持缩放 支持旋转 支持键盘 跨浏览器支持 链接: viewer的官方演示,及g ...

  2. Viewer.js 是一款强大的 jQuery 图像浏览插件。

    https://blog.csdn.net/qq_29132907/article/details/80136023 一.效果图  二.代码<!DOCTYPE html><html ...

  3. 一个强大的jquery分页插件

    点击这里查看效果 这个分页插件使用方便,引用keleyidivpager.js和keleyidivpager.css文件,然后在htm(或者php,aspx,jsp等)页面中对分页总数,参数名,前缀后 ...

  4. 20 个具有惊艳效果的 jQuery 图像缩放插件

    jQuery相对与Flash的魔力已经贯穿整个网络.尽管,Flash层被认为是用于网页设计的首选,然而随着jQuery的出现,以及他的酷似Flash的交互式特效使得网页更加的优雅——Flash开始靠边 ...

  5. 15 个响应式的 jQuery 图像滑块插件

    设计师和开发人员总是试图使用新技术让网站更智能,而我们发现在许多网站上 jQuery 的图像滑块插件是非常受欢迎的.本文继续介绍 15 个 jQuery 图像滑块插件以供您选择. ELASTISLID ...

  6. 11个新鲜出炉的jQuery图像滑块插件

    如今图像滑块已成为一种流行的Web设计元素,通过滑块,你可以在有限的页面空间中展示更多的内容,带给用户更佳的浏览体验.本文将为你带来一些非常实用的jQuery图像滑块插件. 1.  Basic Sli ...

  7. 强大的jQuery图片查看器插件Viewer.js

    简介 Viewer.js 是一款强大的图片查看器 Viewer.js 有以下特点: 支持移动设备触摸事件 支持响应式 支持放大/缩小 支持旋转(类似微博的图片旋转) 支持水平/垂直翻转 支持图片移动 ...

  8. jQuery 图片查看插件 Magnify 开发简介(仿 Windows 照片查看器)

    前言 因为一些特殊的业务需求,经过一个多月的蛰伏及思考,我开发了这款 jQuery 图片查看器插件 Magnify,它实现了 Windows 照片查看器的所有功能,比如模态窗的拖拽.调整大小.最大化, ...

  9. jquery图片查看插件,支持旋转、放大、缩小、拖拽、缩略图(仿qq图片查看)

    最近做了一个jquery图片查看的插件,目的是能精确查看图片的详情,插件支持图片旋转.放大.缩小.拖拽.缩略图显示,界面效果是按照window的qq查看图片功能写的,当然不尽相同. 具体功能: 1. ...

随机推荐

  1. 正则,String中用法,Pattern Matcher

    package com.正则表达式; import java.util.Scanner; /** * * 校验qq号码 * 1:要求必须是5-15位数字 * 2: 0不能开头 * 分析: * A:键盘 ...

  2. 高级浏览器-SRWare Iron 29.0.1600.0 版本发布

    SRWare Iron是德国一安全公司srware改造的Chrome(铬)命名为铁(iron)的浏览器.于2008年9月18日首次发布. 据官方介绍,Iron浏览器砍掉了Chromium原程序中的很多 ...

  3. BZOJ2935: [Poi1999]原始生物(欧拉回路)

    2935: [Poi1999]原始生物 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 150  Solved: 71[Submit][Status][D ...

  4. org.springframework.orm.hibernate3.HibernateTemplate

    当session中出现两个相同标示的(相同主键)的对象,一个是持久态,一个是瞬时态,想更新瞬时态对象到数据库,如果不做处理,则报出异常,session中出现两个相同标示的不同对象异常.处理方法.(业务 ...

  5. python基于协程的网络库gevent、eventlet

    python网络库也有了基于协程的实现,比较著名的是 gevent.eventlet 它两之间的关系可以参照 Comparing gevent to eventlet, 本文主要简单介绍一下event ...

  6. 使用graphql-code-generator 生成graphql 代码

    类似的工具比较多,比如prisma .qloo.golang 的gqlgen.apollo-codegen graphql-code-generator 也是一个不错的工具(灵活.模版自定义...) ...

  7. BNF 和 ABNF 扩充巴科斯范式 了解

    BNF 巴科斯范式(BNF: Backus-Naur Form 的缩写)是由 John Backus 和 Peter Naur 首先引入的用来描述计算机语言语法的符号集.现在,几乎每一位新编程语言书籍 ...

  8. Dictionary字典类介绍

    说明     必须包含名空间System.Collection.Generic      Dictionary里面的每一个元素都是一个键值对(由二个元素组成:键和值)      键必须是唯一的,而值不 ...

  9. linux下配置python环境 django创建helloworld项目

    linux下配置python环境 1.linux下安装python3 a. 准备编译环境(环境如果不对的话,可能遇到各种问题,比如wget无法下载https链接的文件) yum groupinstal ...

  10. Centos 6 安装 配置 oracle11g R2

    1.安装centos6.3_64位: 下载地址:http://mirror.bit.edu.cn/centos/6.3/isos/x86_64/ CentOS-6.3-x86_64-bin-DVD1. ...