WebApi-05 (三大家族及轮播图案例分享)

最新推荐文章于 2024-07-26 11:41:15 发布

A-sleep

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量463

点赞数 2

分类专栏： WebApis JavaScript 基础篇文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/FellAsleep/article/details/122003553

版权

JavaScript 基础篇同时被 2 个专栏收录

14 篇文章 2 订阅

订阅专栏

WebApis

8 篇文章 0 订阅

订阅专栏

1. 三大家族:offset家族 scroll家族 client家族

  /* 
    1. offset家族 : 获取元素 ‘自身’ 真实宽高与位置
      offsetWidth/offsetHeight :  真实宽高 = content + padding*2 + border*2
      offsetLeft/offsetTop : 自身左/上 外边框 到定位父元素 左/上 内边框距离

    2. scroll家族 :  获取元素 ‘内容’ 真实宽高与位置
      scrollWidth/scrollHeight :  内容真实宽高
      scrollLeft/scrollTop : 滚动条滚动左/上边的距离

    3.client家族 : 获取元素 ‘可视区域’ 真实宽高与位置
      clientWidth/clientHeight :  获取可视区域宽高
      clientLeft/clientTop : 获取可视区域位置 （其实就是左边框 与 上边框宽度）

    4.三大家族特点
      (1)获取的都是number类型数字
      (2)只能获取，不能修改
        * scrollLeft/Top可以修改滚动条位置
    */

     <div class="father">
      <div class="box">
        我有很多很多的内容哦 我有很多很多的内容哦 我有很多很多的内容哦
        我有很多很多的内容哦 我有很多很多的内容哦 我有很多很多的内容哦
        我有很多很多的内容哦 我有很多很多的内容哦 我有很多很多的内容哦
        我有很多很多的内容哦 我有很多很多的内容哦 我有很多很多的内容哦
        我有很多很多的内容哦 我有很多很多的内容哦  
      </div>
    </div>
 <script>
      let box = document.querySelector('.box')

      //1.offset家族 : 获取元素 ‘自身’ 真实宽高与位置
      console.log(box.offsetWidth, box.offsetHeight) //190 190
      //如果父元素有定位，就是参考父元素的内边框。 如果父元素没有定位，就是参考body边框
      console.log(box.offsetLeft, box.offsetTop) //110 110

      //2. scroll家族 :  获取元素 ‘内容’ 真实宽高与位置
      console.log(box.scrollWidth, box.scrollHeight)//153 398
      console.log(box.scrollLeft, box.scrollTop )// 0 0

      //3. client家族 : 获取元素 ‘可视区域’ 真实宽高与位置
      console.log( box.clientWidth,box.clientHeight )//153 170
      console.log( box.clientLeft,box.clientTop )//10 10
  </script>

2 .网页注册滚动条事件 : window.onscroll

	1.网页注册滚动条事件 : window.onscroll
    2.获取网页滚动条距离 : 获取html标签scrollLeft / scrollTop

  <style>
      body {
        width: 3000px;
        height: 3000px;
      }
    </style>
  </head>
  <body>
    <script>
      /* 学习目标： 获取网页滚动距离
        1.网页注册滚动条事件 : window.onscroll
        2.获取网页滚动条距离 : 获取html标签scrollLeft / scrollTop
       */

      //1. 网页注册滚动条事件 : window.onscroll
      window.onscroll = function () {
        console.log('滚动条滚动了')
        //2.获取网页滚动条距离
        console.log(
          document.documentElement.scrollLeft,
          document.documentElement.scrollTop
        )
      }
    </script>

3.scroll 家族案例:

在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        img {
            vertical-align: top;
        }

        .main {
            margin: 0 auto;
            width: 1000px;
            margin-top: 10px;
        }

        .fixed {
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>

<div class="top" id="topPart">
    <img id="pic" src="images/top.png" alt=""/>
</div>

<div class="nav" id="navBar">
    <img src="images/nav.png" alt=""/>
</div>

<div class="main" id="mainPart">
    <img src="images/main.png" alt=""/>
</div>

<script>
   /* 需求： 页面滚动到  topPart的高度， 设置导航栏navBar固定定位 */

   //1.获取元素
   let topPart = document.querySelector('#topPart')
   let navBar = document.querySelector('#navBar')
   let mainPart = document.querySelector('#mainPart')

   //2.页面滚动条事件
   window.onscroll = function(){
       //3.事件处理： 判断滚动条scrollTop位置有没有超过 topPart高度
       if( document.documentElement.scrollTop >= topPart.offsetHeight ){
           //设置导航栏固定定位
           navBar.style.position = 'fixed'
           navBar.style.top = '0px'
           /* 注意点：元素设置固定定位之后，会脱标。导致后面元素瞬间顶上去，造成顿闪现象
                解决方案： 设置下面元素的margin,把脱标的高度撑开
           */
          mainPart.style.marginTop = navBar.offsetHeight + 10 + 'px'
       }else{
           //设置导航栏为标准流(静态定位)
           navBar.style.position = 'static'
           //取消固定定位之后，margin也要恢复
           mainPart.style.marginTop = '10px'
       }
   }
</script>
</body>
</html>

4.client家族案例:响应式布局/横屏竖屏

在这里插入图片描述

  /* 
    1.响应式布局 ： 一个页面适配多个不同的设备
        大PC     >1200px      红色
        小PC     992-1200     橙色
        平板      768-992     黄色
        手机      <768        绿色
    2.响应式布局原理 ： 根据设备尺寸的不同，加载不同的样式
    3.响应式布局流程
        (1) 给页面注册一个尺寸变化事件(视口变化) ： window.onresize
        (2) 获取页面可视区域大小（视口大小） ： document.documentElement.clientWidth
    
    */

<!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>
  </head>

  <body>
    <script>
      //(1) 给页面注册一个尺寸变化事件(视口变化) ： window.onresize
      window.onresize = function () {
        console.log('页面大小变化')
        //(2)获取可视区域大小： 视口大小
        console.log(
          document.documentElement.clientWidth,
          document.documentElement.clientHeight
        )
        let cw = document.documentElement.clientWidth
        let ch = document.documentElement.clientHeight
        /* 响应式布局原理：根据设备不同加载不同的样式 */
        if( cw > 1200 ){
            document.body.style.backgroundColor = 'red'
        }else if( cw > 992 ){//隐藏条件 cw<=1200
            document.body.style.backgroundColor = 'orange'
        }else if( cw > 768 ){//隐藏条件 cw<=992
            document.body.style.backgroundColor = 'yellow'
        }else{//隐藏条件 cw<=768
            document.body.style.backgroundColor = 'green'
        }

        /* 横竖屏适配   竖屏： 宽度<高度  横屏: 宽度>高度 */
        if( cw < ch ){
            alert('竖屏')
        }else{
            alert('横屏')
        }
      }
    </script>
  </body>
</html>

5.案例分享:电梯导航

在这里插入图片描述

<!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>
      /* 思路分析
      1.点击侧边栏按钮
        (1)排他思想修改自身样式
        (2)页面滚动到右侧对应下标的盒子位置
          * a.盒子位置 ： offsetTop
          * b.页面滚动 :  document.documentElement.scrollTop
      */

      //1.获取元素
      let asideList = document.querySelectorAll('.aside>div') //侧边栏列表
      let contentList = document.querySelectorAll('.content>div') //右侧内容列表

      //2.注册事件
      for (let i = 0; i < asideList.length; i++) {
        asideList[i].onclick = function () {
          //3.事件处理
          //3.1 排他思想修改自身样式（升级版：classList）
          //(1)先找出唯一选中的那个类
          document.querySelector('.item.active').classList.remove('active')
          //(2)给当前点击的添加类
          this.classList.add('active')
          //3.2 页面滚动到右侧对应下标的盒子位置 (三大家族没有单位的，直接写数字)
          // 网页对应的部分滚动  滚动的距离 = 内容到顶部的距离 赋值给滚动的距离
          document.documentElement.scrollTop = contentList[i].offsetTop
        }
      }

   // 1.注册窗口滚动事件
    window.onscroll = function () {
      for (let i = 0; i < neirong.length; i++) {
        // 2.如果每个内容的上方外边距距离屏幕的高度 大于 html内容滚动的距离 
        // 也可以修改offsetTop+对应的值 调整内容在屏幕中心显示的地方
        if (neirong[i].offsetTop + 150 >= document.documentElement.scrollTop) {
          //4.排他思想 去掉别人的li
          document.querySelector('.item.active').classList.remove('active')
          //3.为对应的li增加样式
          item[i].classList.add('active')
          // 5.这里必须需要break
          break;
        }
      }
    }

    </script>
  </body>
</html>

6.案例分享:手风琴

在这里插入图片描述

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>手风琴</title>
    <style>
      ul {
        list-style: none;
      }

      * {
        margin: 0;
        padding: 0;
      }

      div {
        width: 1200px;
        height: 400px;
        margin: 50px auto;
        border: 1px solid red;
        overflow: hidden;
      }

      div li {
        width: 240px;
        height: 400px;
        float: left;
        transition: all 500ms;
      }

      div ul {
        width: 1200px;
      }
    </style>
  </head>

  <body>
    <div id="box">
      <ul>
        <li>
          <a href="#">
            <img src="./images/1.jpg" alt="" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/2.jpg" alt="" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/3.jpg" alt="" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/4.jpg" alt="" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/5.jpg" alt="" />
          </a>
        </li>
      </ul>
    </div>
  </body>
  <script>
    /* 思路分析
    1.鼠标移入每一个li元素：  排他思想修改宽度： 我自己800px，其他人100px
    2.鼠标移出父盒子box : 所有li元素宽度变成240px
     */

    //1.获取元素
    let liList = document.querySelectorAll('#box li')
    let box = document.querySelector('#box')

    //2.注册事件
    //2.1 鼠标移入
    for (let i = 0; i < liList.length; i++) {
      liList[i].onmouseenter = function () {
        //3.排他思想修改宽度： 我自己800px，其他人100px
        for (let j = 0; j < liList.length; j++) {
          if (i === j) {
            liList[j].style.width = '800px'
          } else {
            liList[j].style.width = '100px'
          }
        }
      }
    }

    //2.2 鼠标移出父盒子
    box.onmouseleave = function () {
      //3.设置每一个li元素宽度240
      for (let i = 0; i < liList.length; i++) {
        liList[i].style.width = '240px'
      }
    }
  </script>
</html>

7.案例分享:轮播图

在这里插入图片描述

<!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>
  <script>
    /*思路分析 
    ***** 图片切换核心思路，全局变量index存储当前图片下标
    1.鼠标移入小图标 ： 
      排他思想： (1)自身添加类active，其他兄弟移除类active
                (2)对应下标轮播图添加类active，其他兄弟移除类active
    2.鼠标点击上一页下一页 ：
      2.1 上一页 index--，排他思想
      2.2 下一页 index++，排他思想
    3.自动轮播
    */

    //1.获取元素
    let indicatorList = document.querySelectorAll('.indicator li') //小图标列表
    let slideList = document.querySelectorAll('.slides li') //轮播图列表
    let prev = document.querySelector('.prev') //上一页
    let next = document.querySelector('.next') //下一页
    let h3 = document.querySelector('.extra>h3') //图片标题
    let main = document.querySelector('.main') //整个父盒子

    /* 图片切换核心思路 ： 声明全局变量记录当前图片下标  */
    let index = 0

    /* 封装一个排他思想函数 */
    function paita(index) {
      //(1)先找出上一次选中的类移除
      document
        .querySelector('.indicator li.active')
        .classList.remove('active')
      document.querySelector('.slides li.active').classList.remove('active')
      //(2)给自己添加类
      indicatorList[index].classList.add('active')
      slideList[index].classList.add('active')

      //(3) 修改标题文本
      h3.innerHTML = `第${index + 1}张描述信息`
    }

    //2.注册事件

    //2.1 小图标移入事件
    for (let i = 0; i < indicatorList.length; i++) {
      indicatorList[i].onmouseenter = function () {
        //3.1 排他思想修改样式（升级版）
        paita(i)

        //3.3 存储本次移入的下标
        /* 切记：如果没有这个步骤。 我们的index永远都是0 。 那么我们点击上一页下一页就不会从本次移入的这张开始。 而是从0开始。 */
        index = i
        console.log(index)
      }
    }

    //2.2 下一页点击
    next.onclick = function () {
      //3.1 如果是最后一张，则下标从0开始。 否则 index++
      if (index == slideList.length - 1) {
        index = 0
      } else {
        index++
      }
      //3.2 排他思想修改样式
      paita(index)
    }

    //2.3 上一页点击
    prev.onclick = function () {
      //3.1 如果是第一张，则从最后一张开始。否则index--
      if (index == 0) {
        index = slideList.length - 1
      } else {
        index--
      }
      //3.2 排他思想修改样式
      paita(index)
    }

    /* 3.自动轮播思路
    3.1 页面一加载，开启定时器。每过3s自动执行下一页点击事件代码
    3.2 鼠标移入main盒子 ： 停止自动轮播 （清除定时器）
    3.2 鼠标移出main盒子 ： 开启自动轮播 （开启定时器）
    */

    //3.1 页面一加载，开启定时器。每过3s自动执行下一页点击事件代码
    let timeID = setInterval(function () {
      //主动触发事件处理函数
      next.onclick()
    }, 1000)

    //3.2 鼠标移入main盒子 ： 停止自动轮播 （清除定时器
    main.onmouseenter = function () {
      clearInterval(timeID)
    }

    //3.3 鼠标移出main盒子 ： 开启自动轮播 （开启定时器）
    main.onmouseleave = function () {
      /* 注意点：这里的timeID千万不要加let
      不加let : 本质还是访问全局timeID (移入还是移出，都是访问同一个定时器id)
      加let   : 这里的timeID就从全局变量 变成了 局部变量。 出了这个函数，不能访问。导致这个定时器无法被清除。
      */
      timeID = setInterval(function () {
        //主动触发事件处理函数
        next.onclick()
      }, 1000)
    }
  </script>
</body>

</html>

8.案例练习分享:淘宝购物

在这里插入图片描述

<!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>
        #wrap {
            width: 1072px;
            height: 400px;
            margin: 50px auto;
        }

        #wrap img {
            float: left;
            border: 1px solid black;
            margin-right: 20px;
        }

        #top {
            float: left;
            width: 600px;
            height: 220px;
            border-bottom: 1px solid #bbb;
            font-family: 'Microsoft yahei';
        }

        #top p span {
            font-size: 14px;
            color: #666;
            border: 1px solid #999;
            display: inline-block;
            padding: 8px;
            cursor: pointer;
        }

        #top p span.on {
            border: 2px solid #f60;
            padding: 7px;
            background: url(images/on.png) no-repeat right bottom;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <img src="images/black.jpg" alt="">
        <div id="top">
            <p id="color">
                <label class="">颜色</label>
                <span class="on">黑色</span>
                <span class="">白色</span>
                <span class="">红色</span>
                <span class="">黄色</span>
                <span class="">紫色</span>
                <span class="">绿色</span>
            </p>
            <p id="rom">
                <label class="">内存</label>
                <span class="on">64GB</span>
                <span class="">128GB</span>
                <span class="">256GB</span>
            </p>
            <p id="banben">
                <label>版本</label>
                <span class="on">全网通</span>
                <span>移动版</span>
                <span>联通版</span>
                <span>电信版</span>
            </p>
        </div>
        <div id="bottom">
            <p>价格： <label>￥ <span id="price">6888</span>.00</label>
                <button>立即购买</button>
        </div>
    </div>
    <script>

        let imgArr = [
            'images/black.jpg',
            'images/white.jpg',
            'images/red.jpg',
            'images/yellow.jpg',
            'images/purple.jpg',
            'images/green.jpg'
        ];

        // 1.获取元素
        let colorList = document.querySelectorAll('#color>span')//颜色
        let romList = document.querySelectorAll('#rom>span')//内存
        let banbenList = document.querySelectorAll('#banben>span')//版本

        // 2.事件注册
        for (let i = 0; i < colorList.length; i++) {
            // 点击颜色
            colorList[i].onclick = function () {
                //3.1 事件处理 1.干掉被人选的兄弟 2.勾选自己
                document.querySelector('#color>span.on').classList.remove('on')
                this.classList.add('on')
                //3.2 切换背景图  获取 img的src  =  将存储的imgArr的i 赋值
                document.querySelector('#wrap>img').src = imgArr[i]
            }
        }
        // 2.事件注册
        for (let i = 0; i < romList.length; i++) {
            // 点击每一个内存
            romList[i].onclick = function () {
                // 3.事件处理  有默认样式---狙击排他思想 1.移除兄弟样式
                document.querySelector('#rom>span.on').classList.remove('on')
                this.classList.add('on')
            }
        }
        // 2.事件注册

        for (let i = 0; i < banbenList.length; i++) {
            //点击每一个版本
            banbenList[i].onclick = function () {
                // 排他思想
                document.querySelector('#banben>span.on').classList.remove('on')
                this.classList.add('on')
            }
        }
    </script>

</body>

</html>

9.案例练习分享:tab栏切换

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>tab栏切换</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .box {
      width: 400px;
      height: 300px;
      border: 1px solid #ccc;
      margin: 100px auto;
    }

    .hd {
      height: 45px;
    }

    .hd span {
      display: inline-block;
      /*将行内元素转换成行内块元素，宽高才起作用*/
      width: 90px;
      background-color: pink;
      line-height: 45px;
      text-align: center;
      cursor: pointer;
    }

    .hd span.current {
      /*交集选择器，标签指定式选择器*/
      background-color: purple;
      /*紫色*/
    }

    .bd li {
      height: 255px;
      background-color: purple;
      display: none;
      /*设置隐藏*/
    }

    .bd li.current {
      display: block;
      /*显示*/
    }
  </style>
</head>

<body>
  <div class="box" id="box">
    <div class="hd">
      <span class="current">体育</span>
      <span>娱乐</span>
      <span>新闻</span>
      <span>综合</span>
    </div>
    <div class="bd">
      <ul id="list">
        <li class="current">我是体育模块</li>
        <li>我的娱乐模块</li>
        <li id="li3">我是新闻模块</li>
        <li>我是综合模块</li>
      </ul>
    </div>
  </div>
  <script>
    // 1.获取元素
    let hdList = document.querySelectorAll('.hd>span')
    console.log(hdList);
    // 2.循环事件注册
    for (let i = 0; i < hdList.length; i++) {
      // 注册鼠标移入
      hdList[i].onmouseenter = function () {
        // 排他思想 1. 通过属性选择器 移除兄弟样式
        document.querySelector('.hd span.current').classList.remove('current')
        // 2.为自己添加
        this.classList.add('current')

        // 2.1. 通过属性选择器 移除li的样式
        document.querySelector('#list li.current').classList.remove('current')
        // ALL 选择所有的li 取当前的下标(i)  添加样式
        document.querySelectorAll('#list li')[i].classList.add('current')
      }
    }
  </script>

</body>

</html>

10.案例:京东商品展示

在这里插入图片描述

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
            padding-top: 15px;
        }

        .box {
            width: 350px;
            height: 420px;
            border: 1px solid #000;
            margin: 100px auto;
        }

        li {
            float: left;
            width: 20%;
            text-align: center;
        }

        img:hover {
            outline: 3px solid #0094ff;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>
            <img src="images/b1.jpg" id="big" alt="" />
        </div>
        <div>
            <ul id="ul">
                <!--data-src是自定义属性，存放对应大图的src-->
                <li data-src="images/b1.jpg"><img src="images/s1.jpg" alt="" /></li>
                <li data-src="images/b2.jpg"><img src="images/s2.jpg" alt="" /></li>
                <li data-src="images/b3.jpg"><img src="images/s3.jpg" alt="" /></li>
                <li data-src="images/b4.jpg"><img src="images/s4.jpg" alt="" /></li>
                <li data-src="images/b5.jpg"><img src="images/s5.jpg" alt="" /></li>
            </ul>
        </div>
    </div>

    <script>

        // 1.获取元素
        let big = document.querySelector('#big')//大图片

        let LiList = document.querySelectorAll('li')

        // 2.循环事件注册
        for (let i = 0; i < LiList.length; i++) {
            // 3.点击每个li的时候 box 里面的图片对应相应的li
            LiList[i].onclick = function () {
                // attribute 语法作用: 操作元素自定义属性
                /*  
                 attitude语法:
                 存储:   元素.setAttribute('属性名',属性值)
                 读取:   元素.getAttribute('属性名')
                 删除:   元素.removeAttribute('属性名')
                  */
                // console.log(LiList[i].getAttribute('data-src'));
                big.src = LiList[i].getAttribute('data-src')
            }
        }

    </script>

</body>

</html>

11.attribute语法应用

在这里插入图片描述

<!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>
        .wrap {
            width: 500px;
            text-align: left;
            margin: 20px auto;
        }

        #box {
            width: 200px;
            height: 200px;
            margin: 50px auto;
            background-color: #eee;
            border-style: solid;
        }
    </style>
</head>

<body>
    <div class="wrap">
        颜色:
        <input type="radio" name="color" value="red">红色
        <input type="radio" name="color" value="orange">橙色
        <input type="radio" name="color" value="yellow">黄色
        <input type="radio" name="color" value="green">绿色
    </div>
    <div class="wrap">
        边框宽度:
        <input type="radio" name="border" value="0px">0px
        <input type="radio" name="border" value="5px">5px
        <input type="radio" name="border" value="10px">10px
    </div>
    <div class="wrap">
        边框颜色:
        <input type="radio" name="borderColor" value="cyan">青色
        <input type="radio" name="borderColor" value="blue">蓝色
        <input type="radio" name="borderColor" value="purple">紫色
    </div>
    <div class="wrap">
        文本:
        <input type="radio" name="text" value="">空文本
        <input type="radio" name="text" value="好好学习">好好学习
        <input type="radio" name="text" value="天天向上">天天向上
        <input type="radio" name="text" value="别无选择">别无选择
    </div>
    <div>
        <div id="box"></div>
    </div>

    <script>
        /*核心思路 
        1. 把每一个选择框要设置的值，放入选择框的value属性中。
        2. 点击每一个选择框，只需要将 this.value 取出来赋值给元素对应的样式属性即可
        */
        //1.获取元素
        var colorList = document.querySelectorAll('[name="color"]');//颜色选择框列表
        var borderList = document.querySelectorAll('[name="border"]');//边框选择框列表
        var borderColorList = document.querySelectorAll('[name="borderColor"]');//边框颜色选择框列表
        var textList = document.querySelectorAll('[name="text"]');//文本选择框列表
        var box = document.querySelector('#box');//div盒子

        //2.注册事件

        //2.1 颜色
        for (var i = 0; i < colorList.length; i++) {
            colorList[i].onclick = function () {
                //this:事件源 当前点击的元素
                box.style.backgroundColor = this.value;
            };
        };
        //2.2 边框
        for (var i = 0; i < borderList.length; i++) {
            borderList[i].onclick = function () {
                box.style.borderWidth = this.value;
            };
        };
        //2.3 边框颜色
        for (var i = 0; i < borderColorList.length; i++) {
            borderColorList[i].onclick = function () {
                box.style.borderColor = this.value;
            };
        };
        //2.4 文本
        for (var i = 0; i < textList.length; i++) {
            textList[i].onclick = function () {
                box.innerText = this.value;
            };
        };
    </script>
</body>

</html>

A-sleep

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
WebApi-05 (三大家族及轮播图案例分享)

**1. 三大家族:offset家族 scroll家族 client家族 /* 1. offset家族 : 获取元素 ‘自身’ 真实宽高与位置 offsetWidth/offsetHeight : 真实宽高 = content + padding*2 + border*2 offsetLeft/offsetTop : 自身左/上外边框到定位父元素左/上内边框距离 2. scroll家族 : 获取元素 ‘内容’ 真实宽高与位置 scro
复制链接

扫一扫

专栏目录