Главная Обзор Помощь
Вход
lovecoding
/
W260426
8
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Просмотр исходного кода

admin

fengchuanyu 1 неделя назад
Родитель
ee05dca9cf
Сommit
e2f377c1f5
2 измененных файлов с 88 добавлено и 0 удалено
Единый вид Показать статистику Diff
  1. 34 0
      4_BOM&DOM/19_js动画.html
  2. 54 0
      4_BOM&DOM/练习题7_拖动正方形.html

+ 34 - 0
4_BOM&DOM/19_js动画.html
Просмотреть файл 

@@ -0,0 +1,34 @@
 
+<!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-color: red;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+    <button>点击动画</button>
 
+    <script>
 
+        // 获取元素
 
+        var box = document.querySelector(".box");
 
+        var btn = document.querySelector("button");
 
+        // 绑定事件
 
+        btn.onclick = function(){
 
+            setInterval(function(){
 
+                // 获取元素宽度
 
+                var docWidth = box.offsetWidth;
 
+                console.log(docWidth);
 
+                box.style.width = (docWidth + 10) + "px";
 
+            },16)
 
+            // box.style.width = "400px";
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 54 - 0
4_BOM&DOM/练习题7_拖动正方形.html
Просмотреть файл 

@@ -0,0 +1,54 @@
 
+<!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: 100px;
 
+            height: 100px;
 
+            background-color: red;
 
+            position: fixed;
 
+            top:0;
 
+            left:0;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+    <script>
 
+        // 获取元素
 
+        var box = document.querySelector(".box");
 
+        // 获取整个文档
 
+        var doc = document.documentElement;
 
+        // 绑定事件
 
+        box.onmousedown = function(e){
 
+            // 元素距离顶部的距离
 
+            var docTop = box.offsetTop;
 
+            // 元素距离左侧的距离
 
+            var docLeft = box.offsetLeft;
 
+            // 鼠标点击的位置距离顶部的间距
 
+            var mouseTop = e.clientY;
 
+            // 鼠标点击的位置距离左侧的间距
 
+            var mouseLeft = e.clientX;
 
+            // 获取鼠标点击位置距离元素顶部的间距
 
+            var resTop = mouseTop - docTop;
 
+            // 获取鼠标点击位置距离元素左侧的间距
 
+            var resLeft = mouseLeft - docLeft;
 
+            // 给整个文档绑定移动事件
 
+            doc.onmousemove = function(event){
 
+                // 拖动时 正方形的位置会改变
 
+                box.style.left = event.clientX - resLeft + "px";
 
+                box.style.top = event.clientY - resTop + "px";
 
+            }
 
+
 
+        }
 
+        // 给整个文档绑定鼠标松开事件
 
+        doc.onmouseup = function(){
 
+            // 鼠标松开时 正方形停止移动
 
+            doc.onmousemove = null;
 
+        }
 
+    </script>
 
+</body>
 
+</html>