webapi，电梯导航，小火箭，仿京东固定头部，轮播图

A
213 阅读4分钟
  1. 电梯导航案例： 实现要求
  • 当点击左边导航条的时候，右边出现对应的内容并且显示在整个页面的最顶部
  • 分析： ①：用到页面滚动事件 ②：检测页面滚动大于等于100像素，则显示按钮 ③：点击按钮，则让页面的scrollTop 重置为 0
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        height: 3000px;
      }
      .aside {
        position: fixed;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
      .item {
        height: 40px;
        line-height: 40px;
        text-align: center;
        padding: 0 10px;
        cursor: pointer;
      }
      .active {
        background-color: red;
        color: #fff;
      }
      .content {
        width: 660px;
        margin: 400px auto;
      }
      .neirong {
        height: 300px;
        margin-bottom: 20px;
        color: #fff;
      }
      .content1 {
        background-color: red;
      }
      .content2 {
        background-color: blue;
      }
      .content3 {
        background-color: orange;
      }
      .content4 {
        background-color: yellowgreen;
      }
    </style>
  </head>

  <body>
    <div class="aside">
      <div class="item active">男装/女装</div>
      <div class="item">儿童服装/游乐园</div>
      <div class="item">电子产品</div>
      <div class="item">电影/美食</div>
    </div>

    <div class="content">
      <div class="neirong content1">男装/女装</div>
      <div class="neirong content2">儿童服装/游乐园</div>
      <div class="neirong content3">电子产品</div>
      <div class="neirong content4">电影/美食</div>
    </div>

    <script>
      window.addEventListener('load', function() {
        let items = document.querySelectorAll('.item')
        let neirongs = document.querySelectorAll('.neirong')

        // 为左侧导航项绑定事件--伪数组需要遍历
        items.forEach(function(ele, index) {
          ele.addEventListener('click', function() {
            document.querySelector('.item.active').classList.remove('active')
            ele.classList.add('active')

            // 获取与这个导航项对应的内容面板
            let current = neirongs[index]
            // 让页面滚动当前对应的内容面板离顶部的距离
            document.documentElement.scrollTop = current.offsetTop
          })
        })
      })
    </script>
  </body>
</html>
  1. 小火箭 实现要求：：当页面滚动500像素，就显示返回顶部按钮，否则隐藏， 同时点击按钮，则返回顶部
  • 当页面滚动500像素，就显示返回顶部按钮，否则隐藏， 同时点击按钮，则返回顶部
  • 分析： ①：用到页面滚动事件 ②：检测页面滚动大于等于100像素，则显示按钮 ③：点击按钮，则让页面的scrollTop 重置为 0
   <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      body {
        height: 8000px;
        background-image: linear-gradient(red, blue);
      }
      a {
        color: #fff;
      }
      .actGotop {
        position: fixed;
        bottom: 50px;
        right: 50px;
        width: 150px;
        height: 195px;
        display: none;
        z-index: 100;
      }
      .actGotop a,
      .actGotop a:link {
        width: 150px;
        height: 195px;
        display: inline-block;
        background: url(images/gotop.png) no-repeat;
        outline: none;
      }
      .actGotop a:hover {
        width: 150px;
        height: 195px;
        background: url(images/gotop.gif) no-repeat;
        outline: none;
      }
    </style>
  </head>
  <body>
    <!-- 返回顶部小火箭 -->
    <div class="actGotop"><a href="javascript:;" title="Top"></a></div>

    <!-- 需求：
    1.垂直方向滚动出屏幕的距离超过3000的时候，出现小火箭
    2.单击小火箭能够返回到顶部 -->
    <script>
      window.addEventListener('load', function() {
        // 获取元素
        let actGotop = document.querySelector('.actGotop')
        let count = 3000
        // 添加页面滚动的监听
        window.addEventListener('scroll', function() {
          console.log(1)

          // 获取垂直方向页面滚动出屏幕的距离
          let offset = document.documentElement.scrollTop
          // 判断是否超出指定的范围
          if (offset >= count) {
            actGotop.style.display = 'block'
          } else {
            actGotop.style.display = 'none'
          }
        })

        // 为小火箭添加单击事件
        actGotop.addEventListener('click', function() {
          document.documentElement.scrollTop = 0
          // let dis = count
          // // 让页面滚动回顶部
          // let tid = setInterval(function() {
          //   dis -= 80
          //   document.documentElement.scrollTop = dis
          //   if (dis <= 0) {
          //     clearInterval(tid)
          //     actGotop.style.display = 'none'
          //   }
          // }, 5)
        })
      })
    </script>
  </body>
</html>
  1. 仿京东固定头部

  • 实现要求：当页面滚动到秒杀模块，导航栏自动滑入，否则滑出

  • 分析： ①：用到页面滚动事件 ②：检测页面滚动大于等于 秒杀模块的位置 则滑入，否则滑出

   <!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;
        box-sizing: border-box;
      }

      .content {
        overflow: hidden;
        width: 1000px;
        height: 3000px;
        background-color: pink;
        margin: 0 auto;
      }

      .backtop {
        display: none;
        width: 50px;
        left: 50%;
        margin: 0 0 0 505px;
        position: fixed;
        bottom: 60px;
        z-index: 100;
      }

      .backtop a {
        height: 50px;
        width: 50px;
        background: url(./images/bg2.png) 0 -600px no-repeat;
        opacity: 0.35;
        overflow: hidden;
        display: block;
        text-indent: -999em;
        cursor: pointer;
      }

      .header {
        position: fixed;
        top: -80px;
        left: 0;
        width: 100%;
        height: 80px;
        background-color: purple;
        text-align: center;
        color: #fff;
        line-height: 80px;
        font-size: 30px;
        transition: all 0.3s;
      }

      .sk {
        width: 300px;
        height: 300px;
        background-color: skyblue;
        margin-top: 600px;
      }
    </style>
  </head>

  <body>
    <div class="header">我是顶部导航栏</div>
    <div class="content">
      <div class="sk">秒杀模块</div>
    </div>
    <div class="backtop">
      <img src="./images/close2.png" alt="" />
      <a href="javascript:;"></a>
    </div>

    <script>
      window.addEventListener('load', function() {
        // 1.获取元素
        let sk = document.querySelector('.sk')
        // 获取当前元素离文档的顶部的距离
        let skOffsetTop = sk.offsetTop
        let header = document.querySelector('.header')

        // 2.添加页面滚动的监听
        window.addEventListener('scroll', function() {
          // 3.获取当前页面垂直方向滚动出屏幕的距离
          let offset = document.documentElement.scrollTop
          // 4.判断滚动出的距离和skOffsetTop的大小，如果大于等于则让header出现(样式操作),否则隐藏
          if (offset >= skOffsetTop) {
            header.style.top = 0
          } else {
            header.style.top = '-80px'
          }
        })
      })
    </script>
  </body>
</html>
  1. 轮播图
  • 分析1： 需求①：小图标鼠标经过事件 鼠标经过小图片，当前高亮，其余兄弟变淡 添加类

需求② ：大图片跟随变化 对应的大图片跟着显示，如果想要过渡效果，可以使用opacity效果，可以利用CSS淡入 淡出的效果，还是添加类

需求③：右侧按钮播放效果 点击右侧按钮，可以自动播放下一张图片 需要一个变化量 index 不断自增 然后播放下一张图片 如果到了最后一张，必须要还原为第1张图片

需求④：解决一个BUG 点击右侧按钮可以实现播放下一张，但是鼠标经过前面的，播放就会乱序 解决方案： 让变化量（索引号） 重新赋值为 当前鼠标经过的索引号

需求⑤：左侧按钮播放效果 点击左侧按钮，可以自动播放上一张图片 需要一个变化量 index 不断自减 然后播放上一张图片 如果到了第一张，必须要从最后一张播放

需求⑥：开启定时器 其实定时器自动播放，就相当于点击了右侧按钮，此时只需要， right.click()

需求⑦： 鼠标经过停止定时器 （清除定时器） 鼠标离开开启定时器 （开启定时器）

  • html页面代码
   <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>QQ音乐轮播图</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      li {
        list-style: none;
      }

      .main {
        width: 700px;
        margin: auto;
        background: #000;
      }

      .slides {
        height: 320px;
        position: relative;
      }

      .slides ul li {
        /* display: none; */
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        /* 这里实现淡入淡出的关键 */
        transition: all 0.3s;
      }

      .slides li.active {
        /* display: block; */
        opacity: 1;
      }

      .slides .extra {
        width: 700px;
        height: 53px;
        line-height: 53px;
        position: absolute;
        bottom: 0px;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 10;
      }

      .slides .extra h3 {
        width: 82%;
        margin: 0;
        margin-right: 20px;
        padding-left: 20px;
        color: #98e404;
        font-size: 28px;
        float: left;
        font-weight: 500;
        font-family: 'Microsoft Yahei', Tahoma, Geneva;
      }

      .slides .extra a {
        width: 30px;
        height: 29px;
        display: block;
        float: left;
        margin-top: 12px;
        margin-right: 3px;
        background-image: url(./assets/icon_focus_switch.png);
      }

      .slides .extra .prev {
        background-position: 0 0;
      }

      .slides .extra .prev:hover {
        background-position: -30px 0;
      }

      .slides .extra .next {
        background-position: -60px 0;
      }

      .slides .extra .next:hover {
        background-position: -90px 0;
      }

      .indicator {
        padding: 10px 0;
      }

      .indicator ul {
        list-style-type: none;
        margin: 0 0 0 4px;
        padding: 0;
        overflow: hidden;
      }

      .indicator ul li {
        position: relative;
        float: left;
        width: 60px;
        margin: 0 4px 0 5px;
        text-align: center;

        cursor: pointer;
      }

      .indicator li img {
        display: block;
        border: 0;
        text-align: center;
        width: 60px;
      }

      .indicator li .mask {
        width: 60px;
        height: 60px;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.4);
      }

      .indicator li .border {
        display: none;
        width: 54px;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 20;
        border: 3px solid #98e404;
      }

      /* li里面的mask 和 border 刚开始都是显示的 */
      /* 我们写一个样式css */
      .indicator .active .mask {
        display: none;
      }

      .indicator .active .border {
        display: block;
      }
    </style>
  </head>

  <body>
    <div class="main">
      <div class="slides">
        <ul>
          <li class="active">
            <a href="#"
              ><img src="./assets/b_01.jpg" alt="第1张图的描述信息"
            /></a>
          </li>
          <li>
            <a href="#"
              ><img src="./assets/b_02.jpg" alt="第2张图的描述信息"
            /></a>
          </li>
          <li>
            <a href="#"
              ><img src="./assets/b_03.jpg" alt="第3张图的描述信息"
            /></a>
          </li>
          <li>
            <a href="#"
              ><img src="./assets/b_04.jpg" alt="第4张图的描述信息"
            /></a>
          </li>
          <li>
            <a href="#"
              ><img src="./assets/b_05.jpg" alt="第5张图的描述信息"
            /></a>
          </li>
          <li>
            <a href="#"
              ><img src="./assets/b_06.jpg" alt="第6张图的描述信息"
            /></a>
          </li>
          <li>
            <a href="#"
              ><img src="./assets/b_07.jpg" alt="第7张图的描述信息"
            /></a>
          </li>
          <li>
            <a href="#"
              ><img src="./assets/b_08.jpg" alt="第8张图的描述信息"
            /></a>
          </li>
          <li>
            <a href="#"
              ><img src="./assets/b_09.jpg" alt="第9张图的描述信息"
            /></a>
          </li>
          <li>
            <a href="#"
              ><img src="./assets/b_10.jpg" alt="第9张图的描述信息"
            /></a>
          </li>
        </ul>

        <div class="extra">
          <h3>第1张图的描述信息</h3>
          <a class="prev" href="javascript:;"></a>
          <a class="next" href="javascript:;"></a>
        </div>
      </div>
      <div class="indicator">
        <ul>
          <li class="active">
            <img src="assets/s_01.jpg" />
            <span class="mask"></span>
            <span class="border"></span>
          </li>
          <li>
            <img src="assets/s_02.jpg" />
            <span class="mask"></span>
            <span class="border"></span>
          </li>
          <li>
            <img src="assets/s_03.jpg" />
            <span class="mask"></span>
            <span class="border"></span>
          </li>
          <li>
            <img src="assets/s_04.jpg" />
            <span class="mask"></span>
            <span class="border"></span>
          </li>
          <li>
            <img src="assets/s_05.jpg" />
            <span class="mask"></span>
            <span class="border"></span>
          </li>
          <li>
            <img src="assets/s_06.jpg" />
            <span class="mask"></span>
            <span class="border"></span>
          </li>
          <li>
            <img src="assets/s_07.jpg" />
            <span class="mask"></span>
            <span class="border"></span>
          </li>
          <li>
            <img src="assets/s_08.jpg" />
            <span class="mask"></span>
            <span class="border"></span>
          </li>
          <li>
            <img src="assets/s_09.jpg" />
            <span class="mask"></span>
            <span class="border"></span>
          </li>
          <li>
            <img src="assets/s_10.jpg" />
            <span class="mask"></span>
            <span class="border"></span>
          </li>
        </ul>
      </div>
    </div>
    <!-- 引入页面js -->
    <script src="./js/index.js"></script>
  </body>
</html>
  • js代码
   window.addEventListener('load', function() {
  // 获取元素
  // - 缩略图--标记，我们要为其添加单击事件
  let indicators = document.querySelectorAll('.indicator li')
  // - 文本描述信息：单击之后要修改文字描述信息
  let desc = document.querySelector('.extra > h3')
  // - 大图：单击之后要切换大图的显示
  let slides = document.querySelectorAll('.slides li')
  // 下一张按钮
  let next = document.querySelector('.extra > .next')
  // 上一张按钮
  let prev = document.querySelector('.extra > .prev')
  // 获取整个轮播图区域
  let main = document.querySelector('.main')
  // 当前图片的索引
  let index = 0

  // 为缩略图绑定单击事件：由于获取到的是伪数组，所以需要遍历，为每一个元素绑定事件
  indicators.forEach(function(ele, i) {
    // 绑定事件
    ele.addEventListener('click', function() {
      // 1.让当前被单击的缩略图，添加高亮样式--样式类名操作
      // 1.1 找到缩略图中有active样式的元素，将其active样式移除
      document.querySelector('.indicator .active').classList.remove('active')
      // 为当前被单击的缩略图元素添加active样式
      ele.classList.add('active')

      // 2.修改文本描述信息
      desc.innerText = `第${i + 1}张图的描述信息`

      // 3.显示对应的大图
      // 3.1 之前有active样式的大图元素，移除active样式
      document.querySelector('.slides .active').classList.remove('active')
      // 3.2 为对应索引位置的大图添加active样式
      slides[i].classList.add('active')

      // 3.3 重置全局的索引
      index = i
    })
  })

  // 下一张
  next.addEventListener('click', function() {
    // 让索引+1
    index++
    // 判断索引是否越界
    if (index > indicators.length - 1) {
      index = 0
    }
    // 调用索引位置的li元素的click单击事件
    indicators[index].click()
  })

  // 上一张
  prev.addEventListener('click', function() {
    index--
    // 判断索引是否越界
    if (index < 0) {
      index = indicators.length - 1
    }
    // 调用索引位置的li元素的click单击事件
    indicators[index].click()
  })

  // 自动轮播
  // 自动轮播的本质是手动轮播，实现方式就是在定时器间隔指定的时间，调用  “下一张” 按钮的单击事件
  let timeId = setInterval(function() {
    next.click()
  }, 1000)

  // 鼠标进入到轮播图区域，停止定时器
  main.addEventListener('mouseenter', function() {
    clearInterval(timeId)
  })
  // 鼠标移出之后，重新开启定时器
  main.addEventListener('mouseleave', function() {
    timeId = setInterval(function() {
      next.click()
    }, 1000)
  })
})
avatar
文章
阅读
粉丝