Home Explore Help
Sign In
lovecoding
/
VIP20
6
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

new

zsydgithub 2 years ago
parent
9f3b583c09
commit
c542785ef1
3 changed files with 100 additions and 3 deletions
Unified View Show Diff Stats
  1. 22 0
      10_节点.html
  2. 58 0
      11_节点遍历.html
  3. 20 3
      6_Dom/9_放大镜/放大镜.html

+ 22 - 0
10_节点.html
View File 

@@ -0,0 +1,22 @@
 
+<!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>
 
+</head>
 
+<body>
 
+  <div id="div1">1231231231</div>
 
+  <p id="p1">4564564645</p>
 
+  <script>
 
+    var div1 = document.getElementById('div1')
 
+    var p1 = document.getElementById('p1')
 
+    //节点的名字 div 元素节点 返回tagName
 
+    //文本节点返回#text,属性节点返回属性名
 
+    console.log(div1.nodeName)
 
+    console.log(p1.nodeName)
 
+    console.log(div1.nodeType)
 
+  </script>
 
+</body>
 
+</html>

+ 58 - 0
11_节点遍历.html
View File 

@@ -0,0 +1,58 @@
 
+<!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>
 
+</head>
 
+<body>
 
+  <div id="div1">111111111111111</div>
 
+  <p id="p1">222222222222</p>
 
+  <h1>hahahhahhhaahhahahh</h1>
 
+  <ul id="ul1">
 
+    <li>1</li>
 
+    <li>2</li>
 
+    <li>3</li>
 
+  </ul>
 
+  <script>
 
+    var div1 = document.getElementById('div1')
 
+    var p1 = document.getElementById('p1')
 
+    var ul1 = document.getElementById('ul1')
 
+    // console.log(div1.nodeType)
 
+    // console.log(p1.nodeName)
 
+    // console.log(div1.nextElementSibling)
 
+    // console.log(div1.nextSibling)
 
+    // console.log(div1.previousSibling)
 
+    // console.log(div1.previousElementSibling)
 
+    //nextSibling 指向下一个兄弟节点 
+    //nextElementSibling 指向下一个元素节点
 
+    //previousSibling 指向上一个兄弟节点
 
+    //previousElementSibling 指向上一个元素节点  如果这个节点就是第一个元素节点  那么该值为null
 
+    console.log(p1.nextElementSibling)
 
+    
+    //firstChild  指向在childNodes列表中的第一个节点
 
+    console.log(ul1.firstChild)
 
+    console.log(ul1.lastChild)
 
+
 
+
 
+    function next(elem){
 
+      do{
 
+        elem = elem.nextSibling
 
+      }while(elem.nodeType != 1)
 
+      return elem
 
+    }
 
+    console.log(next(div1))
 
+
 
+
 
+    function first(elem){
 
+      elem = elem.firstChild
 
+      if(elem.nodeType != 1){
 
+        elem = next(elem)
 
+      }
 
+      return elem
 
+    }
 
+    console.log(first(ul1))
 
+  </script>
 
+</body>
 
+</html>

+ 20 - 3
6_Dom/9_放大镜/放大镜.html
View File 

@@ -18,11 +18,13 @@
 
       height: 400px;
 
       height: 400px;
 
     }
 
     }
 
     #bigBox{
 
     #bigBox{
 
-      width: 800px;
 
-      height: 800px;
 
+      width: 400px;
 
+      height: 400px;
 
       left: 400px;
 
       left: 400px;
 
       top: 0;
 
       top: 0;
 
       position: absolute;
 
       position: absolute;
 
+      overflow: hidden;
 
+      /* display: none; */
 
     }
 
     }
 
     #drag{
 
     #drag{
 
       width: 200px;
 
       width: 200px;
 
@@ -33,6 +35,9 @@
 
       top: 0;
 
       top: 0;
 
       display: none;
 
       display: none;
 
     }
 
     }
 
+    #bigImg {
 
+      position: absolute;
 
+    }
 
   </style>
 
   </style>
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
@@ -42,12 +47,14 @@
 
       <div id="drag"></div>
 
       <div id="drag"></div>
 
     </div>
 
     </div>
 
     <div id="bigBox">
 
     <div id="bigBox">
 
-      <img src="images/2.jpg" alt="">
 
+      <img src="images/2.jpg" alt="" id="bigImg">
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
   <script>
 
   <script>
 
     var small = document.getElementById('smallBox')
 
     var small = document.getElementById('smallBox')
 
     var drag = document.getElementById('drag')
 
     var drag = document.getElementById('drag')
 
+    var big = document.getElementById('bigBox')
 
+    var bigImg = document.getElementById('bigImg')
 
     
     
     //鼠标划入显示遮罩层
 
     //鼠标划入显示遮罩层
 
     small.onmouseover = function(){
 
     small.onmouseover = function(){
 
@@ -82,6 +89,16 @@
 
       if(drag.offsetTop > zTop){
 
       if(drag.offsetTop > zTop){
 
         drag.style.top = zTop + 'px'
 
         drag.style.top = zTop + 'px'
 
       }
 
       }
 
+      //遮罩层移动距离 / 横轴最大移动距离 = 比例
 
+      var n = drag.offsetLeft / zLeft
 
+      var m = drag.offsetTop / zTop
 
+
 
+      //大图移动距离
 
+      var yLeft = bigImg.offsetWidth - big.offsetWidth
 
+      var yTop = bigImg.offsetHeight - big.offsetHeight
 
+
 
+      bigImg.style.left = -yLeft * n + 'px'
 
+      bigImg.style.top = -yTop * m + 'px'
 
     }
 
     }
 
   </script>
 
   </script>
 
 </body>
 
 </body>