网页特效

kyrie28
178 阅读3分钟

滚动事件

当页面进行滚动触发的事件

（网页需要检测用户把页面滚动到某个区域后做一些处理比如固定导航栏，返回顶部）

事件名：scroll

监听整个页面的滚动

window.addEventListener('scroll',function(){
        
    })

加载事件

-加载外部资源（如图片，外联css和js）加载完毕时触发的事件

  • 有些时候需要把页面资源全部处理 完了做一些事情
  • 老代码喜欢把sc写在head中，这时候直接找dom元素找不到

时间名：load

给windom添加load事件

        //页面加载事件
         window.addEventListener('load',function(){
        
    })

-当初始的html文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表，图像等完全加载

事件名：DOMContentLoaded

监听页面DOM加载完毕

  • 给document添加DOMContentLoaded事件

     document.addEventListener('DOMContentLoaded',function(){
      //执行的操作
  })

    元素大小和位置

    • scroll家族

      使用场景

    我们想要页面滚动一段距离比如100px就让某些元素显示隐藏，那就可以使用scroll来检测页面滚动的距离 1.获取宽高

    获取元素的内容总宽高（不包含滚动台条）返回值不带单位

           scrollWidth和scrollHeight（内容）

    2.获取位置

    获取元素往左，向上滚出去看不到的距离

           scrollLeft和scrollTop

    这两个属性是可以修改的

      window.addEventListener('scroll',function(){
  console.log(document.documentElement.scrollTop)
 })

    小案例页面滚动显示返回顶部按钮

    需求：当页面滚动500px就显示返回顶部按钮，否则隐藏，同时点击按钮，则返回顶部

    分析：

    1.用到页面滚动事件

    2.检测页面滚动大于等于500px像素则显示按钮

    3.点击按钮让页面的scrolltop重置为0

      <!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>
  body {
      height: 3000px;
  }
  
  .aside {
      position: fixed;
      text-align: center;
      border: 1px solid #333;
      right: 10px;
      top: 200px;
      width: 30px;
      background-color: pink;
      transition: .5s;
  }
       </style>
  </head>

  <body>
        <div class="aside">
  帅哥出现
  <a href="">111</a>
       </div>

        <script>
  let backtop = document.querySelector('.aside')
      // 页面滚动事件
  window.addEventListener('scroll', function() {
          // 页面检测滚动距离
          let num = document.documentElement.scrollTop
          if (num >= 500) {
              backtop.style.display = 'block'
          } else {
              backtop.style.display = 'none'
          }
      })
      // 点击链接返回顶部
  backtop.children[1].addEventListener('click', function() {
      document.documentElement.scrollTop = 0
  })
    </script>
 </body>

    </html>
    • offset家族

    使用场景

    通过js的方式，得到元素在页面中的位置这样我们可以做页面滚动到这个位置就可以返回顶部的小盒子显示

    1.获取宽高

    获取元素的自身的宽高，包含元素自身设置的宽高，paddinhg，border

          offsetWidth和offsetHeight

    2.获取位置

    获取元素距离自己父级元素左上距离

           offsetLeft和offsetTop

    小案例京东固定导航栏案例

    需求：当页面滚动到秒杀模块，导航栏自动划入，否则滑出 分析： 1.用到页面滚动事件 2.检测页面滚动大于等于秒杀模块的位置则划入，否则滑出

           <!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>顶部导航栏和侧边</title>
      <link rel="stylesheet" href="../css/reset.css">
      <style>
  /* 滚动条 */
  
  body {
      height: 2000px;
  }
  
  .container {
      position: fixed;
      top: -80px;
      left: 0;
      background: #fff;
      position: fixed;
      width: 100%;
      height: 50px;
      border-bottom: 2px solid red;
  }
  
  .logo1 {
      float: left;
      margin-left: 150px;
      margin-top: 5px;
      width: 125px;
      height: 40px;
      /* background-position: 0 -120px; */
      /* overflow: hidden;
      display: block; */
  }
  
  .form {
      /* 绝对定位 */
      position: absolute;
      width: 550px;
      /* left: 220px; */
      top: 8px;
      left: 440px;
      margin: auto;
      height: 32px;
      border: 2px solid red;
      /* background: #fff; */
      /* position: relative; */
  }
  
  input {
      float: left;
      border: none;
      outline: none;
      padding: 10px 10px;
      width: 466px;
      height: 10px;
      font-size: 12px;
      background-image: url(../img/jd-xj.png);
      background-repeat: no-repeat;
      background-position: 460px;
      background-size: 20px 20px;
  }
  
  .img1 {
      float: left;
      width: 19px;
      height: 15px;
      margin-top: 5px;
  }
  
  .button {
      float: right;
      background-color: red;
      width: 58px;
      height: 32px;
      background-image: url(../img/jd-ss.png);
      background-size: 20px;
      background-repeat: no-repeat;
      background-position: 20px;
  }
  
  .box3 {
      position: absolute;
      top: 5px;
      left: 1040px;
      width: 100px;
      height: 40px;
      padding-left: 48px;
      background-image: url(../img/jd-gwc.png);
      background-size: 22px;
      background-repeat: no-repeat;
      background-position: 15px;
      border: 1px solid rgb(224, 194, 194);
  }
  
  .box3 a {
      /* display: inline-block; */
      font-size: 12px;
      margin-left: 10px;
      line-height: 40px;
      color: red;
  }
  
  .box3 span {
      position: absolute;
      top: 0;
      left: 30px;
      width: 15px;
      height: 15px;
      font-size: 12px;
      color: #fff;
      text-align: center;
      background-color: red;
      border-radius: 8px;
  }
  /* 固定定位 */
  
  .right {
      position: fixed;
      width: 60px;
      height: 420px;
      top: 200px;
      right: 60px;
  }
  
  .right>ul :not(:last-child) {
      border-bottom: 1px solid rgb(212, 199, 199);
  }
  
  li {
      position: relative;
      /* 超出部分隐藏 */
      overflow: hidden;
      width: 60px;
      height: 60px;
  }
  
  li span {
      display: inline-block;
      width: 45px;
      padding: 5px;
      text-align: center;
  }
  
  li span:hover {
      color: #fff;
      background-color: red;
  }
  /* .bg {
      width: 20px;
      width: 20px;
      padding-top: 30px;
      background-size: 20px;
      background-position: 20px 10px;
      background-repeat: no-repeat;
  } */
  
  .li5,
  .li6,
  .li7 {
      background-repeat: no-repeat;
      background-size: 20px 20px;
      padding-top: 30px;
      background-position: top center;
      margin-top: 10px;
  }
  
  .li5 {
      background-image: url(../img/jd-kefu1.png);
  }
  
  .li6 {
      background-image: url(../img/jd-fankui.png);
  }
  
  .li7 {
      background-image: url(../img/jttop.png);
      color: red;
  }
  
  .ms {
      width: 500px;
      height: 300px;
      background-color: aqua;
      margin-top: 500px;
  }
   </style>
    </head>

   <body>

       <div class="container">
  <div class="box1">
      <img src="../img/kyrie1.png" alt="" class="logo1">
  </div>
  <div class="form">

      <input type="text" name="" id="" placeholder="搜索">
      <!-- <div class="img1">
          <img src="../img/jd-xj.png" alt="" class="img1">
      </div> -->
      <div class="button"></div>
  </div>
  <div class="box3">
      <a href="">我的购物车</a>

      <span>0</span>

  </div>
    </div>

    <div class="ms">
  秒杀
    </div>
   </body>
     let ms = document.querySelector('.ms')
        let head = document.querySelector('.container')
  // 页面滚动事件
   window.addEventListener('scroll', function() {
  // 页面滚动的距离
  if (document.documentElement.scrollTop >= ms.offsetTop) {
      head.style.top = '0'
  } else {
      head.style.top = '-80px'

  }
     })
</script>

  </html>

电梯导航案例

分析：

1.点击当前小导航，添加active其余移除active

2.得到对用内容的offTop值

3.让页面的scrollTop走到对应内容的offsetTop

     <script>
let lis = document.querySelectorAll('li')
let nerrs = document.querySelectorAll('.content')
    // 点击谁谁高亮
for (let i = 0; i < lis[i].length; i++) {
    lis[i].addEventListener('click', function() {
        alert(111)
            // 找到以前的active类 移除
        document.querySelector('ul .active').classList.remove('active')
        this.classList.add('active')
        document.documentElement.scrollTop = nerrs[i].offsetTop
    })
}
  </script>
  • client家族

1.获取宽高

获取元素的可见部分宽高（不包含边框，滚动条等）

     clientWidth和clientHeight

当窗口变化的时候触发的事件

window.addEventListener('resize', function() {
 let i= document.documentElement. clientWidth
}

2.获取位置

获取左边框和上边框宽度

   clientLeft和clientTop（只读）

三个家族offset家族比较常用

avatar
文章
阅读
粉丝