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

new

zsydgithub 1 year ago
parent
eac90630f8
commit
4db3f1831f
10 changed files with 640 additions and 0 deletions
Split View Show Diff Stats
  1. 179 0
      DOM/4_轮播图/1_轮播图.html
  2. 129 0
      DOM/4_轮播图/2_轮播图.html
  3. 126 0
      DOM/4_轮播图/3_轮播图.html
  4. 33 0
      DOM/5_获取元素的宽度.html
  5. 55 0
      DOM/6_动画.html
  6. 75 0
      DOM/7_事件.html
  7. 43 0
      DOM/8_拖拽.html
  8. BIN
      DOM/9_放大镜‘/images/.DS_Store
  9. BIN
      DOM/9_放大镜‘/images/1.jpg
  10. BIN
      DOM/9_放大镜‘/images/2.jpg

+ 179 - 0
DOM/4_轮播图/1_轮播图.html
View File 

@@ -0,0 +1,179 @@
 
+<!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>
 
+  <link rel="stylesheet" href="./icon/iconfont.css">
 
+  <style>
 
+    * {
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+
 
+    ul {
 
+      list-style: none;
 
+    }
 
+
 
+    #container {
 
+      width: 590px;
 
+      height: 470px;
 
+      margin: 100px auto;
 
+      position: relative;
 
+    }
 
+
 
+    .selected {
 
+      display: none;
 
+    }
 
+
 
+    .choice {
 
+      display: block;
 
+    }
 
+
 
+    #btns {
 
+      position: absolute;
 
+      right: 10px;
 
+      bottom: 10px;
 
+    }
 
+
 
+    #btns li {
 
+      width: 20px;
 
+      height: 20px;
 
+      border-radius: 10px;
 
+      background: aqua;
 
+      text-align: center;
 
+      line-height: 20px;
 
+      color: white;
 
+      float: left;
 
+      margin-right: 5px;
 
+    }
 
+
 
+    #btns .select {
 
+      background: red;
 
+    }
 
+
 
+    #next,
 
+    #prev {
 
+      width: 40px;
 
+      height: 40px;
 
+      position: absolute;
 
+      top: 215px;
 
+      opacity: 0.4;
 
+      display: none;
 
+    }
 
+
 
+    #next {
 
+      right: 0;
 
+    }
 
+
 
+    #next span {
 
+      font-size: 40px;
 
+    }
 
+
 
+    #prev span {
 
+      font-size: 40px;
 
+    }
 
+  </style>
 
+</head>
 
+
 
+<body>
 
+  <div id="container">
 
+    <div id="img-box">
 
+      <img class="selected choice" src="image/1.jpg" alt="">
 
+      <img class="selected" src="image/2.jpg" alt="">
 
+      <img class="selected" src="image/3.jpg" alt="">
 
+      <img class="selected" src="image/4.jpg" alt="">
 
+      <img class="selected" src="image/5.jpg" alt="">
 
+    </div>
 
+    <ul id="btns">
 
+      <li class="select">1</li>
 
+      <li>2</li>
 
+      <li>3</li>
 
+      <li>4</li>
 
+      <li>5</li>
 
+    </ul>
 
+    <div id="next">
 
+      <span class="iconfont icon-next"></span>
 
+    </div>
 
+    <div id="prev">
 
+      <span class="iconfont icon-prev"></span>
 
+    </div>
 
+  </div>
 
+  <script>
 
+    var btns = document.getElementsByTagName('li')
 
+    var imgs = document.getElementsByClassName('selected')
 
+    var next = document.getElementById('next')
 
+    var prev = document.getElementById('prev')
 
+    var container = document.getElementById('container')
 
+
 
+    iNow = 0
 
+    for (var i = 0; i < btns.length; i++) {
 
+      btns[i].index = i
 
+      btns[i].onclick = function () {
 
+        for (var k = 0; k < btns.length; k++) {
 
+          btns[k].className = ''
 
+          imgs[k].className = 'selected'
 
+        }
 
+        this.className = 'select'
 
+        imgs[this.index].className = 'selected choice'
 
+        iNow = this.index
 
+      }
 
+    }
 
+    //下一个点击事件
 
+    next.onclick = function () {
 
+      console.log(iNow)
 
+      iNow++;
 
+      if (iNow > btns.length - 1) {
 
+        iNow = 0
 
+      }
 
+      // for (var k = 0; k < btns.length; k++) {
 
+      //   btns[k].className = ''
 
+      //   imgs[k].className = 'selected'
 
+      // }
 
+      // btns[iNow].className = 'select'
 
+      // imgs[iNow].className = 'selected choice'
 
+      myFun(iNow)
 
+    }
 
+    //上一个点击事件
 
+    prev.onclick = function () {
 
+      iNow--;
 
+      if (iNow < 0) {
 
+        iNow = btns.length - 1
 
+      }
 
+      myFun(iNow)
 
+    }
 
+    //鼠标划入事件
 
+    container.onmousemove = function () {
 
+      next.style.display = 'block'
 
+      prev.style.display = 'block'
 
+      clearInterval(timer)
 
+    }
 
+    //鼠标划出事件
 
+    container.onmouseout = function () {
 
+      next.style.display = 'none'
 
+      prev.style.display = 'none'
 
+      timer = setInterval(function () {
 
+        next.onclick()
 
+      }, 1000)
 
+    }
 
+
 
+    //定时器
 
+    var timer = setInterval(function () {
 
+      next.onclick()
 
+    }, 1000)
 
+
 
+
 
+    var myFun = function (xx) {
 
+      for (var k = 0; k < btns.length; k++) {
 
+        btns[k].className = ''
 
+        imgs[k].className = 'selected'
 
+      }
 
+      btns[xx].className = 'select'
 
+      imgs[xx].className = 'selected choice'
 
+    }
 
+  </script>
 
+</body>
 
+
 
+</html>

+ 129 - 0
DOM/4_轮播图/2_轮播图.html
View File 

@@ -0,0 +1,129 @@
 
+<!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>
 
+  <link rel="stylesheet" href="./icon/iconfont.css">
 
+  <style>
 
+    * {
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+
 
+    ul {
 
+      list-style: none;
 
+    }
 
+
 
+    #container {
 
+      width: 590px;
 
+      height: 470px;
 
+      margin: 100px auto;
 
+      position: relative;
 
+      overflow: hidden;
 
+      
+    }
 
+
 
+    #img-box {
 
+      width: 2950px;
 
+      position: absolute;
 
+      left: 0;
 
+      /* 向左移动 延迟时间  匀速执行  */
 
+      transition: left 1s linear;
 
+    }
 
+
 
+    #img-box img {
 
+      float: left;
 
+    }
 
+
 
+    #btns {
 
+      position: absolute;
 
+      right: 10px;
 
+      bottom: 10px;
 
+    }
 
+
 
+    #btns li {
 
+      width: 20px;
 
+      height: 20px;
 
+      border-radius: 10px;
 
+      background: aqua;
 
+      text-align: center;
 
+      line-height: 20px;
 
+      color: white;
 
+      float: left;
 
+      margin-right: 5px;
 
+    }
 
+
 
+    #btns .select {
 
+      background: red;
 
+    }
 
+
 
+    #next,
 
+    #prev {
 
+      width: 40px;
 
+      height: 40px;
 
+      position: absolute;
 
+      top: 215px;
 
+      opacity: 0.4;
 
+      display: none;
 
+    }
 
+
 
+    #next {
 
+      right: 0;
 
+    }
 
+
 
+    #next span {
 
+      font-size: 40px;
 
+    }
 
+
 
+    #prev span {
 
+      font-size: 40px;
 
+    }
 
+  </style>
 
+</head>
 
+
 
+<body>
 
+  <div id="container">
 
+    <div id="img-box">
 
+      <img class="selected choice" src="image/1.jpg" alt="">
 
+      <img class="selected" src="image/2.jpg" alt="">
 
+      <img class="selected" src="image/3.jpg" alt="">
 
+      <img class="selected" src="image/4.jpg" alt="">
 
+      <img class="selected" src="image/5.jpg" alt="">
 
+    </div>
 
+    <ul id="btns">
 
+      <li class="select">1</li>
 
+      <li>2</li>
 
+      <li>3</li>
 
+      <li>4</li>
 
+      <li>5</li>
 
+    </ul>
 
+    <div id="next">
 
+      <span class="iconfont icon-next"></span>
 
+    </div>
 
+    <div id="prev">
 
+      <span class="iconfont icon-prev"></span>
 
+    </div>
 
+  </div>
 
+  <script>
 
+    var btns = document.getElementsByTagName('li')
 
+    var imgs = document.getElementsByClassName('selected')
 
+    var imgBox = document.getElementById('img-box')
 
+
 
+
 
+    for (var i = 0; i < btns.length; i++) {
 
+      btns[i].index = i
 
+      btns[i].onclick = function () {
 
+        for (var k = 0; k < btns.length; k++) {
 
+          btns[k].className = ''
 
+        }
 
+        this.className = 'select'
 
+        imgBox.style.left = -590 * this.index + 'px'
 
+      }
 
+    }
 
+  </script>
 
+</body>
 
+
 
+</html>

+ 126 - 0
DOM/4_轮播图/3_轮播图.html
View File 

@@ -0,0 +1,126 @@
 
+<!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>
 
+  <link rel="stylesheet" href="./icon/iconfont.css">
 
+  <style>
 
+    * {
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+
 
+    ul {
 
+      list-style: none;
 
+    }
 
+
 
+    #container {
 
+      width: 590px;
 
+      height: 470px;
 
+      margin: 100px auto;
 
+      position: relative;
 
+      /* overflow: hidden; */
 
+    }
 
+
 
+    #img-box img {
 
+      position: absolute;
 
+      opacity: 0;
 
+      /* 透明度 延迟时间  匀速执行 */
 
+      transition: opacity 1s linear ;
 
+    }
 
+
 
+    #img-box .choice {
 
+      opacity: 1;
 
+    }
 
+
 
+    #btns {
 
+      position: absolute;
 
+      right: 10px;
 
+      bottom: 10px;
 
+    }
 
+
 
+    #btns li {
 
+      width: 20px;
 
+      height: 20px;
 
+      border-radius: 10px;
 
+      background: aqua;
 
+      text-align: center;
 
+      line-height: 20px;
 
+      color: white;
 
+      float: left;
 
+      margin-right: 5px;
 
+    }
 
+
 
+    #btns .select {
 
+      background: red;
 
+    }
 
+
 
+    #next,
 
+    #prev {
 
+      width: 40px;
 
+      height: 40px;
 
+      position: absolute;
 
+      top: 215px;
 
+      opacity: 0.4;
 
+      display: none;
 
+    }
 
+
 
+    #next {
 
+      right: 0;
 
+    }
 
+
 
+    #next span {
 
+      font-size: 40px;
 
+    }
 
+
 
+    #prev span {
 
+      font-size: 40px;
 
+    }
 
+  </style>
 
+</head>
 
+
 
+<body>
 
+  <div id="container">
 
+    <div id="img-box">
 
+      <img class="selected choice" src="image/1.jpg" alt="">
 
+      <img class="selected" src="image/2.jpg" alt="">
 
+      <img class="selected" src="image/3.jpg" alt="">
 
+      <img class="selected" src="image/4.jpg" alt="">
 
+      <img class="selected" src="image/5.jpg" alt="">
 
+    </div>
 
+    <ul id="btns">
 
+      <li class="select">1</li>
 
+      <li>2</li>
 
+      <li>3</li>
 
+      <li>4</li>
 
+      <li>5</li>
 
+    </ul>
 
+    <div id="next">
 
+      <span class="iconfont icon-next"></span>
 
+    </div>
 
+    <div id="prev">
 
+      <span class="iconfont icon-prev"></span>
 
+    </div>
 
+  </div>
 
+  <script>
 
+    var btns = document.getElementsByTagName('li')
 
+    var imgs = document.getElementsByClassName('selected')
 
+
 
+    for (var i = 0; i < btns.length; i++) {
 
+      btns[i].index = i
 
+      btns[i].onclick = function () {
 
+        for (var k = 0; k < btns.length; k++) {
 
+          btns[k].className = ''
 
+          imgs[k].className = 'selected'
 
+        }
 
+        this.className = 'select'
 
+        imgs[this.index].className = 'selected choice'
 
+      }
 
+    }
 
+  </script>
 
+</body>
 
+
 
+</html>

+ 33 - 0
DOM/5_获取元素的宽度.html
View File 

@@ -0,0 +1,33 @@
 
+<!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>
 
+  <style>
 
+    *{
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+    #div1{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: pink;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1"></div>
 
+  <script>
 
+    var div1 = document.getElementById('div1')
 
+    div1.style.width = '300px'
 
+    // console.log(div1.style.width)//内联样式  300px
 
+    console.log(div1.offsetWidth)  //300
 
+    console.log(div1.offsetHeight)
 
+    console.log(div1.offsetLeft)
 
+    console.log(div1.offsetTop)
 
+
 
+  </script>
 
+</body>
 
+</html>

+ 55 - 0
DOM/6_动画.html
View File 

@@ -0,0 +1,55 @@
 
+<!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>
 
+  <style>
 
+    *{
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+    #div1{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: red;
 
+      transition: width 1s linear ;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <button id="up">放大</button>
 
+  <div id="div1"></div>
 
+  <button id="down">缩小</button>
 
+  <script>
 
+    var div1 = document.getElementById('div1')
 
+    var up = document.getElementById('up')
 
+    var down = document.getElementById('down')
 
+
 
+    // up.onclick = function(){
 
+    //   var timer = setInterval(function(){
 
+    //     if(div1.offsetWidth < 500){
 
+    //       div1.style.width = div1.offsetWidth + 10 +'px'
 
+    //     } else{
 
+    //       clearInterval(timer)
 
+    //     }
 
+    //   },10)
 
+    //   // div1.style.width = '500px'
 
+    // }
 
+
 
+    up.onclick = function(){
 
+      div1.style.width = '500px'
 
+    }
 
+    down.onclick = function(){
 
+      var timer2 = setInterval(function(){
 
+        if(div1.offsetWidth > 300){
 
+          div1.style.width = div1.offsetWidth - 10 + 'px'
 
+        } else {
 
+          clearInterval(timer2)
 
+        }
 
+      },10)
 
+    }
 
+  </script>
 
+</body>
 
+</html>

+ 75 - 0
DOM/7_事件.html
View File 

@@ -0,0 +1,75 @@
 
+<!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>
 
+  <style>
 
+    #div1{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: red;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1">
 
+    <input type="text" id="inp1" >
 
+  </div>
 
+  <script>
 
+    var div1 = document.getElementById('div1')
 
+    var inp1 = document.getElementById('inp1')
 
+
 
+    //点击事件
 
+    // div1.onclick = function(){
 
+    //   console.log('onclick')
 
+    // }
 
+
 
+    //双击事件
 
+    // div1.ondblclick = function(){
 
+    //   console.log('ondblclick')
 
+    // }
 
+
 
+    //鼠标移动事件
 
+    // div1.onmousemove = function(){
 
+    //   console.log('onmousemove')
 
+    // }
 
+
 
+    //鼠标划出事件
 
+    // div1.onmouseout = function(){
 
+    //   console.log('onmouseout')
 
+    // }
 
+
 
+    //按下鼠标发生事件
 
+    // div1.onmousedown = function(){
 
+    //   console.log('onmousedown')
 
+    // }
 
+
 
+    //鼠标抬起事件
 
+    // div1.onmouseup = function(){
 
+    //   console.log('onmouseup')
 
+    // }
 
+
 
+
 
+    //键盘按下触发事件
 
+    // inp1.onkeydown = function(e){
 
+    //   console.log('onkeydown')
 
+    //   // console.log(e.keyCode)
 
+    //   if(e.keyCode == 13){
 
+    //     console.log('我是回车')
 
+    //   }
 
+    // }
 
+
 
+    //键盘抬起事件
 
+    // inp1.onkeyup = function(){
 
+    //   console.log('onkeyup')
 
+    // }
 
+
 
+
 
+    // inp1.onkeypress = function(){
 
+    //   console.log('onkeypress')
 
+    // }
 
+  </script>
 
+</body>
 
+</html>

+ 43 - 0
DOM/8_拖拽.html
View File 

@@ -0,0 +1,43 @@
 
+<!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>
 
+  <style>
 
+    #div1{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: red;
 
+      position: absolute;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1"></div>
 
+  <script>
 
+    var div1 = document.getElementById('div1')
 
+
 
+    //鼠标按下事件
 
+    div1.onmousedown = function(e){
 
+      // console.log(e.clientX,e.clientY)
 
+
 
+      //鼠标距离div1边框的距离
 
+      var xLeft = e.clientX - div1.offsetLeft
 
+      var xTop = e.clientY - div1.offsetTop
 
+      console.log(xLeft,xTop)
 
+
 
+      div1.onmousemove = function(e){
 
+        div1.style.left = e.clientX - xLeft +'px'
 
+        div1.style.top = e.clientY - xTop + 'px'
 
+        // console.log(111)
 
+      }
 
+    }
 
+
 
+    div1.onmouseup = function(){
 
+      div1.onmousemove = null
 
+    }
 
+  </script>
 
+</body>
 
+</html>

BIN
DOM/9_放大镜‘/images/.DS_Store
View File


BIN
DOM/9_放大镜‘/images/1.jpg
View File


BIN
DOM/9_放大镜‘/images/2.jpg
View File