Startseite Erkunden Hilfe
Anmelden
lovecoding
/
W250913
10
0
Fork 0
Dateien Issues 0 Pull-Requests 0 Wiki
Quellcode durchsuchen

admin

fengchuanyu vor 9 Stunden
Ursprung
cd5064b81f
Commit
4d43453933
4 geänderte Dateien mit 111 neuen und 5 gelöschten Zeilen
Geteilte Ansicht Diff-Statistik anzeigen
  1. 15 5
      4_BOM&DOM/22_DOM事件委托.html
  2. 40 0
      5_CSS3/1_位移.html
  3. 28 0
      5_CSS3/2_缩放.html
  4. 28 0
      5_CSS3/3_旋转.html

+ 15 - 5
4_BOM&DOM/22_DOM事件委托.html
Datei anzeigen 

@@ -13,20 +13,30 @@
 
     <script>
 
         var oBtn = document.getElementsByTagName("button")[0];
 
         var oUl = document.getElementsByTagName("ul")[0];
 
-        var oLi = document.getElementsByTagName("li")[0];
 
+        var oLi = document.getElementsByTagName("li");
 
+        var i = 1
 
         oBtn.onclick = function(){
 
             var newLi = document.createElement("li");
 
+            newLi.innerText = ++i;
 
             oUl.append(newLi);
 
         }
 
         oUl.onclick = function(evnet){
 
             // console.log(evnet)
 
             // event.target 基于事件冒泡 可以捕捉到具体内部哪一个元素触发的事件
 
             // 事件委托 将内部元素的事件委托给父元素进行处理
 
-            console.log(evnet.target);
 
-        }
 
-        oLi.onclick = function(event){
 
-            console.log("li")
 
+            // 动态添加的元素如果绑定事件一般使用事件委托
 
+            console.log(evnet.target.innerText);
 
         }
 
+        // oLi.onclick = function(event){
 
+        //     console.log("li")
 
+        // }
 
+
 
+        // for(var i=0;i<oLi.length;i++){
 
+        //     console.log(i);
 
+        //     oLi[i].onclick = function(){
 
+        //         console.log(this.innerText);
 
+        //     }
 
+        // }
 
     </script>
 
 </body>
 
 </html>

+ 40 - 0
5_CSS3/1_位移.html
Datei anzeigen 

@@ -0,0 +1,40 @@
 
+<!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>
 
+        .box1{
 
+            width: 400px;
 
+            height: 400px;
 
+            border: 3px dashed black;
 
+            position: relative;
 
+        }
 
+        .box2{
 
+            height: 200px;
 
+            width: 200px;
 
+            background-color: red;
 
+            position: absolute;
 
+            top: 50%;
 
+            left: 50%;
 
+            /* margin-top: -100px;
 
+            margin-left: -100px; */
 
+            /* transform 变形 */
 
+            /* translate 是位移 后面两个值 第一个横向位移 第二个纵向位移 可以写具体的数值 也可以写百分比（相较于元素本身）  */
 
+            /* transform: translate(10px,100px); */
 
+            /* 同一个选择器中不允许重复处想两个相同的属性 */
 
+            /* translateY 纵向位移 */
 
+            /* transform: translateY(-100px);
 
+            /* translateX 横向位移*/
 
+            /* transform: translateX(-100px);  */
 
+            transform: translateX(-100px) translateY(-100px);
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box1">
 
+        <div class="box2"></div>
 
+    </div>
 
+</body>
 
+</html>

+ 28 - 0
5_CSS3/2_缩放.html
Datei anzeigen 

@@ -0,0 +1,28 @@
 
+<!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: blue;
 
+            margin: 100px auto;
 
+            border-radius: 50%;
 
+        }
 
+        .box:hover{
 
+            /* width: 200px;
 
+            height: 200px; */
 
+            /* scale 缩放 以当前元素中心点进行缩放 取值范围大于0 大于一为放大比例 小于一为缩小比例 */
 
+            /* transform: scale(0.5); */
 
+            /* scaleX 横向缩放 scaleY 纵向缩放 */
 
+            /* transform: scaleX(2); */
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+</body>
 
+</html>

+ 28 - 0
5_CSS3/3_旋转.html
Datei anzeigen 

@@ -0,0 +1,28 @@
 
+<!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: blue;
 
+            margin: 100px auto;
 
+        }
 
+        .box:hover{
 
+            /* rotate 旋转 正数表示顺时针旋转 负数 逆时针旋转 单位deg 度数 */
 
+            transform: rotate(45deg);
 
+            /* transform-origin 可以控制变形的原点 */
 
+            /* transform-origin 后边可以写具体的数值 */
 
+            /* transform-origin: 200px 200px; */
 
+            /* transform-origin: right bottom; */
 
+            /* transform-origin: center; */
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+</body>
 
+</html>