Kezdőlap Felfedezés Súgó
Bejelentkezés
lovecoding
/
VIP26
9
0
Másolás 0
Fájlok Problémák 0 Beolvasztási kérések 0 Wiki
Forráskód Böngészése

fix:day:13

e 1 éve
szülő
3af45926b9
commit
c8391eeb43
9 módosított fájl, 221 hozzáadás és 2 törlés
Osztott Nézet Diff Statisztika Mutatása
  1. 0 2
      day12/js/4.选项卡.js
  2. 27 0
      day13/html/4.事件.html
  3. 24 0
      day13/html/5.拖拽.html
  4. 74 0
      day13/html/6.放大镜.html
  5. BIN
      day13/image/6.jpg
  6. BIN
      day13/image/7.jpg
  7. 38 0
      day13/js/4.事件.js
  8. 14 0
      day13/js/5.拖拽.js
  9. 44 0
      day13/js/6.放大镜.js

+ 0 - 2
day12/js/4.选项卡.js
Fájl Megtekintése 

@@ -4,9 +4,7 @@ var content = document.getElementsByClassName("active");
 
 for(var i=0; i<btn.length; i++) {
 
     // btn.length = 4
 
     // btn下的每一个下标都为对应的i
 
-    console.log(btn[i].index)
 
     btn[i].index = i;
 
-    console.log(btn[i].index)
 
     btn[i].onclick = function() {
 
         for(var j=0; j < content.length;j++){
 
             // className 改 class （类名）

+ 27 - 0
day13/html/4.事件.html
Fájl Megtekintése 

@@ -0,0 +1,27 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        .box {
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #f00;
 
+        }
 
+        .box1 {
 
+            width: 100px;
 
+            height: 100px;
 
+            background: #00f;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        <div class="box1"></div>
 
+    </div>
 
+    <input type="text" id="inp" placeholder="请输入内容">
 
+    <script src="../js/4.事件.js"></script>
 
+</body>
 
+</html>

+ 24 - 0
day13/html/5.拖拽.html
Fájl Megtekintése 

@@ -0,0 +1,24 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+        }
 
+        #box {
 
+            width: 200px;
 
+            height: 200px;
 
+            background: aqua;
 
+            position: absolute;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box"></div>
 
+    <script src="../js/5.拖拽.js"></script>
 
+</body>
 
+</html>

+ 74 - 0
day13/html/6.放大镜.html
Fájl Megtekintése 

@@ -0,0 +1,74 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+        }
 
+        #container {
 
+            /* overflow: auto; */
 
+            position: relative;
 
+        }
 
+        #small {
 
+            width: 400px;
 
+            height: 400px;
 
+            position: relative;
 
+            /* float: left; */
 
+        }
 
+        #drag {
 
+            width: 200px;
 
+            height: 200px;
 
+            background: rgba(0, 0, 0, .3);
 
+            display: none;
 
+            position: absolute;
 
+            top: 0;
 
+            left: 0;
 
+        }
 
+        #big {
 
+            /* float: left; */
 
+            position: absolute;
 
+            top: 0;
 
+            left: 400px;
 
+            width: 400px;
 
+            height: 400px;
 
+            overflow: hidden;
 
+            display: none;
 
+        }
 
+        #bigImg {
 
+            position: absolute;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="container">
 
+        <div id="small">
 
+            <img src="../image/6.jpg" alt="">
 
+            <div id="drag"></div>
 
+        </div>
 
+        <div id="big">
 
+            <img src="../image/7.jpg" alt="" id="bigImg">
 
+        </div>
 
+    </div>
 
+    <script src="../js/6.放大镜.js"></script>
 
+    <!-- 
+        排版:遮罩隐藏 大盒子隐藏
 
+        获取操作元素=> 小盒子、遮罩层、大盒子、大图片；
 
+        鼠标移入 ：遮罩显示 大盒子显示
 
+        鼠标移出: 遮罩隐藏 大盒子隐藏
 
+        鼠标移动：
 
+            1.先求出鼠标在遮罩层距离盒子的距离（鼠标是在遮罩层中心点）；
 
+            2.遮罩层移动赋值；
 
+            3.处理遮罩层超出距离；
 
+            4.先处理遮罩层左侧和上侧的超出问题
 
+            5.在求出遮罩层在小盒子所移动的最大距离
 
+            6.在处理遮罩层右侧和下方的超出问题
 
+            7.求比例 遮罩层元素移动距离 / 遮罩层所能移动的最大距离
 
+            8.再求出大图可以移动的最大距离
 
+            9.给大图设置位置：-大图可移动距离 * 移动比例 + 'px'
 
+     -->
 
+</body>
 
+</html>

BIN
day13/image/6.jpg
Fájl Megtekintése


BIN
day13/image/7.jpg
Fájl Megtekintése


+ 38 - 0
day13/js/4.事件.js
Fájl Megtekintése 

@@ -0,0 +1,38 @@
 
+var box = document.querySelector(".box");
 
+var box1 = document.querySelector(".box1");
 
+var input = document.querySelector("#inp")
 
+// 点击事件 onclick
 
+// 双击事件 ondblclick
 
+box.ondblclick = function() {
 
+    console.log("双击事件");
 
+}
 
+box.onmousedown = function() {
 
+    console.log("按下鼠标时触发事件");
 
+}
 
+box.onmouseup = function() {
 
+    console.log("鼠标按下松开时所触发的事件");
 
+}
 
+box1.onmouseover = function() {
 
+    console.log("当鼠标移动到某对象范围的上方时触发此事件");
 
+}
 
+box.onmousemove = function() {
 
+    console.log("鼠标移动时候触发");
 
+}
 
+box.onmouseout = function() {
 
+    console.log("鼠标移出时触发");
 
+}
 
+// 每一个function中都有其事件对象
 
+input.onkeydown = function(event) {
 
+    console.log(event.keyCode,"触发");
 
+    if(event.keyCode == '13') {
 
+        console.log("当前按键时回车键");
 
+    }
 
+}
 
+
 
+input.onkeyup = function() {
 
+    console.log("键盘抬起事件");
 
+}
 
+
 
+input.onkeypress = function() {
 
+    console.log("键盘上的某个键被按下并且释放时触发此事件");
 
+}

+ 14 - 0
day13/js/5.拖拽.js
Fájl Megtekintése 

@@ -0,0 +1,14 @@
 
+var box = document.getElementById("box");
 
+box.onmousedown = function(event) {
 
+    // e.clientX	事件发生时，鼠标在客户端区域的X坐标，客户端区域是指页面可视区域
 
+    // e.clientY	事件发生时，鼠标在客户端区域的Y坐标
 
+    var left1 = event.clientX - box.offsetLeft;
 
+    var top1 = event.clientY - box.offsetTop;
 
+    box.onmousemove = function(e) {
 
+        box.style.left = e.clientX - left1 + 'px';
 
+        box.style.top = e.clientY - top1 + 'px';
 
+    }
 
+}
 
+box.onmouseup = function() {
 
+    box.onmousemove = null;
 
+}

+ 44 - 0
day13/js/6.放大镜.js
Fájl Megtekintése 

@@ -0,0 +1,44 @@
 
+var small = document.getElementById("small");
 
+var drag = document.getElementById("drag");
 
+var big = document.getElementById("big");
 
+var bigImg = document.getElementById("bigImg");
 
+
 
+small.onmouseover = function() {
 
+    drag.style.display = 'block';
 
+    big.style.display = 'block';
 
+}
 
+
 
+small.onmouseout = function() {
 
+    drag.style.display = 'none';
 
+    big.style.display = 'none';
 
+}
 
+
 
+small.onmousemove = function(e) {
 
+    var smallLeft = e.clientX - drag.offsetWidth / 2;
 
+    var smallTop = e.clientY - drag.offsetHeight / 2;
 
+    drag.style.left = smallLeft + 'px';
 
+    drag.style.top = smallTop + 'px';
 
+    if(drag.offsetLeft <= 0) {
 
+        drag.style.left = 0;
 
+    }
 
+    if(drag.offsetTop <= 0) {
 
+        drag.style.top = 0;
 
+    }
 
+    // 遮罩层最大移动距离
 
+    var left1 = small.offsetWidth - drag.offsetWidth;
 
+    var top1 = small.offsetHeight - drag.offsetHeight;
 
+    if(drag.offsetLeft > left1) {
 
+        drag.style.left = left1 + 'px';
 
+    }
 
+    if(drag.offsetTop > top1) {
 
+        drag.style.top = top1 + 'px';
 
+    }
 
+    var x = drag.offsetLeft / left1;
 
+    var y = drag.offsetTop / top1;
 
+    // 大图可移动距离
 
+    var bigLeft = bigImg.offsetWidth - big.offsetWidth;
 
+    var bigTop = bigImg.offsetHeight - big.offsetHeight;
 
+
 
+    bigImg.style.left = -bigLeft * x + 'px';
 
+    bigImg.style.top = -bigTop * y + 'px';
 
+}