一、简介

viewer.js是一款开源的JavaScript图片查看器，可以用于网站或应用中展示图片，并提供诸如放大、缩小、旋转、拖动等功能。下面，将从安装、使用、配置、API和事件监听等多方面来详细阐述viewer.js。

二、安装和使用

使用viewer.js，需要下载它的源码，并引入必要的JavaScript和CSS文件。

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

然后，你可以在页面中用以下代码，来展示图片并激活viewer.js：

<img id="image" src="path/to/image.jpg">
<script>
    $(function(){
        $('#image').viewer();
    });
</script>

这样，当用户点击图片时，就会弹出viewer.js进行图片查看。

三、配置

viewer.js提供多种配置选项，可以通过传递一个选项对象来进行设置。以下是常见的配置选项：

$('#image').viewer({
    //自动展示图片
    inline: false,
    //背景颜色
    backdrop: true,
    //图片draggable
    draggable: true,
    //支持键盘导航
    keyboard: true,
    //父容器的z-index高度
    zIndex: 2015,
    //toolbar相对于viewer的位置
    toolbar: {
        zoomIn: 1,
        zoomOut: 1,
        oneToOne: 1,
        reset: 1,
        prev: 1,
        play: {
            show: 1,
            size: 'large',
        },
        next: 1,
        rotateLeft: 1,
        rotateRight: 1,
        flipHorizontal: 1,
        flipVertical: 1,
    },
});

可以根据需要选择开启或关闭不同的配置选项。

四、API

viewer.js提供多种API，以便开发者可以通过JavaScript灵活地控制它的行为。以下是常见的API：

1、update()

当图片src属性变化时，可以调用update()方法来更新图片。

$('#image').viewer('update', 'path/to/newimage.jpg');

2、move(x, y)

可以调用move(x, y)方法来移动图片，其中x和y是移动的距离。

//向右移动100像素，向下移动50像素
$('#image').viewer('move', 100, 50);

3、zoom(ratio)

可以调用zoom(ratio)方法来控制图片的缩放比例。

//缩小图片到原来的一半
$('#image').viewer('zoom', 0.5);

4、rotate(degree)

可以调用rotate(degree)方法来控制图片的旋转角度，其中degree表示角度。

//逆时针旋转45度
$('#image').viewer('rotate', -45);

五、事件监听

viewer.js提供了多种事件，可以在需要时进行监听。

1、view

当viewer弹出时触发。

$('#image').on('view', function(){
    console.log('viewer弹出');
});

2、viewed

当图片展示完成时触发。

$('#image').on('viewed', function(){
    console.log('图片展示完成');
});

3、zoom

当图片缩放时触发。

$('#image').on('zoom', function(){
    console.log('图片缩放');
});

4、dragStart

当图片拖拽开始时触发。

$('#image').on('dragStart', function(event){
    console.log('图片拖拽开始');
});

5、drag

当图片拖拽中时触发。

$('#image').on('drag', function(){
    console.log('图片拖拽中');
});

以上就是viewer.js的基本使用和配置，以及API和事件监听的简述。通过这些，可以帮助开发者快速实现网站或应用中展示图片的功能。

深入探究viewer.js中文文档