JSFiddle - React, Tailwind, and code Playground

by Lianer

HTML

<div id="list" class="list">
    <img src="http://oon8abkc0.bkt.clouddn.com/photoview-2.jpg" alt="">
    <img src="http://oon8abkc0.bkt.clouddn.com/photoview-4.png" alt="">
    <img src="http://oon8abkc0.bkt.clouddn.com/photoview-3.png" alt="">
    <img src="http://oon8abkc0.bkt.clouddn.com/photoview-1.jpg" alt="">
</div>

CSS

/* PhotoView */
.photoview{
  display: none;
  position: fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 100;overflow: hidden;
  background: rgba(0, 0, 0, .8);
  transition: all 0.3s ease-out;
  moz-user-select: -moz-none;
  -moz-user-select: none;
  -o-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.photoview-container{
  position: relative;width: 100%;height: 100%;
}
.photoview-scale-value{
  position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;z-index: 2;
  width: 3em;height: 20px;line-height: 20px;text-align: center;
  background: rgba(0, 0, 0, .7);color: #fff;border-radius: 20px;
  opacity: 0;
  transition: opacity 0.1s ease-out;
}
.photoview-view{
  position: absolute;
  cursor: all-scroll;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% 100%;
  box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.4);
  transition: width 0.3s ease-out, 
    height 0.3s ease-out, 
    left 0.3s ease-out, 
    top 0.3s ease-out;
}
.photoview-close{position: absolute;right: 10px;top: 10px;color: #fff;cursor: pointer;}
.photoview-control{
  position: absolute;left: 0;right: 0;bottom: 0;height: 120px;
  background-color: rgba(0, 0, 0, .6);opacity: 0;
  transition: all 0.3s ease-out;
}
.photoview-control:hover{opacity: 1;}
.photoview-control-queue{
  position: absolute;left: 0;top: 15px;width: 10000%;height: 60px;
  transition: all 0.4s ease-out;
}
.photoview-control-queue p{
  display: inline-block;width: 60px;height: 60px;margin: 0 2px;background-color: rgba(0, 0, 0, .8);
  background-size: cover;cursor: pointer;
  transition: all 0.2s ease-out;
}
.photoview-control-queue p.active{
  opacity: 1;
}
.photoview-control-edit{
  position: absolute;left: 0;bottom: 15px;width: 100%;height: 15px;
  text-align: center;
}
.photoview-control-edit:before{
  content: "";position: absolute;left: 50%;top: -20px;width: 0;height: 0;margin-left: -10px;overflow: hidden;
  border:...

JavaScript

/**
 * 照片浏览
 * --
 * @author Lianer
 * @version 2015.06.11
 * @description 带有常用照片查看功能，包括缩放、自适应、移动、切换、旋转、下载，ie9+
 * @example
 *   var pv=new PhotoView();
 *   pv.add(["1.jpg", "2.jpg", "3.jpg"]);  // 追加列表
 *   pv.show();   // 显示
 *   pv.close();  // 关闭
 *   pv.aim(1);   // 定位到指定位置
 *   pv.reset();  // 重置
 */

(function() {
    "use strict";
    var PhotoView = window.PhotoView = function() {

        var createElement = function(type, className, parent) {
            var elem = document.createElement(type);
            if (className) elem.className = className;
            if (parent) parent.appendChild(elem);
            return elem;
        };

        var bindWheel = function(elem, fn, cancelBubble) {
            if ("onwheel" in document) {
                elem.onwheel = handler;
            } else if ("onmousewheel" in document) {
                elem.onmousewheel = handler;
            } else {
                return false;
            }
            return true;

            function handler(e) {
                e = window.event || e;
                var deltaX = e.deltaX || // wheel
                    -e.wheelDeltaX || // onmousewheel
                    0; // firefox,DOMMouseScroll不支持2D

                var deltaY = e.deltaY || // wheel
                    -e.wheelDeltaY || // onmousewheel
                    -e.wheelDelta || // 1D
                    e.detail || // firefox,DOMMouseScroll
                    0;

                deltaX = deltaX > 0 ? 1 : deltaX < 0 ? -1 : 0;
                deltaY = deltaY > 0 ? 1 : deltaY < 0 ? -1 : 0;

                fn(deltaY, deltaX, e);

                if (cancelBubble) {
                    if (e.preventDefault) e.preventDefault();
                    if (e.stopPropagation) e.stopPropagation();
                    e.cancelBubble = true;
                    e.returnValue = false;
                    return false;
                }
            }
        };


        var pv = function() {
            this.index = 0;
 ...