first commit

历届学生/fontendsix/项目练习/上课项目/图片预览/js/ImagePreview.js

@@ -0,0 +1,171 @@
+class ImagePreview {
+    option = {
+        l: 0,
+        t: 0,
+        startX: 0,
+        startY: 0,
+        scale: 1,
+        rotate: 0,
+        isLongTag: false,
+
+        images: [],
+        startPosition: 0,
+        showPagination: false,
+        onChange: () => { },
+        onClose: () => { }
+    }
+
+    constructor(option) {
+        if (option.hasOwnProperty("images") && option.images.length != 0) {
+            this.option.startPosition = option.startPosition || this.option.startPosition;
+            this.option.images = option.images || this.option.images;
+            this.option.showPagination = option.showPagination || this.option.showPagination;
+            this.option.onChange = option.onChange || this.option.onChange;
+            this.option.onClose = option.onClose || this.option.onClose;
+
+            this.initHTML();
+        } else {
+            throw new Error("images必传，images不能为空！！！")
+        }
+    }
+
+    initHTML() {
+        $("body").insertAdjacentHTML("beforeend", `
+            <div class="bmy_image_preview">
+                <div class="bmy_image_canvas">
+                    <img class="bmy_preview sx" 
+                    style="transform: scale(1) rotate(0deg); margin-left: 0px; margin-top: 0px; "
+                    src="${this.option.images[this.option.startPosition]}" alt="">
+
+                </div>
+                <div class="bmy_mask"></div>
+
+                <i class="iconfont icon-closedx bmy_button bmy_close"></i>
+                <i class="iconfont icon-zuo bmy_button bmy_prev"></i>
+                <i class="iconfont icon-zhankai-copy bmy_button bmy_next"></i>
+
+                <ul class="bmy_menu">
+                    <li>
+                        <i class="iconfont icon-suoxiao"></i>
+                    </li>
+                    <li>
+                        <i class="iconfont icon-fangda"></i>
+                    </li>
+                    <li>
+                        <i class="iconfont bl icon-fullscreen"></i>
+                    </li>
+                    <li>
+                        <i class="iconfont icon-shuaxin left_xz"></i>
+                    </li>
+                    <li>
+                        <i class="iconfont icon-shuaxin right_xz"></i>
+                    </li>
+                </ul>
+            </div>
+        `);
+
+        this.onEvent()
+    }
+
+    onEvent() {
+        $(".bmy_close").onclick = () => {
+            $("body").removeChild($(".bmy_image_preview"))
+            this.option.onClose()
+        }
+
+        $(".bmy_prev").onclick = () => {
+            this.option.startPosition--
+            this.option.startPosition < 0 ? this.option.startPosition = this.option.images.length - 1 : ''
+            this.changeImgSrc()
+        }
+
+        $(".bmy_next").onclick = () => {
+            this.option.startPosition++
+            this.option.startPosition >= this.option.images.length ? this.option.startPosition = 0 : ''
+            this.changeImgSrc()
+        }
+
+        $(".icon-suoxiao").onclick = () => {
+            if (this.option.scale > 0.2) {
+                this.option.scale = Number((this.option.scale - 0.2).toFixed(1));
+                this.ScaleAndRotate()
+            }
+        }
+
+        $(".icon-fangda").onclick = () => {
+            this.option.scale += 0.2;
+            this.ScaleAndRotate()
+        }
+
+        $(".left_xz").onclick = () => {
+            this.option.rotate -= 90;
+            this.ScaleAndRotate()
+        }
+        $(".right_xz").onclick = () => {
+            this.option.rotate += 90
+            this.ScaleAndRotate()
+        }
+
+        $(".bl").onclick = () => {
+            if ($(".bl").classList.contains("icon-fullscreen")) {
+                $(".bmy_preview").classList.remove("sx")
+                this.option.scale = 1
+                this.option.rotate = 0
+                this.ScaleAndRotate()
+            } else {
+                $(".bmy_preview").classList.add("sx")
+            }
+            $(".bl").classList.toggle("icon-suoxiao1")
+            $(".bl").classList.toggle("icon-fullscreen")
+        }
+
+        $(".bmy_preview").onmousedown = (e) => {
+            e.preventDefault()
+            this.isLongTag = true;
+            this.startX = e.screenX;
+            this.startY = e.screenY;
+
+            this.l = parseInt($(".bmy_preview").style.marginLeft);
+            this.t = $(".bmy_preview").offsetTop;
+
+            this.move(".bmy_preview")
+        }
+
+        $(".bmy_preview").onmouseleave = () => {
+            if (this.isLongTag) {
+                this.move(".bmy_image_canvas")
+            }
+        }
+
+        $(".bmy_image_preview").onmouseup = () => {
+            this.isLongTag = false;
+            $(".bmy_preview").onmousemove = null
+            $(".bmy_image_canvas").onmousemove = null
+        }
+       
+    }
+
+
+    move(className) {
+        $(className).onmousemove = (ev) => {
+            ev.preventDefault()
+            var moveX = ev.screenX, moveY = ev.screenY;
+            var newX = moveX - this.startX, newY = moveY - this.startY;
+            $(".bmy_preview").style.marginLeft = `${newX + this.l}px`;
+            $(".bmy_preview").style.marginTop = `${newY + this.t}px`;
+        }
+    }
+
+    ScaleAndRotate() {
+        $(".bmy_preview").style.transform = `scale(${this.option.scale}) rotate(${this.option.rotate}deg)`
+    }
+
+    changeImgSrc() {
+        this.option.onChange(this.option.startPosition)
+        $(".bmy_preview").src = this.option.images[this.option.startPosition]
+    }
+}
+
+function $(className) {
+    return document.querySelector(className)
+}