ClassContent/项目合集/图片预览/preview.js

(function () {

    body = $("body")

    class Preview {

        x1;
        y1;
        l;
        t;
        isRun = false;

        constructor(option) {
            if (! option.hasOwnProperty("index")) {
                throw new Error("抱歉，index参数必传")
            }

            if ( option.hasOwnProperty("data") == false || Array.isArray(option.data) == false) {
                throw new Error("抱歉，data参数必传，且必须为数组")
            }


            this.defaultOption = option

            console.log(this.defaultOption);
            this.createdHtml()
            this.bindEvent()
            this.MouseEvent()
        }


        createdHtml() {
            body.insertAdjacentHTML("beforeend",`
                <div class="preview">
                    <div class="preview_black"></div>
                    <div class="preview_main">
                        <img style="transform: scale(1) rotate(0deg);margin-left:0;margin-top:0" class="show" src="${this.defaultOption.data[this.defaultOption.index]}" alt="">
                        <i class="iconfont icon-closedx closed"></i>

                        <div class="preview_page">
                            <i class="iconfont icon-zuo prev"></i>
                            <i class="iconfont icon-zhankai-copy next"></i>
                        </div>

                        <div class="preview_action">
                            <i class="iconfont icon-suoxiao"></i>
                            <i class="iconfont icon-fangda"></i>
                            
                            <i class="iconfont icon-fullscreen isfullscreen"></i>

                            <i class="iconfont icon-shuaxin leftx"></i>
                            <i class="iconfont icon-shuaxin rightx"></i>
                        </div>
                    </div>
                </div>
            `)
        }

        bindEvent() {
            // 关闭按钮被点击
            $(".closed").onclick = () => {
                body.removeChild($(".preview"))
            }

            // 解决 this 指向
            // 外部提前保存this
            // 箭头函数 => es6
            // 下一页点击事件
            $(".next").onclick = () => {
                this.defaultOption.index += 1
                if (this.defaultOption.index > this.defaultOption.data.length - 1) {
                    this.defaultOption.index = 0
                }
                this.changeImgSrc()
            }

            // 上一页点击事件
            $(".prev").onclick = () => {
                this.defaultOption.index -= 1
                if (this.defaultOption.index < 0) {
                    this.defaultOption.index = this.defaultOption.data.length - 1
                }
                this.changeImgSrc()
            }

            // 放大
            $(".icon-fangda").onclick = () => {
                $(".show").style.transform = `scale(${this.scale() + 0.2}) rotate(${this.rotate()}deg)`
            }

            // 缩小
            $(".icon-suoxiao").onclick = () => {
                $(".show").style.transform = `scale(${this.scale() - 0.2 <= 0.2 ? 0.2 : this.scale() - 0.2}) rotate(${this.rotate()}deg)`
            }

            // 左旋转
            $(".leftx").onclick = () => {
                $(".show").style.transform = `scale(${this.scale()}) rotate(${this.rotate()-90}deg)`
            }

            // 右旋转
            $(".rightx").onclick = () => {
                $(".show").style.transform = `scale(${this.scale()}) rotate(${this.rotate()+90}deg)`
            }

            $(".isfullscreen").onclick = () => {
                if ($(".isfullscreen").classList.contains("icon-fullscreen")) {
                    $(".show").style.transform = `scale(2) rotate(${this.rotate()}deg)`
                    $(".isfullscreen").classList.remove("icon-fullscreen")
                    $(".isfullscreen").classList.add("icon-suoxiao1")
                } else {
                    $(".show").style.transform = `scale(1) rotate(${this.rotate()}deg)`
                    $(".isfullscreen").classList.add("icon-fullscreen")
                    $(".isfullscreen").classList.remove("icon-suoxiao1")
                }
            }
        }

        MouseEvent() {
          $(".show").onmousedown = (e) => {
              this.isRun = true;
              console.log("你按下了 this.isRun ：", this.isRun)
              e.preventDefault()
              this.x1 = e.clientX;
              this.y1 = e.clientY;

              this.l = parseInt($(".show").style.marginLeft);
            //   this.t = $(".show").offsetTop;
              this.t = parseInt($(".show").style.marginTop);

              this.ImgMove(".show")
          }

          // 离开图片的时候，把事件交给 preview
          $(".show").onmouseout = (e) => {
              console.log("离开图片的时候，把事件交给 preview: ", this.isRun)
              if (this.isRun) {
                  this.ImgMove(".preview")
              }
          }

          // 鼠标在背景上松开的时候
          $(".preview").onmouseup = (e) => {
              this.isRun = false
              $(".show").onmousemove = null
              $(".preview").onmousemove = null
          }

          // 鼠标在图片上松开的时候
          $(".show").onmouseup = (e) => {
              e.stopPropagation()
              this.isRun = false
              $(".show").onmousemove = null
          }
        }

        ImgMove(className) {
            $(className).onmousemove = (e) => {
                e.preventDefault()
                var x2 = e.x,
                    y2 = e.y;

                var x3 = x2 - this.x1,
                    y3 = y2 - this.y1;

                //更改元素的left，top值
                $(".show").style.marginLeft = `${x3 + this.l}px`;
                $(".show").style.marginTop = `${y3 + this.t}px`;
            }
        }

        changeImgSrc() {
            console.log(this.defaultOption.index)
            $(".show").src = this.defaultOption.data[this.defaultOption.index]
        }


        scale() {
            return Number($(".show").style.transform.match(/scale\(([\s\S]*?)\) /)[1])
        }

        rotate() {
            return Number($(".show").style.transform.match(/rotate\(([\s\S]*?)deg\)/)[1])
        }

    }


    function $(className) {
        return document.querySelector(className)
    }

    window.preview = Preview

})()