首页 发现 帮助
登录
lovecoding
/
web0331
10
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

fix:dom

e 2 周之前
父节点
b0056b608e
当前提交
9927cccf53
共有 11 个文件被更改，包括 240 次插入 和 0 次删除
合并视图 显示文件统计
  1. 96 0
      3.js初级/DOM/6.轮播.html
  2. 66 0
      3.js初级/DOM/6.轮播.js
  3. 40 0
      3.js初级/DOM/7.获取元素的节点.html
  4. 38 0
      3.js初级/DOM/8.transition.html
  5. 二进制
      3.js初级/DOM/images/1.jpg
  6. 二进制
      3.js初级/DOM/images/2.jpg
  7. 二进制
      3.js初级/DOM/images/3.jpg
  8. 二进制
      3.js初级/DOM/images/4.jpg
  9. 二进制
      3.js初级/DOM/images/5.jpg
  10. 二进制
      3.js初级/DOM/images/6.jpg
  11. 二进制
      3.js初级/DOM/images/7.jpg

+ 96 - 0
3.js初级/DOM/6.轮播.html
查看文件 

@@ -0,0 +1,96 @@
 
+<!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;
 
+          list-style: none;
 
+          text-decoration: none;
 
+          box-sizing: border-box;
 
+        }
 
+        #container {
 
+            width: 590px;
 
+            height: 470px;
 
+            margin: 150px auto;
 
+            border: 2px solid #000;
 
+            position: relative;
 
+        }
 
+        .selected {
 
+            display: none;
 
+        }
 
+        .choose {
 
+            display: block;
 
+        }
 
+        #list {
 
+            overflow: hidden;
 
+            position: absolute;
 
+            right: 10px;
 
+            bottom: 10px;
 
+        }
 
+        #list li {
 
+            float: left;
 
+            width: 30px;
 
+            height: 30px;
 
+            text-align: center;
 
+            line-height: 30px;
 
+            font-size: 14px;
 
+            border-radius: 50%;
 
+            color: #fff;
 
+            background-color: blue;
 
+            margin-left: 7px;
 
+        }
 
+        #list .active {
 
+            color: yellow;
 
+            background: red;
 
+        }
 
+        #prev,#next {
 
+            width: 60px;
 
+            height: 40px;
 
+            text-align: center;
 
+            line-height: 40px;
 
+            color: #fff;
 
+            background: purple;
 
+            display: none;
 
+        }
 
+        #prev{
 
+            position: absolute;
 
+            left: 0;
 
+            top:50%;
 
+        }
 
+        #next{
 
+            position: absolute;
 
+            right: 0;
 
+            top:50%;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="container">
 
+        <div id="imgBox">
 
+            <img src="./images/1.jpg" class="selected choose" alt="">
 
+            <img src="./images/2.jpg" class="selected" alt="">
 
+            <img src="./images/3.jpg" class="selected" alt="">
 
+            <img src="./images/4.jpg" class="selected" alt="">
 
+            <img src="./images/5.jpg" class="selected" alt="">
 
+        </div>
 
+        <ul id="list">
 
+            <li class="active">1</li>
 
+            <li>2</li>
 
+            <li>3</li>
 
+            <li>4</li>
 
+            <li>5</li>
 
+        </ul>
 
+        <div id="prev">
 
+            <span>&lt;</span>
 
+        </div>
 
+        <div id="next">
 
+            <span>&gt;</span>
 
+        </div>
 
+    </div>
 
+    <script src="./6.轮播.js"></script>    
+</body>
 
+</html>

+ 66 - 0
3.js初级/DOM/6.轮播.js
查看文件 

@@ -0,0 +1,66 @@
 
+var points = document.querySelectorAll("#list li");
 
+var prev = document.getElementById("prev");
 
+var next = document.getElementById("next");
 
+var picture = document.querySelectorAll(".selected");
 
+var container = document.getElementById("container")
 
+var currentIndex = 0;
 
+//点击指示点 切换图片
 
+for(var i=0;i<points.length;i++) {
 
+    points[i].index = i;
 
+    points[i].onclick = function() {
 
+        //  切换
 
+        currentIndex = this.index;
 
+        autoPlay(currentIndex)
 
+    }
 
+}
 
+
 
+// 切换事件
 
+function autoPlay (ind) {
 
+    console.log(ind);
 
+    for(var i=0;i<points.length;i++) {
 
+        points[i].className = '';
 
+        picture[i].className = 'selected'
 
+    }
 
+    points[ind].className = 'active';
 
+    picture[ind].className = 'selected choose'
 
+}
 
+
 
+// 点击上一页
 
+prev.onclick = function() {
 
+    // console.log(currentIndex,'currentIndex')
 
+    currentIndex--;
 
+    if(currentIndex < 0) {
 
+        currentIndex = picture.length - 1;
 
+    }
 
+    autoPlay(currentIndex)
 
+}
 
+
 
+// 点击下一页
 
+next.onclick = function() {
 
+    currentIndex++;
 
+    if(currentIndex > picture.length - 1) {
 
+        currentIndex = 0;
 
+    }
 
+    autoPlay(currentIndex)
 
+}
 
+
 
+// 自动播放
 
+var timer = setInterval(function(){
 
+    next.onclick();
 
+},1000)
 
+
 
+// 鼠标划过
 
+container.onmousemove = function() {
 
+    clearInterval(timer);
 
+    prev.style.display = 'block';
 
+    next.style.display = 'block';
 
+}
 
+
 
+// 鼠标划出
 
+container.onmouseout = function() {
 
+    prev.style.display = 'none';
 
+    next.style.display = 'none';
 
+    timer = setInterval(function(){
 
+        next.onclick();
 
+    },1000)
 
+}

+ 40 - 0
3.js初级/DOM/7.获取元素的节点.html
查看文件 

@@ -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>
 
+        
+      * {
 
+        margin: 0;
 
+        padding: 0;
 
+        list-style: none;
 
+        text-decoration: none;
 
+        box-sizing: border-box;
 
+      }
 
+      #box {
 
+        width: 300px;
 
+        height: 400px;
 
+        background: pink;
 
+        margin-top: 100px;
 
+        margin-left: 200px;
 
+      }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box"></div>
 
+    <script>
 
+        var box = document.getElementById("box");
 
+        console.log(box);
 
+        // 获取元素宽度
 
+        console.log(box.offsetWidth)
 
+        // 获取元素高度
 
+        console.log(box.offsetHeight)
 
+        // 获取元素距离顶部的高度
 
+        console.log(box.offsetTop)
 
+        // 获取元素距离左侧的距离
 
+        console.log(box.offsetLeft)
 
+    </script>
 
+</body>
 
+</html>

+ 38 - 0
3.js初级/DOM/8.transition.html
查看文件 

@@ -0,0 +1,38 @@
 
+<!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: red;
 
+            transition: all 2s ease-in 5s;
 
+        }
 
+        #box:hover {
 
+            width: 500px;
 
+            height: 500px;
 
+            background: yellow;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- 
+        动画
 
+        过渡效果：在一定时间内平滑的过渡
 
+        transition:
 
+            transition-property: 执行名称（all/width/height）
 
+            transition-duration: 执行过渡效果时间
 
+            transition-timing-function:运动曲线
 
+                linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
 
+                ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
 
+                ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
 
+                ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
 
+                ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
 
+            transition-delay 过渡效果何时开始。
 
+    -->
 
+    <div id="box"></div>
 
+</body>
 
+</html>

二进制
3.js初级/DOM/images/1.jpg
查看文件


二进制
3.js初级/DOM/images/2.jpg
查看文件


二进制
3.js初级/DOM/images/3.jpg
查看文件


二进制
3.js初级/DOM/images/4.jpg
查看文件


二进制
3.js初级/DOM/images/5.jpg
查看文件


二进制
3.js初级/DOM/images/6.jpg
查看文件


二进制
3.js初级/DOM/images/7.jpg
查看文件