first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/项目合集/图片预览/.pydio
+++ b/项目合集/图片预览/.pydio
@@ -0,0 +1 @@
+0fb75996-e60a-48d6-bf09-1e163f1c8029
--- a/项目合集/图片预览/1.jpg
+++ b/项目合集/图片预览/1.jpg
--- a/项目合集/图片预览/2.jpg
+++ b/项目合集/图片预览/2.jpg
--- a/项目合集/图片预览/3.jpg
+++ b/项目合集/图片预览/3.jpg
--- a/项目合集/图片预览/4.jpg
+++ b/项目合集/图片预览/4.jpg
--- a/项目合集/图片预览/preview.css
+++ b/项目合集/图片预览/preview.css
@@ -0,0 +1,75 @@
+
+.preview {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 99;
+}
+.preview .preview_black{
+    width: 100%;
+    height: 100%;
+    background: #0000008c;
+    position: absolute;
+}
+.preview .preview_main{
+    position: relative;
+    z-index: 999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+}
+.preview_main .show {
+    height: 100%;
+}
+.preview_main .closed {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    font-size: 20px;
+    color: #fff;
+    z-index: 99;
+}
+.preview_main .preview_page i {
+    font-size: 30px;
+    font-weight: bolder;
+}
+.preview_main .preview_page {
+   
+    color: #fff;
+    z-index: 99;
+    position: absolute;
+    width: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    justify-content: space-between;
+    padding: 0 20px;
+    box-sizing: border-box;
+}
+.preview_action {
+    width: 282px;
+    height: 44px;
+    padding: 0 23px;
+    background-color: #606266;
+    position: absolute;
+    left: 50%;
+    bottom: 30px;
+    transform: translateX(-50%);
+    border-color: #fff;
+    border-radius: 22px;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    color: #fff;
+}
+.preview_action i {
+    font-size: 18px;
+}
+.leftx {
+    transform: rotateY(180deg);
+}
--- a/项目合集/图片预览/preview.html
+++ b/项目合集/图片预览/preview.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2576965_g3xukxxa1z.css">
+    <link rel="stylesheet" href="./preview.css">
+    <title>Document</title>
+    <style>
+        body {
+            margin: 0;
+        }
+    </style>
+</head>
+
+<body>
+
+
+    <div class="main"></div>
+
+
+
+
+</body>
+<script src="./preview.js"></script>
+<script>
+    // 两个参数
+    // 现实第几张图
+    // 图片数组
+
+    var imgArr = ['1.jpg', '2.jpg', '3.jpg', '4.jpg']
+
+    imgArr.forEach(function (v) {
+        document.querySelector(".main").innerHTML
+            += `<img width="100" src="${v}"/>`
+    })
+
+
+    document.querySelectorAll(".main img").forEach(function (v,i) {
+        v.onclick = function () {
+            console.log(v);
+            new preview({
+                index: i,
+                data: imgArr
+            })
+        }
+    })
+
+</script>
+
+</html>
--- a/项目合集/图片预览/preview.js
+++ b/项目合集/图片预览/preview.js
@@ -0,0 +1,195 @@
+(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
+
+})()
--- a/项目合集/图片预览/事件冒泡.html
+++ b/项目合集/图片预览/事件冒泡.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Title</title>
+</head>
+<body>
+
+<div class="test" onclick="test()">
+  <button onclick="hahahah(event)">点我</button>
+</div>
+</body>
+
+<script>
+  function test() {
+    console.log("test")
+  }
+
+  function hahahah(e) {
+    e.stopPropagation()
+    console.log("hhahaha")
+  }
+</script>
+</html>
--- a/项目合集/图片预览/笔记.txt
+++ b/项目合集/图片预览/笔记.txt
@@ -0,0 +1,6 @@
+使用js封装插件
+
+// 自执行函数
+
+// this 指向
+// this 是个墙头草