前端（JQuery）：使用magnify插件实现图片预览

1.下载css:jquery.magnify.min.css

   下载js:jquery.magnify.min.js

（地址：https://github.com/thdoan/magnify）

2.引入阿里图标

https://at.alicdn.com/t/font_1576642_nvbefyzwm6.css

3.img图片上加入data-src属性

4.html页面加入样式
   .magnify-modal {
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.25) !important;
      overflow: hidden;
    }

    .magnify-header .magnify-toolbar {
      background-color: rgba(0, 0, 0, 0.5) !important;
    }

    .magnify-stage {
      top: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      left: 0 !important;
      border-width: 0 !important;
    }

    .magnify-footer .magnify-toolbar {
      background-color: rgba(0, 0, 0, 0.5) !important;
      border-top-left-radius: 5px !important;
      border-top-right-radius: 5px !important;
    }

    .magnify-header,
    .magnify-footer {
      pointer-events: none !important;
    }

    .magnify-button {
      pointer-events: auto !important;
    }

    .magnify-toolbar.magnify-head-toolbar {
      background: none !important;
    }

    .magnify-toolbar.magnify-head-toolbar>button {
      border-radius: 100% !important;
      background: rgba(0, 0, 0, 0.5);
      margin: 5px 5px 0 0 !important;
    }

    .magnify-toolbar.magnify-foot-toolbar {
      border-radius: 50px !important;
    }

    .magnify-modal i {
      font-size: 20px;
    }

    .magnify-footer .magnify-toolbar {
      padding: 0 10px;
    }

5.js方法

    //初始化magnify图片查看器
    $('img').magnify({
      draggable: true,
      resizable: true,
      movable: true,
      keyboard: true,
      title: false,
      modalWidth: 320,
      modalHeight: 320,
      fixedContent: true,
      fixedModalSize: false,
      initMaximized: false,
      gapThreshold: 0.02,
      ratioThreshold: 0.1,
      minRatio: 0.1,
      maxRatio: 16,
      // 顶部栏按钮
      headToolbar: [
        'maximize',
        'close'
      ],
      // 底部栏按钮
      footToolbar: [
        'zoomIn',
        'zoomOut',
        'prev',
        'fullscreen',
        'next',
        'actualSize',
        'rotateLeft',
        'rotateRight'
      ],
      // 自定义图标
      icons: {
        maximize: '',
        close: '',
        zoomIn: '',
        zoomOut: '',
        prev: '',
        next: '',
        fullscreen: '',
        actualSize: '',
        rotateLeft: '',
        rotateRight: '',
      },
      // 事件
      callbacks: {
        // 打开
        opened: function (el) {
          $('.magnify-button-maximize').attr('title', '最大化');
          $('.magnify-button-close').attr('title', '关闭');
          $('.magnify-button-zoom-in').attr('title', '放大');
          $('.magnify-button-zoom-out').attr('title', '缩小');
          $('.magnify-button-prev').attr('title', '上一张');
          $('.magnify-button-fullscreen').attr('title', '全屏');
          $('.magnify-button-next').attr('title', '下一张');
          $('.magnify-button-actual-size').attr('title', '100%');
          $('.magnify-button-rotate-left').attr('title', '左旋转');
          $('.magnify-button-rotate-right').attr('title', '右旋转');
        },
        // 关闭
        closed: function (el) {
        },
      }
    });

铛铛铛铛~下课