first commit

历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/图片预览/index.css

@@ -0,0 +1,90 @@
+* {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.list img {
+    width: 100px;
+}
+
+.preview {
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 999;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.preview .zz {
+    width: 100%;
+    height: 100%;
+    background: #000000c4;
+    z-index: -1;
+    position: absolute;
+}
+
+.preview .preview_img {
+    transition: all 0.3s;
+    user-select: none;
+    cursor: pointer;
+}
+
+.preview .icon-close {
+    position: absolute;
+    z-index: 2;
+    right: 10px;
+    top: 10px;
+    color: #fff;
+    font-size: 40px;
+}
+
+.preview .button {
+    position: absolute;
+    width: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 2;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 20px;
+    box-sizing: border-box;
+}
+
+.preview .button i {
+    color: #fff;
+    font-size: 25px;
+
+}
+.preview .icon{
+    z-index: 2;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 30px;
+    padding: 9px 10px;
+    background: #716f6fc4;
+    border-radius: 25px;
+}
+
+.preview .icon i {
+    color: #fff;
+    font-size: 22px;
+    margin-right: 20px;
+    cursor: pointer;
+    user-select: none;
+}
+
+.preview .icon i:last-child {
+    margin-right: 0px;
+}
+
+.icon .right {
+    transform: rotateY(180deg);
+    display: inline-block;
+}

历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/图片预览/index.html

@@ -0,0 +1,148 @@
+<!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">
+    <title>Document</title>
+    <link rel="stylesheet" href="index.css">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3445167_gwp92uwquwa.css">
+</head>
+<body>
+    <div class="list">
+        <img src="https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg" alt="">
+    </div>
+</body>
+<script>
+
+    var scaleNum = 1, rotateNum = 0, startX = null, startY = null, oldLeft = null, oldTop = null, MoveStatus = false;
+
+    _(".list img").forEach(v => {
+        v.onclick = () => {
+            $("body").insertAdjacentHTML("beforeend", `
+                <div class="preview">
+                    <div class="zz"></div>
+                    <img style="transform: scale(${scaleNum}) rotate(${rotateNum}deg); height: 100%; margin-left: 0px;margin-top: 0px;" class="preview_img" src="https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg" alt="">
+                    <i class="iconfont icon-close"></i>
+                    <div class="button">
+                        <i class="iconfont icon-fanhui"></i>
+                        <i class="iconfont icon-gengduo"></i>
+                    </div>   
+                    <div class="icon">
+                        <i class="iconfont icon-suoxiao"></i>
+                        <i class="iconfont icon-fangda"></i>
+                        <i class="iconfont qp icon-quanping"></i>
+                        <i class="iconfont icon-yulanxuanzhuan left "></i>
+                        <i class="iconfont icon-yulanxuanzhuan right"></i>
+                    </div>
+                </div>
+            `);
+
+            $(".icon-close").onclick = () => {
+                $("body").removeChild($(".preview"))
+            }
+
+            $(".icon-suoxiao").onclick = () => {
+                scaleNum = scaleNum - 0.2 < 0.2 ? 0.2 : scaleNum - 0.2
+                xuanzhong()
+            }
+
+            $(".icon-fangda").onclick = () => {
+                scaleNum += 0.2
+                xuanzhong()
+            }
+
+            $(".left").onclick = () => {
+                rotateNum -= 90
+                xuanzhong()
+            }
+
+            $(".right").onclick = () => {
+                rotateNum += 90
+                xuanzhong()
+            }
+
+            $(".icon-quanping").onclick = () => {
+                if ($(".qp").classList.contains("icon-quanping")) {
+                    $(".qp").classList.replace("icon-quanping", "icon-beijingyibiyi")
+                    $(".preview_img").style.height = "auto"
+                } else {
+                    $(".qp").classList.replace("icon-beijingyibiyi", "icon-quanping")
+                    $(".preview_img").style.height = "100%"
+                }
+            }
+
+            $(".preview_img").onmousedown = (e) => {
+                MoveStatus = true;
+                e.preventDefault();
+                e.stopPropagation();
+                startX = e.x;
+                startY = e.y;
+  
+
+                oldLeft = parseInt($(".preview_img").style.marginLeft);
+                oldTop = parseInt($(".preview_img").style.marginTop);
+
+                $(".preview_img").onmousemove = (e) => {
+                    console.log("preview_img");
+                    MouseMove(e)
+                }
+
+
+                $(".preview_img").onmouseup = () => {
+                    MoveStatus = false;
+
+                    $(".preview_img").onmousemove = null
+
+                }
+            }
+
+            $(".preview_img").onmouseout = () => {
+                if (MoveStatus) {
+                    $(".preview").onmousemove = (e) => {
+                        console.log("preview");
+                        console.log("2 MoveStatus: ", MoveStatus);
+                        MouseMove(e)
+                    }
+                }
+            }
+
+            $(".preview").onmouseup = () => {
+                MoveStatus = false;
+                $(".preview_img").onmousemove = null
+                $(".preview").onmousemove = null
+            }
+
+
+
+        }
+    })
+
+    function MouseMove(e) {
+        console.log("3 status: ", status);
+
+        e.preventDefault();
+        e.stopPropagation();
+        var moveX = e.x, moveY = e.y;
+        var offsetX = moveX - startX, offsetY = moveY - startY;
+
+        console.log("移动数值：", offsetX, offsetY);
+
+        $(".preview_img").style.marginLeft = `${offsetX + oldLeft}px`;
+        $(".preview_img").style.marginTop = `${offsetY + oldTop}px`;
+    }
+
+    function xuanzhong() {
+        $(".preview_img").style.transform = `scale(${scaleNum}) rotate(${rotateNum}deg)`
+    }
+
+
+    function $(className) {
+        return document.querySelector(className)
+    }
+
+    function _(className) {
+        return document.querySelectorAll(className)
+    }
+</script>
+</html>