JSFiddle - React, Tailwind, and code Playground

by Lianer

HTML

<div id="list" class="list">
    <img src="http://i1.tietuku.com/f424109042f29ed6.jpg" alt="">
    <img src="http://i3.tietuku.com/01585f07bf4308b6.jpg" alt="">
    <img src="http://i3.tietuku.com/dc295d3a37c11bbb.jpg" alt="">
    <img src="http://i3.tietuku.com/20bdc0bcd3e94334.jpg" alt="">
    <img src="http://i3.tietuku.com/a43fac13664dc8ee.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;
      this.queue=[];
      var elem=this.elem={};
      // 外框
      elem.wrap=createElement("div", "photoview photoview_" + pv.size++);
      elem.wrap.setAttribute("tabindex", "0");
      // 容器
     ...