WEB APIs day3 (2)

3.其它事件

WEB APIs day3 (2)_第1张图片

  • 页面加载事件

WEB APIs day3 (2)_第2张图片WEB APIs day3 (2)_第3张图片WEB APIs day3 (2)_第4张图片WEB APIs day3 (2)_第5张图片

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>
    
    
    <script>
        /*  // 等待页面所有资源加载完毕,就回去执行回调函数
         window.addEventListener('load', function () {
             const btn = document.querySelector('button')
             btn.addEventListener('click', function () {
                 alert(11)
             })
         })
         // 也可以针对某个资源绑定load事件,比如某个图很大,加载得很慢 
         // 可以不用非得写window
         img.addEentListener('load',function() {
             // 等待图片加载完毕,再去执行里面的代码
         })  */

        // 初始的html文档,如标签等加载完成之后
        document.addEventListener('DOMContentLoaded', function () {
            const btn = document.querySelector('button')
            btn.addEventListener('click', function () {
                alert(11)
            })
        })
    script>
    
head>

<body>
    <button>点击button>
body>

html>
  • 元素滚动事件
    WEB APIs day3 (2)_第6张图片WEB APIs day3 (2)_第7张图片
    WEB APIs day3 (2)_第8张图片WEB APIs day3 (2)_第9张图片WEB APIs day3 (2)_第10张图片WEB APIs day3 (2)_第11张图片
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>
   <style>
       body {
           padding-top: 100px;
           height: 6666px;
       }

       div {
           display: none;
           margin: 100px;
           /* overflow: hidden/auto/scroll */
           overflow: scroll;
           /* h200+w200+bd */
           height: 200px;
           width: 200px;
           border: 1px solid #000;
       }
   style>
head>

<body>
   <div>
       茉莉荔枝冰柠水
       茉莉荔枝冰柠水
       茉莉荔枝冰柠水
       茉莉荔枝冰柠水
       茉莉荔枝冰柠水
       茉莉荔枝冰柠水
       茉莉荔枝冰柠水
       茉莉荔枝冰柠水
       茉莉荔枝冰柠水
       茉莉荔枝冰柠水
       茉莉荔枝冰柠水
       茉莉荔枝冰柠水
       茉莉荔枝冰柠水
       茉莉荔枝冰柠水
       茉莉荔枝冰柠水
       茉莉荔枝冰柠水
       茉莉荔枝冰柠水
       茉莉荔枝冰柠水
       茉莉荔枝冰柠水
       茉莉荔枝冰柠水
       茉莉荔枝冰柠水
       茉莉荔枝冰柠水
       茉莉荔枝冰柠水
       茉莉荔枝冰柠水
       茉莉荔枝冰柠水
   div>
   <script>
       const div = document.querySelector('div')
       // 页面滚动事件
       window.addEventListener('scroll', function () {
           //  console.log('我滚了');
           // 想知道页面到底滚动了多少像素,被卷去了多少   scrollTop
           // 获取html元素的写法
           // document.documentElement
           // console.log(document.documentElement.scrollTop)
           // 大于等于100的时候显示,小于100的时候隐藏
           const n = document.documentElement.scrollTop
           if (n >= 100) {
               div.style.display = 'block'
           } else {
               div.style.dispaly = 'none'
           }
       })
      /*  const div = document.querySelector('div')
                 div.addEventListener('scroll', function () {
                     // console.log(111)
                     // scrollTop被卷去的头部
                     console.log(div.scrollTop)
                 }) */
   script>
body>

html>
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>scrollTop细节title>
    <style>
        body {
            height: 3000px;
        }
    style>
head>

<body>
    <script>
        // 赋值的时候不带单位 800
        // 可读写就是可取值也能赋值
        document.documentElement.scrollTop = 800
        window.addEventListener('scroll', function () {
            // 在scroll事件里面获取被卷去的距离  如果写在外面就不能保证每滑动一段距离就改变一次值
            const n = document.documentElement.scrollTop
            // 得到的是什么数据?  数字型  不带单位
            console.log(n)
        })
    script>
body>

html>

WEB APIs day3 (2)_第12张图片

综合案例

WEB APIs day3 (2)_第13张图片WEB APIs day3 (2)_第14张图片
WEB APIs day3 (2)_第15张图片WEB APIs day3 (2)_第16张图片WEB APIs day3 (2)_第17张图片WEB APIs day3 (2)_第18张图片

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>小兔鲜儿 - 新鲜 惠民 快捷!title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/index.css">
head>

<body>
  
  <div class="xtx_topnav">
    <div class="wrapper">
      
      <ul class="xtx_navs">
        <li>
          <a href="javascript:;">请先登录a>
        li>
        <li>
          <a href="javascript:;">免费注册a>
        li>
        <li>
          <a href="javascript:;">我的订单a>
        li>
        <li>
          <a href="javascript:;">会员中心a>
        li>
        <li>
          <a href="javascript:;">帮助中心a>
        li>
        <li>
          <a href="javascript:;">在线客服a>
        li>
        <li>
          <a href="javascript:;">
            <i class="mobile sprites">i>
            手机版
          a>
        li>
      ul>
    div>
  div>
  
  <div class="xtx_header">
    <div class="wrapper">
      
      <h1 class="xtx_logo"><a href="/">小兔鲜儿a>h1>
      
      <div class="xtx_navs">
        <ul class="clearfix">
          <li>
            <a href="javascript:;">首页a>
          li>
          <li>
            <a href="javascript:;">生鲜a>
          li>
          <li>
            <a href="javascript:;">美食a>
          li>
          <li>
            <a href="javascript:;">餐厨a>
          li>
          <li>
            <a href="javascript:;">电器a>
          li>
          <li>
            <a href="javascript:;">居家a>
          li>
          <li>
            <a href="javascript:;">洗护a>
          li>
          <li>
            <a href="javascript:;">孕婴a>
          li>
          <li>
            <a href="javascript:;">服装a>
          li>
        ul>
      div>
      
      <div class="xtx_search clearfix">
        
        <a href="javascript:;" class="xtx_search_cart sprites">
          <i>2i>
        a>
        
        <div class="xtx_search_wrapper">
          <input type="text" placeholder="搜一搜">
        div>
      div>
    div>
  div>
  
  <div class="xtx_entry">
    <div class="wrapper">
      
      <div class="xtx_category">
        
        <ul class="xtx_category_super">
          <li>
            <a href="javascript:;">
              生鲜
              <small>水果small>
              <small>蔬菜small>
            a>
            <i class="sprites">i>
          li>
          <li class="active">
            <a href="javascript:;">
              美食
              <small>面点small>
              <small>干果small>
            a>
            <i class="sprites">i>
          li>
          <li>
            <a href="javascript:;">
              电器
              <small>数码产品small>
            a>
            <i class="sprites">i>
          li>
          <li>
            <a href="javascript:;">
              居家
              <small>床品small>
              <small>四件套small>
              <small>被枕small>
            a>
            <i class="sprites">i>
          li>
          <li>
            <a href="javascript:;">
              洗护
              <small>洗发洗护small>
              <small>美妆small>
            a>
            <i class="sprites">i>
          li>
          <li>
            <a href="javascript:;">
              孕婴
              <small>奶粉small>
              <small>玩具small>
              <small>辅食small>
            a>
            <i class="sprites">i>
          li>
          <li>
            <a href="javascript:;">
              餐橱
              <small>数码产品small>
            a>
            <i class="sprites">i>
          li>
          <li>
            <a href="javascript:;">
              服饰
              <small>女装small>
              <small>男装small>
            a>
            <i class="sprites">i>
          li>
          <li>
            <a href="javascript:;">
              杂货
              <small>户外small>
              <small>图书small>
            a>
            <i class="sprites">i>
          li>
          <li>
            <a href="javascript:;">
              品牌
              <small>品牌制造small>
            a>
            <i class="sprites">i>
          li>
        ul>
        
        <div class="xtx_category_subset">

        div>
      div>
      
      <div class="xtx_banner">

        <ul>
          <li>
            <a href="javascript:;">
              <img src="./uploads/banner_1.png" alt="">
            a>
          li>
        ul>
        
        <a href="javascript:;" class="prev sprites">a>
        <a href="javascript:;" class="next sprites">a>
        
        <div class="indicator">
          <span>span>
          <span>span>
          <span class="active">span>
          <span>span>
          <span>span>
        div>

      div>
    div>
  div>
  
  <div class="xtx_goods_new xtx_panel">
    <div class="wrapper">
      
      <div class="xtx_panel_header">
        <h3>新鲜好物<small>新鲜出炉 品质靠谱small>h3>
        <a href="javascript:;" class="more">
          查看全部<i class="sprites">i>
        a>
      div>
      
      <div class="xtx_panel_goods_1">
        <a href="javascript:;">
          <img src="./uploads/new_goods_1.jpg" alt="">
          <span class="name">睿米无线吸尘器F8span>
          <span class="price"><small>small>899span>
        a>
        <a href="javascript:;">
          <img src="./uploads/new_goods_2.jpg" alt="">
          <span class="name">智能环绕3D空调span>
          <span class="price"><small>small>1299span>
        a>
        <a href="javascript:;">
          <img src="./uploads/new_goods_3.jpg" alt="">
          <span class="name">广东软软糯米煲仔饭span>
          <span class="price"><small>small>129span>
        a>
        <a href="javascript:;">
          <img src="./uploads/new_goods_4.jpg" alt="">
          <span class="name">罗西机械智能手表span>
          <span class="price"><small>small>3399span>
        a>
      div>
    div>
  div>

  
  <div class="xtx_goods_popular xtx_panel">
    <div class="wrapper">
      
      <div class="xtx_panel_header">
        <h3>人气推荐<small>人气爆款 不容错过small>h3>
      div>
      
      <div class="xtx_panel_goods_1">
        <a href="javascript:;">
          <img src="./uploads/popular_1.jpg">
          <span class="title">特惠推荐span>
          <span class="alt">我猜得到 你的需要span>
        a>
        <a href="./index-hot.html">
          <img src="./uploads/popular_2.jpg">
          <span class="title">爆款推荐span>
          <span class="alt">人气好物推荐span>
        a>
        <a href="./index-one.html">
          <img src="./uploads/popular_3.jpg">
          <span class="title">场景使用一站买全span>
          <span class="alt">编辑精心整理推荐span>
        a>
        <a href="javascript:;">
          <img src="./uploads/popular_4.jpg">
          <span class="title">领券中心span>
          <span class="alt">发现更多超值优惠券span>
        a>
      div>
    div>
  div>

  
  <div class="xtx_goods_brand xtx_panel">
    <div class="wrapper">
      <div class="xtx_panel_header">
        <h3>热门品牌<small>国际经典 品质保证small>h3>
        <div class="page-bar">
          <a href="javascript:;" class="prev sprites">a>
          <a href="javascript:;" class="next sprites active">a>
        div>
      div>
      
      <div class="xtx_goods">
        <ul>
          <li>
            <a href="./index-brand.html">
              <img src="./uploads/brand_goods_1.jpg" alt="">
            a>
            <a href="./brand-list.html">
              <img src="./uploads/brand_goods_2.jpg" alt="">
            a>
            <a href="javascript:;">
              <img src="./uploads/brand_goods_3.jpg" alt="">
            a>
            <a href="javascript:;">
              <img src="./uploads/brand_goods_4.jpg" alt="">
            a>
            <a href="javascript:;">
              <img src="./uploads/brand_goods_5.jpg" alt="">
            a>
          li>
        ul>
      div>
    div>
  div>

  
  <div class="xtx_goods_category xtx_panel">
    <div class="wrapper">
      
      <div class="xtx_panel_header">
        <h3>生鲜h3>
        <a href="javascript:;" class="more">
          查看全部<i class="sprites">i>
        a>
        <div class="tabs-bar">
          <a href="javascript:;" class="active">水果a>
          <a href="javascript:;">蔬菜a>
          <a href="javascript:;">肉禽蛋a>
          <a href="javascript:;">裤装a>
          <a href="javascript:;">衬衫a>
          <a href="javascript:;">内衣a>
        div>
      div>
      
      <div class="xtx_panel_goods_2">
        <ul class="clearfix">
          <li>
            <a href="javascript:;">
              <img src="./uploads/fresh_goods_cover.jpg" alt="">
            a>
            <div class="label">
              <span>生鲜馆span>
              <span>全场3件8折span>
            div>
          li>
          <li>
            
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/fresh_goods_1.jpg" alt="">
              div>
            a>
            
            <div class="meta">
              <p class="name">美威 智利原味三文鱼排 240g/袋 4片装p>
              <p class="flag">海鲜年货p>
              <p class="price"><small>small>59p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/fresh_goods_2.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">红功夫 麻辣小龙虾1.5kg 4-6钱/25-32只p>
              <p class="flag">火锅食材p>
              <p class="price"><small>small>71.9p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/fresh_goods_3.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">三都港 冷冻无公害黄花鱼 700g 2条 袋装p>
              <p class="flag">海鲜水产p>
              <p class="price"><small>small>49.9p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/fresh_goods_4.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">渔公码头 大连鲜食入味 即食海参 辽参刺参 调味海p>
              <p class="flag">海鲜年货p>
              <p class="price"><small>small>899p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/fresh_goods_5.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">越南进口白心火龙果4个 装 标准果 单果400-550g p>
              <p class="flag">p>
              <p class="price"><small>small>29p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/fresh_goods_6.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">广西沃柑 柑橘1.5kgp>
              <p class="flag">新鲜水果p>
              <p class="price"><small>small>59p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/fresh_goods_7.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">进口 牛油果 6个装 单果重约130-180gp>
              <p class="flag">新鲜水果p>
              <p class="price"><small>small>39.9p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/fresh_goods_8.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">泰国进口山竹5A级 500g p>
              <p class="flag">新鲜水果p>
              <p class="price"><small>small>29.9p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
        ul>
      div>

      
      <div class="xtx_panel_header">
        <h3>服饰h3>
        <a href="javascript:;" class="more">
          查看全部<i class="sprites">i>
        a>
        <div class="tabs-bar">
          <a href="javascript:;" class="active">行李箱a>
          <a href="javascript:;">男士包袋a>
          <a href="javascript:;">女士包袋a>
          <a href="javascript:;">钱包及小提袋a>
          <a href="javascript:;">男鞋a>
          <a href="javascript:;">女鞋a>
          <a href="javascript:;">拖鞋a>
        div>
      div>
      
      <div class="xtx_panel_goods_2">
        <ul class="clearfix">
          <li>
            <a href="javascript:;">
              <img src="./uploads/clothes_goods_cover.jpg" alt="">
            a>
            <div class="label">
              <span>服饰馆span>
              <span>3折狂欢span>
            div>
          li>
          <li>
            
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/clothes_goods_1.jpg" alt="">
              div>
            a>
            
            <div class="meta">
              <p class="name">人本秋季厚底帆布鞋 韩版低帮增高学生p>
              <p class="flag">p>
              <p class="price"><small>small>55p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/clothes_goods_2.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">迪士尼真皮针扣表带宽度 14-16mm规格双色压纹 女表带p>
              <p class="flag">海鲜年货p>
              <p class="price"><small>small>20.9p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/clothes_goods_3.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">三都港 冷冻无公害黄花鱼 700g 2条 袋装p>
              <p class="flag">海鲜水产p>
              <p class="price"><small>small>209p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/clothes_goods_4.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">ONLY夏季新款高腰宽松 七分阔腿裙裤休闲裤p>
              <p class="flag">p>
              <p class="price"><small>small>274.5p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/clothes_goods_5.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">拉夫劳伦t恤男正品 p>
              <p class="flag">圆领短袖p>
              <p class="price"><small>small>99p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/clothes_goods_6.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">李宁跑步鞋男鞋空气 弧2018春季款p>
              <p class="flag">p>
              <p class="price"><small>small>79p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/clothes_goods_7.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">Dickies男鞋2020春季 英伦休闲工装鞋低帮p>
              <p class="flag">p>
              <p class="price"><small>small>179p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/clothes_goods_8.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">北极绒春夏季纯棉背心 男士修身纯色打底p>
              <p class="flag">p>
              <p class="price"><small>small>69p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
        ul>
      div>

      
      <div class="xtx_panel_header">
        <h3>餐厨h3>
        <a href="javascript:;" class="more">
          查看全部<i class="sprites">i>
        a>
        <div class="tabs-bar">
          <a href="javascript:;" class="active">水果a>
          <a href="javascript:;">蔬菜a>
          <a href="javascript:;">肉禽蛋a>
          <a href="javascript:;">裤装a>
          <a href="javascript:;">衬衫a>
          <a href="javascript:;">内衣a>
        div>
      div>
      
      <div class="xtx_panel_goods_2">
        <ul class="clearfix">
          <li>
            <a href="javascript:;">
              <img src="./uploads/kitchen_goods_cover.jpg" alt="">
            a>
            <div class="label">
              <span>餐厨馆span>
              <span>大额优惠<br>等你来拿span>
            div>
          li>
          <li>
            
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/kitchen_goods_1.jpg" alt="">
              div>
            a>
            
            <div class="meta">
              <p class="name">创意可爱不锈钢便携餐具 套装筷子便携三件套p>
              <p class="flag">p>
              <p class="price"><small>small>5.9p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/kitchen_goods_2.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">三金西瓜霜竹炭牙刷软毛 成人家用家庭装p>
              <p class="flag">p>
              <p class="price"><small>small>20.9p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/kitchen_goods_3.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">朴(TOPOTO)大卫免手 洗平板拖把拓扑懒人木地 板刮刮乐桶拖布p>
              <p class="flag">p>
              <p class="price"><small>small>129p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/kitchen_goods_4.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">ONLY夏季新款高腰宽松 七分阔腿裙裤休闲裤p>
              <p class="flag">p>
              <p class="price"><small>small>274.5p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/kitchen_goods_5.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">金纺不伤手柔顺剂 妈妈的选择p>
              <p class="flag">p>
              <p class="price"><small>small>29p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/kitchen_goods_6.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">洁成绵柔抹布洗碗巾超 值5片装 洗锅刷碗p>
              <p class="flag">p>
              <p class="price"><small>small>10.9p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/kitchen_goods_7.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">大卫双驱动旋转拖把桶 免手洗拓扑拖布地拖墩布 p>
              <p class="flag">p>
              <p class="price"><small>small>159p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/kitchen_goods_8.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">斧头牌(AXE)去污地板 清洁剂2L 柠檬清香 p>
              <p class="flag">海鲜年货p>
              <p class="price"><small>small>22.9p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
        ul>
      div>

      
      <div class="xtx_panel_header">
        <h3>居家h3>
        <a href="javascript:;" class="more">
          查看全部<i class="sprites">i>
        a>
        <div class="tabs-bar">
          <a href="javascript:;" class="active">咖啡具a>
          <a href="javascript:;">水具酒具a>
          <a href="javascript:;">锅具a>
          <a href="javascript:;">餐具a>
          <a href="javascript:;">功能厨具a>
          <a href="javascript:;">茶具a>
          <a href="javascript:;">清洁保鲜a>
        div>
      div>
      
      <div class="xtx_panel_goods_2">
        <ul class="clearfix">
          <li>
            <a href="javascript:;">
              <img src="./uploads/home_goods_cover.jpg" alt="">
            a>
            <div class="label">
              <span>居家馆span>
              <span>全场满减span>
            div>
          li>
          <li>
            
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/home_goods_1.jpg" alt="">
              div>
            a>
            
            <div class="meta">
              <p class="name">菜鸟异常专用链接 非请 勿拍p>
              <p class="flag">海鲜年货p>
              <p class="price"><small>small>8999p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/home_goods_2.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">【中盐软水盐】汉斯希 尔家用软水机适配p>
              <p class="flag">p>
              <p class="price"><small>small>65p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/home_goods_3.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">云米净水壶家用直饮台式 净水机渗透过滤自来水p>
              <p class="flag">海鲜年货p>
              <p class="price"><small>small>129p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/home_goods_4.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">ztk恒温调奶器配件玻璃壶 炖盅p>
              <p class="flag">海鲜年货p>
              <p class="price"><small>small>129p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/home_goods_5.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">荞麦枕头单人枕芯双人 护颈椎枕头芯p>
              <p class="flag">p>
              <p class="price"><small>small>29p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/home_goods_6.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">Bear/小熊 LLJ-B04G1 家用多功能切碎机 电动p>
              <p class="flag">料理机p>
              <p class="price"><small>small>10.9p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/home_goods_7.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">荣事达薄饼机春饼春卷皮 家用博饼机电饼铛 p>
              <p class="flag">p>
              <p class="price"><small>small>159p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/home_goods_8.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">美式双人实木床 红实木 显档次p>
              <p class="flag">p>
              <p class="price"><small>small>22.9p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
        ul>
      div>
    div>
  div>

  
  <div class="xtx_goods_topic xtx_panel">
    <div class="wrapper">
      <div class="xtx_panel_header">
        <h3>最新专题h3>
        <a href="javascript:;" class="more">
          查看全部<i class="sprites">i>
        a>
      div>
      <div class="xtx_topic">
        <ul class="clearfix">
          <li>
            <a href="javascript:;">
              <img src="./uploads/topic_goods_1.jpg" alt="">
              <div class="meta">
                <p class="title">
                  吃这些美食才不算辜负自己
                  <small>餐厨起居洗护好物small>
                p>
                <span class="price"><small>small>29.9起span>
              div>
            a>
            <div class="social">
              <span class="like">
                <i class="sprites">i>1220
              span>
              <span class="view">
                <i class="sprites">i>1800
              span>

              <span class="reply">
                <i class="sprites">i>1220
              span>
            div>
          li>
          <li>
            <a href="javascript:;">
              <img src="./uploads/topic_goods_2.jpg" alt="">
              <div class="meta">
                <p class="title">
                  吃这些美食才不算辜负自己
                  <small>餐厨起居洗护好物small>
                p>
                <span class="price"><small>small>29.9起span>
              div>
            a>
            <div class="social">
              <span class="liked">
                <i class="sprites">i>1220
              span>
              <span class="view">
                <i class="sprites">i>1800
              span>

              <span class="reply">
                <i class="sprites">i>1220
              span>
            div>
          li>
          <li>
            <a href="javascript:;">
              <img src="./uploads/topic_goods_3.jpg" alt="">
              <div class="meta">
                <p class="title">
                  吃这些美食才不算辜负自己
                  <small>餐厨起居洗护好物small>
                p>
                <span class="price"><small>small>29.9起span>
              div>
            a>
            <div class="social">
              <span class="like">
                <i class="sprites">i>1220
              span>
              <span class="view">
                <i class="sprites">i>1800
              span>

              <span class="reply">
                <i class="sprites">i>1220
              span>
            div>
          li>
        ul>
      div>
    div>
  div>
  
  <div class="xtx_footer clearfix">
    <div class="wrapper">
      
      <div class="contact clearfix">
        <dl>
          <dt>客户服务dt>
          <dd class="chat">在线客服dd>
          <dd class="feedback">问题反馈dd>
        dl>
        <dl>
          <dt>关注我们dt>
          <dd class="weixin">公众号dd>
          <dd class="weibo">微博dd>
        dl>
        <dl>
          <dt>下载APPdt>
          <dd class="qrcode">
            <img src="./uploads/qrcode.jpg">
          dd>
          <dd class="download">
            <span>扫描二维码span>
            <span>立马下载APPspan>
            <a href="javascript:;">下载页面a>
          dd>
        dl>
        <dl>
          <dt>服务热线dt>
          <dd class="hotline">
            400-0000-000
            <small>周一至周日 8:00-18:00small>
          dd>
        dl>
      div>
    div>
    
    <div class="extra">
      <div class="wrapper">
        
        <div class="slogan">
          <a href="javascript:;" class="price">价格亲民a>
          <a href="javascript:;" class="express">物流快捷a>
          <a href="javascript:;" class="quality">品质新鲜a>
        div>
        
        <div class="copyright">
          <p>
            <a href="javascript:;">关于我们a>
            <a href="javascript:;">帮助中心a>
            <a href="javascript:;">售后服务a>
            <a href="javascript:;">配送与验收a>
            <a href="javascript:;">商务合作a>
            <a href="javascript:;">搜索推荐a>
            <a href="javascript:;">友情链接a>
          p>
          <p>CopyRight © 小兔鲜儿p>
        div>
      div>
    div>
  div>
  
  <div class="xtx-elevator">
    <ul class="xtx-elevator-list">
      <li><a href="javascript:;" data-name="new">新鲜好物a>li>
      <li><a href="javascript:;" data-name="popular">人气推荐a>li>
      <li><a href="javascript:;" data-name="brand">热门品牌a>li>
      <li><a href="javascript:;" data-name="topic">最新专题a>li>
      <li><a href="javascript:;" id="backTop"><i class="sprites">i>顶部a>li>
    ul>
  div>
  <script>
    // 获取元素
    const elevator = document.querySelector('.xtx-elevator')
    // 1.当页面滚动大于300像素,就显示  电梯导航
    // 2. 给页面添加滚动事件
    window.addEventListener('scroll', function () {
      // 被卷去的头部大于300
      const n = document.documentElement.scrollTop
      /*  if (n >= 300) {
         // opacity里面肯定添加了transition,淡入淡出效果
         elevator.style.opacity = 1
       } else {
         elevator.style.opacity = 0
       } */
      // 三元运算符
      elevator.style.opacity = n >= 300 ? 1 : 0
    })

    // 点击返回页面顶部
    // 和上面的滚动没有关系
    const backTop = document.querySelector('#backTop')
    backTop.addEventListener('click', function () {
      // 可读写
      // document.documentElement.scrollTop = 0
      // 另外一种方法:window.scrollTo(x, y)
      // 它们的区别是一个是属性赋值,一个是方法赋值的形式。scrollTo可以x轴滚动也可以y轴滚动
      // window.scrollTo(200, 0)
      // window.scrollTo(0, 200)
      window.scrollTo(0, 0)
    })
  script>
body>

html>
  • 页面尺寸事件
    WEB APIs day3 (2)_第19张图片WEB APIs day3 (2)_第20张图片WEB APIs day3 (2)_第21张图片WEB APIs day3 (2)_第22张图片WEB APIs day3 (2)_第23张图片WEB APIs day3 (2)_第24张图片WEB APIs day3 (2)_第25张图片WEB APIs day3 (2)_第26张图片WEB APIs day3 (2)_第27张图片WEB APIs day3 (2)_第28张图片
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>
    <style>
        div {
            display: inline-block;
            /* width: 200px; */
            height: 200px;
            background-color: pink;
            /* 检测宽高的时候包括padding,不包括border */
            padding: 10px;
            border: 20px solid red;
        }
    style>
head>

<body>
    <div>dsodhofhq'qp[qjfg[gjq[j[j[hj['h['div>
    <script>
        // 新属性:clientwidth,clientheight  获取元素可见部分的宽高
        // 返回的数字型
        const div = document.querySelector('div')
        console.log(div.clientWidth)
        // resize 浏览器窗口大小发生变化的时候触发的事件
        window.addEventListener('resize', function () {
            console.log(1)
        })
    script>
body>

html>

4.元素尺寸与位置

WEB APIs day3 (2)_第29张图片WEB APIs day3 (2)_第30张图片WEB APIs day3 (2)_第31张图片WEB APIs day3 (2)_第32张图片
这样就能得到距离左侧,顶部的距离了。(靠自己算算不准,所以采用js更加靠谱)
WEB APIs day3 (2)_第33张图片WEB APIs day3 (2)_第34张图片
WEB APIs day3 (2)_第35张图片WEB APIs day3 (2)_第36张图片
学了offset之后,页面滚动大于300px再显示就不科学了,我们要让它在出现那个盒子顶部之后就开始显示导航栏 这样一来这个盒子上面的盒子再加或者再减都没有影响了WEB APIs day3 (2)_第37张图片WEB APIs day3 (2)_第38张图片
不用console.log直接在控制台检测效果也行
WEB APIs day3 (2)_第39张图片
电梯导航改动的相关代码
WEB APIs day3 (2)_第40张图片

WEB APIs day3 (2)_第41张图片
WEB APIs day3 (2)_第42张图片
因为-80~0有过渡效果,所以是滑下来的
WEB APIs day3 (2)_第43张图片
知道需求之后,我们来写js,手动的把.header的top改成-80px,滚动到秒杀模块的时候就可以让它显示了
WEB APIs day3 (2)_第44张图片

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>
    <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 .3s;
        }

        .sk {
            width: 300px;
            height: 300px;
            background-color: skyblue;
            margin-top: 500px;
        }
    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>
        const sk = document.querySelector('.sk')
        const header = document.querySelector('.header')
        // 1.页面滚动事件
        window.addEventListener('scroll', function () {
            //   当页面滚动到 秒杀模块 的时候, 就改变 头部的 top值
            // 页面被卷去的头部 >= 秒杀模块的位置 offsetTop
            const n = document.documentElement.scrollTop
            /*  if (n >= sk.offsetTop) {
                 header.style.top = 0
             } else {
                 // css一定要带单位,样式这些,我们说过 acrollTop这些可以不用带单位
                 header.style.top = '-80px'
             } */
            // 三元表达式更加简洁   先算赋值符号右边的
            header.style.top = n >= sk.offsetTop ? 0 : '-80px'
        })
    script>
body>

html>

blibli导航滑动案例
WEB APIs day3 (2)_第45张图片
核心思想:对红色线盒子采用定位的方式定位到首页,动画盒子下面,他是一个单独的盒子,故它可以单独移动,通过给红色线盒子给个transform里面的translate来实现滑动。当点完之后,红色的盒子移动到链接的位置。接下来是移动多少距离的问题,我们可以通过offsetLeft获取盒子距离左侧的距离,我们把这个距离给盒子trasform里面的translate就可以在点击之后跟着过来了。同时我们给它添加一个过渡效果,就可以慢慢过来了,再给每一个小链接绑定一个点击事件。
要获得所有的a链接,所以要用到我们的事件委托,tabs-list是a的父级,把a的点击事件委托给它的父亲就行了。

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>bilibili-干杯~~~title>
  
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  
  <link rel="stylesheet" href="./css/index.css">
  
  <link rel="stylesheet" href="./fonts/iconfont.css">
head>

<body>
  
  <header class="suspension">
    <div class="m-navbar">
      
      <a href="#" class="logo">
        <i class="iconfont Navbar_logo">i>
      a>
      
      <div class="right">
        <a href="#" class="search">
          <i class="iconfont ic_search_tab">i>
        a>
        <a href="#" class="face">
          <img src="./images/login.png" alt="">
        a>
        <div class="app-btn">
          <img src="./images/download.png" alt="">
        div>
      div>
    div>
    <div class="channel-menu">
      <div class="tabs">
        
        <div class="tabs-list">
          <a href="#">首页a>
          <a href="#">动画a>
          <a href="#">番剧a>
          <a href="#">果蔬a>
          <a href="#">音乐a>
          <a href="#">舞蹈a>
          <a href="#">鬼畜a>
          <a href="#">吹鬼a>
          
          <div class="line">div>
        div>
      div>
      <div class="after">
        <i class="iconfont general_pulldown_s">i>
      div>
    div>
  header>

  
  <div class="m-home">
    <div class="video-list">
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu">i>
              播放量
            span>
            <span>
              <i class="iconfont icon_shipin_danmushu">i>
              评论数
            span>
          div>
        div>
        <p class="title ellipsis-2">
          315晚会能不能曝光下智能电视?N重广告、套娃会员、操作反人类,当代年轻人是怎么被智能电视逼疯的?【商业B面&牛顿】
        p>
      a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu">i>
              播放量
            span>
            <span>
              <i class="iconfont icon_shipin_danmushu">i>
              评论数
            span>
          div>
        div>
        <p class="title ellipsis-2">
          315晚会能不能曝光下智能电视?N重广告、套娃会员、操作反人类,当代年轻人是怎么被智能电视逼疯的?【商业B面&牛顿】
        p>
      a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu">i>
              播放量
            span>
            <span>
              <i class="iconfont icon_shipin_danmushu">i>
              评论数
            span>
          div>
        div>
        <p class="title ellipsis-2">
          315晚会能不能曝光下智能电视?N重广告、套娃会员、操作反人类,当代年轻人是怎么被智能电视逼疯的?【商业B面&牛顿】
        p>
      a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu">i>
              播放量
            span>
            <span>
              <i class="iconfont icon_shipin_danmushu">i>
              评论数
            span>
          div>
        div>
        <p class="title ellipsis-2">
          315晚会能不能曝光下电视?
        p>
      a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu">i>
              播放量
            span>
            <span>
              <i class="iconfont icon_shipin_danmushu">i>
              评论数
            span>
          div>
        div>
        <p class="title ellipsis-2">
          315晚会能不能曝光下智能电视?N重广告、套娃会员、操作反人类,当代年轻人是怎么被智能电视逼疯的?【商业B面&牛顿】
        p>
      a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu">i>
              播放量
            span>
            <span>
              <i class="iconfont icon_shipin_danmushu">i>
              评论数
            span>
          div>
        div>
        <p class="title ellipsis-2">
          315晚会能不能曝光下智能电视?N重广告、套娃会员、操作反人类,当代年轻人是怎么被智能电视逼疯的?【商业B面&牛顿】
        p>
      a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu">i>
              播放量
            span>
            <span>
              <i class="iconfont icon_shipin_danmushu">i>
              评论数
            span>
          div>
        div>
        <p class="title ellipsis-2">
          315晚会能不能曝光下智能电视?N重广告、套娃会员、操作反人类,当代年轻人是怎么被智能电视逼疯的?【商业B面&牛顿】
        p>
      a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu">i>
              播放量
            span>
            <span>
              <i class="iconfont icon_shipin_danmushu">i>
              评论数
            span>
          div>
        div>
        <p class="title ellipsis-2">
          315晚会能不能曝光下智能电视?N重广告、套娃会员、操作反人类,当代年轻人是怎么被智能电视逼疯的?【商业B面&牛顿】
        p>
      a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu">i>
              播放量
            span>
            <span>
              <i class="iconfont icon_shipin_danmushu">i>
              评论数
            span>
          div>
        div>
        <p class="title ellipsis-2">
          315晚会能不能曝光下智能电视?N重广告、套娃会员、操作反人类,当代年轻人是怎么被智能电视逼疯的?【商业B面&牛顿】
        p>
      a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu">i>
              播放量
            span>
            <span>
              <i class="iconfont icon_shipin_danmushu">i>
              评论数
            span>
          div>
        div>
        <p class="title ellipsis-2">
          315晚会能不能曝光下智能电视?N重广告、套娃会员、操作反人类,当代年轻人是怎么被智能电视逼疯的?【商业B面&牛顿】
        p>
      a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu">i>
              播放量
            span>
            <span>
              <i class="iconfont icon_shipin_danmushu">i>
              评论数
            span>
          div>
        div>
        <p class="title ellipsis-2">
          315晚会能不能曝光下智能电视?N重广告、套娃会员、操作反人类,当代年轻人是怎么被智能电视逼疯的?【商业B面&牛顿】
        p>
      a>
    div>
  div>

  
  <footer class="app">
    <div class="btn-app">
      <i class="iconfont Navbar_logo">i>
      打开App,看你感兴趣的视频
    div>
  footer>
  <script>
    // 1. 事件委托的方法 获取父元素 tabs-list
    const list = document.querySelector('.tabs-list')
    const line = document.querySelector('.line')
    // 2. 给a注册事件
    list.addEventListener('click', function (e) {
      // 判断点击的是a  只有点击了A 才有触发效果
      if (e.target.tagName === 'A') {
        // console.log(11)
        // 当前元素是谁 ?  e.target
        // 得到当前点击元素的位置
        // 得到当前的链接的 offsetLeft
        // console.log(e.target.offsetLeft)
        // 让line盒子来进行移动
        // 只动X轴就行了,因为Y轴不需要动
        line.style.transform = `translateX(100px)`
        // 把我们点击的a链接盒子的位置  然后移动
        line.style.transform = `translateX(${e.target.offsetLeft}px)`
        // transform移动的时候可以添加过渡效果 谁做动画给谁加过渡 transition 当时是在index.less里面写的
      }
    })
  script>
body>

html>

另外一个获取元素大小和尺寸的方法

这个方法和offset的区别:offset是针对的整个页面,而getBoundingClientRect()是针对的视口,它会随着页面下拉而改变四个位置的坐标,但是offset针对的真个页面,它不会随着下拉而改变坐标。WEB APIs day3 (2)_第46张图片

WEB APIs day3 (2)_第47张图片

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>
    <style>
        body {
            height: 2000px;
        }

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px;
        }
    style>
head>

<body>
    <div>div>
    <script>
        const div = document.querySelector('div')
        // 打开之后能得到一个对象,对象里面有宽高,还有上下左右四个位置
        console.log(div.getBoundingClientRect())
    script>
body>

html>

WEB APIs day3 (2)_第48张图片

5.综合案例

WEB APIs day3 (2)_第49张图片WEB APIs day3 (2)_第50张图片WEB APIs day3 (2)_第51张图片WEB APIs day3 (2)_第52张图片WEB APIs day3 (2)_第53张图片WEB APIs day3 (2)_第54张图片WEB APIs day3 (2)_第55张图片WEB APIs day3 (2)_第56张图片WEB APIs day3 (2)_第57张图片WEB APIs day3 (2)_第58张图片
console.log(e.target.dataset)
在这里插入图片描述
console.log(e.target.dataset.name)
在这里插入图片描述WEB APIs day3 (2)_第59张图片要想点击之后,页面是滑动过去的,而不是一下子跳过去的,只用在css上面添加一句话就行
WEB APIs day3 (2)_第60张图片WEB APIs day3 (2)_第61张图片

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>小兔鲜儿 - 新鲜 惠民 快捷!title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/index.css">
head>

<body>
  
  <div class="xtx_topnav">
    <div class="wrapper">
      
      <ul class="xtx_navs">
        <li>
          <a href="javascript:;">请先登录a>
        li>
        <li>
          <a href="javascript:;">免费注册a>
        li>
        <li>
          <a href="javascript:;">我的订单a>
        li>
        <li>
          <a href="javascript:;">会员中心a>
        li>
        <li>
          <a href="javascript:;">帮助中心a>
        li>
        <li>
          <a href="javascript:;">在线客服a>
        li>
        <li>
          <a href="javascript:;">
            <i class="mobile sprites">i>
            手机版
          a>
        li>
      ul>
    div>
  div>
  
  <div class="xtx_header">
    <div class="wrapper">
      
      <h1 class="xtx_logo"><a href="/">小兔鲜儿a>h1>
      
      <div class="xtx_navs">
        <ul class="clearfix">
          <li>
            <a href="javascript:;">首页a>
          li>
          <li>
            <a href="javascript:;">生鲜a>
          li>
          <li>
            <a href="javascript:;">美食a>
          li>
          <li>
            <a href="javascript:;">餐厨a>
          li>
          <li>
            <a href="javascript:;">电器a>
          li>
          <li>
            <a href="javascript:;">居家a>
          li>
          <li>
            <a href="javascript:;">洗护a>
          li>
          <li>
            <a href="javascript:;">孕婴a>
          li>
          <li>
            <a href="javascript:;">服装a>
          li>
        ul>
      div>
      
      <div class="xtx_search clearfix">
        
        <a href="javascript:;" class="xtx_search_cart sprites">
          <i>2i>
        a>
        
        <div class="xtx_search_wrapper">
          <input type="text" placeholder="搜一搜">
        div>
      div>
    div>
  div>
  
  <div class="xtx_entry">
    <div class="wrapper">
      
      <div class="xtx_category">
        
        <ul class="xtx_category_super">
          <li>
            <a href="javascript:;">
              生鲜
              <small>水果small>
              <small>蔬菜small>
            a>
            <i class="sprites">i>
          li>
          <li class="active">
            <a href="javascript:;">
              美食
              <small>面点small>
              <small>干果small>
            a>
            <i class="sprites">i>
          li>
          <li>
            <a href="javascript:;">
              电器
              <small>数码产品small>
            a>
            <i class="sprites">i>
          li>
          <li>
            <a href="javascript:;">
              居家
              <small>床品small>
              <small>四件套small>
              <small>被枕small>
            a>
            <i class="sprites">i>
          li>
          <li>
            <a href="javascript:;">
              洗护
              <small>洗发洗护small>
              <small>美妆small>
            a>
            <i class="sprites">i>
          li>
          <li>
            <a href="javascript:;">
              孕婴
              <small>奶粉small>
              <small>玩具small>
              <small>辅食small>
            a>
            <i class="sprites">i>
          li>
          <li>
            <a href="javascript:;">
              餐橱
              <small>数码产品small>
            a>
            <i class="sprites">i>
          li>
          <li>
            <a href="javascript:;">
              服饰
              <small>女装small>
              <small>男装small>
            a>
            <i class="sprites">i>
          li>
          <li>
            <a href="javascript:;">
              杂货
              <small>户外small>
              <small>图书small>
            a>
            <i class="sprites">i>
          li>
          <li>
            <a href="javascript:;">
              品牌
              <small>品牌制造small>
            a>
            <i class="sprites">i>
          li>
        ul>
        
        <div class="xtx_category_subset">

        div>
      div>
      
      <div class="xtx_banner">

        <ul>
          <li>
            <a href="javascript:;">
              <img src="./uploads/banner_1.png" alt="">
            a>
          li>
        ul>
        
        <a href="javascript:;" class="prev sprites">a>
        <a href="javascript:;" class="next sprites">a>
        
        <div class="indicator">
          <span>span>
          <span>span>
          <span class="active">span>
          <span>span>
          <span>span>
        div>

      div>
    div>
  div>
  
  <div class="xtx_goods_new xtx_panel">
    <div class="wrapper">
      
      <div class="xtx_panel_header">
        <h3>新鲜好物<small>新鲜出炉 品质靠谱small>h3>
        <a href="javascript:;" class="more">
          查看全部<i class="sprites">i>
        a>
      div>
      
      <div class="xtx_panel_goods_1">
        <a href="javascript:;">
          <img src="./uploads/new_goods_1.jpg" alt="">
          <span class="name">睿米无线吸尘器F8span>
          <span class="price"><small>small>899span>
        a>
        <a href="javascript:;">
          <img src="./uploads/new_goods_2.jpg" alt="">
          <span class="name">智能环绕3D空调span>
          <span class="price"><small>small>1299span>
        a>
        <a href="javascript:;">
          <img src="./uploads/new_goods_3.jpg" alt="">
          <span class="name">广东软软糯米煲仔饭span>
          <span class="price"><small>small>129span>
        a>
        <a href="javascript:;">
          <img src="./uploads/new_goods_4.jpg" alt="">
          <span class="name">罗西机械智能手表span>
          <span class="price"><small>small>3399span>
        a>
      div>
    div>
  div>

  
  <div class="xtx_goods_popular xtx_panel">
    <div class="wrapper">
      
      <div class="xtx_panel_header">
        <h3>人气推荐<small>人气爆款 不容错过small>h3>
      div>
      
      <div class="xtx_panel_goods_1">
        <a href="javascript:;">
          <img src="./uploads/popular_1.jpg">
          <span class="title">特惠推荐span>
          <span class="alt">我猜得到 你的需要span>
        a>
        <a href="./index-hot.html">
          <img src="./uploads/popular_2.jpg">
          <span class="title">爆款推荐span>
          <span class="alt">人气好物推荐span>
        a>
        <a href="./index-one.html">
          <img src="./uploads/popular_3.jpg">
          <span class="title">场景使用一站买全span>
          <span class="alt">编辑精心整理推荐span>
        a>
        <a href="javascript:;">
          <img src="./uploads/popular_4.jpg">
          <span class="title">领券中心span>
          <span class="alt">发现更多超值优惠券span>
        a>
      div>
    div>
  div>

  
  <div class="xtx_goods_brand xtx_panel">
    <div class="wrapper">
      <div class="xtx_panel_header">
        <h3>热门品牌<small>国际经典 品质保证small>h3>
        <div class="page-bar">
          <a href="javascript:;" class="prev sprites">a>
          <a href="javascript:;" class="next sprites active">a>
        div>
      div>
      
      <div class="xtx_goods">
        <ul>
          <li>
            <a href="./index-brand.html">
              <img src="./uploads/brand_goods_1.jpg" alt="">
            a>
            <a href="./brand-list.html">
              <img src="./uploads/brand_goods_2.jpg" alt="">
            a>
            <a href="javascript:;">
              <img src="./uploads/brand_goods_3.jpg" alt="">
            a>
            <a href="javascript:;">
              <img src="./uploads/brand_goods_4.jpg" alt="">
            a>
            <a href="javascript:;">
              <img src="./uploads/brand_goods_5.jpg" alt="">
            a>
          li>
        ul>
      div>
    div>
  div>

  
  <div class="xtx_goods_category xtx_panel">
    <div class="wrapper">
      
      <div class="xtx_panel_header">
        <h3>生鲜h3>
        <a href="javascript:;" class="more">
          查看全部<i class="sprites">i>
        a>
        <div class="tabs-bar">
          <a href="javascript:;" class="active">水果a>
          <a href="javascript:;">蔬菜a>
          <a href="javascript:;">肉禽蛋a>
          <a href="javascript:;">裤装a>
          <a href="javascript:;">衬衫a>
          <a href="javascript:;">内衣a>
        div>
      div>
      
      <div class="xtx_panel_goods_2">
        <ul class="clearfix">
          <li>
            <a href="javascript:;">
              <img src="./uploads/fresh_goods_cover.jpg" alt="">
            a>
            <div class="label">
              <span>生鲜馆span>
              <span>全场3件8折span>
            div>
          li>
          <li>
            
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/fresh_goods_1.jpg" alt="">
              div>
            a>
            
            <div class="meta">
              <p class="name">美威 智利原味三文鱼排 240g/袋 4片装p>
              <p class="flag">海鲜年货p>
              <p class="price"><small>small>59p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/fresh_goods_2.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">红功夫 麻辣小龙虾1.5kg 4-6钱/25-32只p>
              <p class="flag">火锅食材p>
              <p class="price"><small>small>71.9p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/fresh_goods_3.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">三都港 冷冻无公害黄花鱼 700g 2条 袋装p>
              <p class="flag">海鲜水产p>
              <p class="price"><small>small>49.9p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/fresh_goods_4.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">渔公码头 大连鲜食入味 即食海参 辽参刺参 调味海p>
              <p class="flag">海鲜年货p>
              <p class="price"><small>small>899p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/fresh_goods_5.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">越南进口白心火龙果4个 装 标准果 单果400-550g p>
              <p class="flag">p>
              <p class="price"><small>small>29p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/fresh_goods_6.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">广西沃柑 柑橘1.5kgp>
              <p class="flag">新鲜水果p>
              <p class="price"><small>small>59p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/fresh_goods_7.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">进口 牛油果 6个装 单果重约130-180gp>
              <p class="flag">新鲜水果p>
              <p class="price"><small>small>39.9p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/fresh_goods_8.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">泰国进口山竹5A级 500g p>
              <p class="flag">新鲜水果p>
              <p class="price"><small>small>29.9p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
        ul>
      div>

      
      <div class="xtx_panel_header">
        <h3>服饰h3>
        <a href="javascript:;" class="more">
          查看全部<i class="sprites">i>
        a>
        <div class="tabs-bar">
          <a href="javascript:;" class="active">行李箱a>
          <a href="javascript:;">男士包袋a>
          <a href="javascript:;">女士包袋a>
          <a href="javascript:;">钱包及小提袋a>
          <a href="javascript:;">男鞋a>
          <a href="javascript:;">女鞋a>
          <a href="javascript:;">拖鞋a>
        div>
      div>
      
      <div class="xtx_panel_goods_2">
        <ul class="clearfix">
          <li>
            <a href="javascript:;">
              <img src="./uploads/clothes_goods_cover.jpg" alt="">
            a>
            <div class="label">
              <span>服饰馆span>
              <span>3折狂欢span>
            div>
          li>
          <li>
            
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/clothes_goods_1.jpg" alt="">
              div>
            a>
            
            <div class="meta">
              <p class="name">人本秋季厚底帆布鞋 韩版低帮增高学生p>
              <p class="flag">p>
              <p class="price"><small>small>55p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/clothes_goods_2.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">迪士尼真皮针扣表带宽度 14-16mm规格双色压纹 女表带p>
              <p class="flag">海鲜年货p>
              <p class="price"><small>small>20.9p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/clothes_goods_3.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">三都港 冷冻无公害黄花鱼 700g 2条 袋装p>
              <p class="flag">海鲜水产p>
              <p class="price"><small>small>209p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/clothes_goods_4.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">ONLY夏季新款高腰宽松 七分阔腿裙裤休闲裤p>
              <p class="flag">p>
              <p class="price"><small>small>274.5p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/clothes_goods_5.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">拉夫劳伦t恤男正品 p>
              <p class="flag">圆领短袖p>
              <p class="price"><small>small>99p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/clothes_goods_6.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">李宁跑步鞋男鞋空气 弧2018春季款p>
              <p class="flag">p>
              <p class="price"><small>small>79p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/clothes_goods_7.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">Dickies男鞋2020春季 英伦休闲工装鞋低帮p>
              <p class="flag">p>
              <p class="price"><small>small>179p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/clothes_goods_8.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">北极绒春夏季纯棉背心 男士修身纯色打底p>
              <p class="flag">p>
              <p class="price"><small>small>69p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
        ul>
      div>

      
      <div class="xtx_panel_header">
        <h3>餐厨h3>
        <a href="javascript:;" class="more">
          查看全部<i class="sprites">i>
        a>
        <div class="tabs-bar">
          <a href="javascript:;" class="active">水果a>
          <a href="javascript:;">蔬菜a>
          <a href="javascript:;">肉禽蛋a>
          <a href="javascript:;">裤装a>
          <a href="javascript:;">衬衫a>
          <a href="javascript:;">内衣a>
        div>
      div>
      
      <div class="xtx_panel_goods_2">
        <ul class="clearfix">
          <li>
            <a href="javascript:;">
              <img src="./uploads/kitchen_goods_cover.jpg" alt="">
            a>
            <div class="label">
              <span>餐厨馆span>
              <span>大额优惠<br>等你来拿span>
            div>
          li>
          <li>
            
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/kitchen_goods_1.jpg" alt="">
              div>
            a>
            
            <div class="meta">
              <p class="name">创意可爱不锈钢便携餐具 套装筷子便携三件套p>
              <p class="flag">p>
              <p class="price"><small>small>5.9p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/kitchen_goods_2.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">三金西瓜霜竹炭牙刷软毛 成人家用家庭装p>
              <p class="flag">p>
              <p class="price"><small>small>20.9p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/kitchen_goods_3.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">朴(TOPOTO)大卫免手 洗平板拖把拓扑懒人木地 板刮刮乐桶拖布p>
              <p class="flag">p>
              <p class="price"><small>small>129p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/kitchen_goods_4.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">ONLY夏季新款高腰宽松 七分阔腿裙裤休闲裤p>
              <p class="flag">p>
              <p class="price"><small>small>274.5p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/kitchen_goods_5.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">金纺不伤手柔顺剂 妈妈的选择p>
              <p class="flag">p>
              <p class="price"><small>small>29p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/kitchen_goods_6.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">洁成绵柔抹布洗碗巾超 值5片装 洗锅刷碗p>
              <p class="flag">p>
              <p class="price"><small>small>10.9p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/kitchen_goods_7.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">大卫双驱动旋转拖把桶 免手洗拓扑拖布地拖墩布 p>
              <p class="flag">p>
              <p class="price"><small>small>159p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/kitchen_goods_8.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">斧头牌(AXE)去污地板 清洁剂2L 柠檬清香 p>
              <p class="flag">海鲜年货p>
              <p class="price"><small>small>22.9p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
        ul>
      div>

      
      <div class="xtx_panel_header">
        <h3>居家h3>
        <a href="javascript:;" class="more">
          查看全部<i class="sprites">i>
        a>
        <div class="tabs-bar">
          <a href="javascript:;" class="active">咖啡具a>
          <a href="javascript:;">水具酒具a>
          <a href="javascript:;">锅具a>
          <a href="javascript:;">餐具a>
          <a href="javascript:;">功能厨具a>
          <a href="javascript:;">茶具a>
          <a href="javascript:;">清洁保鲜a>
        div>
      div>
      
      <div class="xtx_panel_goods_2">
        <ul class="clearfix">
          <li>
            <a href="javascript:;">
              <img src="./uploads/home_goods_cover.jpg" alt="">
            a>
            <div class="label">
              <span>居家馆span>
              <span>全场满减span>
            div>
          li>
          <li>
            
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/home_goods_1.jpg" alt="">
              div>
            a>
            
            <div class="meta">
              <p class="name">菜鸟异常专用链接 非请 勿拍p>
              <p class="flag">海鲜年货p>
              <p class="price"><small>small>8999p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/home_goods_2.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">【中盐软水盐】汉斯希 尔家用软水机适配p>
              <p class="flag">p>
              <p class="price"><small>small>65p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/home_goods_3.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">云米净水壶家用直饮台式 净水机渗透过滤自来水p>
              <p class="flag">海鲜年货p>
              <p class="price"><small>small>129p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/home_goods_4.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">ztk恒温调奶器配件玻璃壶 炖盅p>
              <p class="flag">海鲜年货p>
              <p class="price"><small>small>129p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/home_goods_5.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">荞麦枕头单人枕芯双人 护颈椎枕头芯p>
              <p class="flag">p>
              <p class="price"><small>small>29p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/home_goods_6.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">Bear/小熊 LLJ-B04G1 家用多功能切碎机 电动p>
              <p class="flag">料理机p>
              <p class="price"><small>small>10.9p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/home_goods_7.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">荣事达薄饼机春饼春卷皮 家用博饼机电饼铛 p>
              <p class="flag">p>
              <p class="price"><small>small>159p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
          <li>
            <a href="javascript:;">
              <div class="img-box">
                <img src="./uploads/home_goods_8.jpg" alt="">
              div>
            a>
            <div class="meta">
              <p class="name">美式双人实木床 红实木 显档次p>
              <p class="flag">p>
              <p class="price"><small>small>22.9p>
            div>
            
            <div class="extra">
              <a href="javascript:;">
                <span>找相似span>
                <span>发现现多宝贝>span>
              a>
            div>
          li>
        ul>
      div>
    div>
  div>

  
  <div class="xtx_goods_topic xtx_panel">
    <div class="wrapper">
      <div class="xtx_panel_header">
        <h3>最新专题h3>
        <a href="javascript:;" class="more">
          查看全部<i class="sprites">i>
        a>
      div>
      <div class="xtx_topic">
        <ul class="clearfix">
          <li>
            <a href="javascript:;">
              <img src="./uploads/topic_goods_1.jpg" alt="">
              <div class="meta">
                <p class="title">
                  吃这些美食才不算辜负自己
                  <small>餐厨起居洗护好物small>
                p>
                <span class="price"><small>small>29.9起span>
              div>
            a>
            <div class="social">
              <span class="like">
                <i class="sprites">i>1220
              span>
              <span class="view">
                <i class="sprites">i>1800
              span>

              <span class="reply">
                <i class="sprites">i>1220
              span>
            div>
          li>
          <li>
            <a href="javascript:;">
              <img src="./uploads/topic_goods_2.jpg" alt="">
              <div class="meta">
                <p class="title">
                  吃这些美食才不算辜负自己
                  <small>餐厨起居洗护好物small>
                p>
                <span class="price"><small>small>29.9起span>
              div>
            a>
            <div class="social">
              <span class="liked">
                <i class="sprites">i>1220
              span>
              <span class="view">
                <i class="sprites">i>1800
              span>

              <span class="reply">
                <i class="sprites">i>1220
              span>
            div>
          li>
          <li>
            <a href="javascript:;">
              <img src="./uploads/topic_goods_3.jpg" alt="">
              <div class="meta">
                <p class="title">
                  吃这些美食才不算辜负自己
                  <small>餐厨起居洗护好物small>
                p>
                <span class="price"><small>small>29.9起span>
              div>
            a>
            <div class="social">
              <span class="like">
                <i class="sprites">i>1220
              span>
              <span class="view">
                <i class="sprites">i>1800
              span>

              <span class="reply">
                <i class="sprites">i>1220
              span>
            div>
          li>
        ul>
      div>
    div>
  div>
  
  <div class="xtx_footer clearfix">
    <div class="wrapper">
      
      <div class="contact clearfix">
        <dl>
          <dt>客户服务dt>
          <dd class="chat">在线客服dd>
          <dd class="feedback">问题反馈dd>
        dl>
        <dl>
          <dt>关注我们dt>
          <dd class="weixin">公众号dd>
          <dd class="weibo">微博dd>
        dl>
        <dl>
          <dt>下载APPdt>
          <dd class="qrcode">
            <img src="./uploads/qrcode.jpg">
          dd>
          <dd class="download">
            <span>扫描二维码span>
            <span>立马下载APPspan>
            <a href="javascript:;">下载页面a>
          dd>
        dl>
        <dl>
          <dt>服务热线dt>
          <dd class="hotline">
            400-0000-000
            <small>周一至周日 8:00-18:00small>
          dd>
        dl>
      div>
    div>
    
    <div class="extra">
      <div class="wrapper">
        
        <div class="slogan">
          <a href="javascript:;" class="price">价格亲民a>
          <a href="javascript:;" class="express">物流快捷a>
          <a href="javascript:;" class="quality">品质新鲜a>
        div>
        
        <div class="copyright">
          <p>
            <a href="javascript:;">关于我们a>
            <a href="javascript:;">帮助中心a>
            <a href="javascript:;">售后服务a>
            <a href="javascript:;">配送与验收a>
            <a href="javascript:;">商务合作a>
            <a href="javascript:;">搜索推荐a>
            <a href="javascript:;">友情链接a>
          p>
          <p>CopyRight © 小兔鲜儿p>
        div>
      div>
    div>
  div>
  
  <div class="xtx-elevator">
    <ul class="xtx-elevator-list">
      <li><a href="javascript:;" data-name="new">新鲜好物a>li>
      <li><a href="javascript:;" data-name="popular">人气推荐a>li>
      <li><a href="javascript:;" data-name="brand">热门品牌a>li>
      <li><a href="javascript:;" data-name="topic">最新专题a>li>
      <li><a href="javascript:;" id="backTop"><i class="sprites">i>顶部a>li>
    ul>
  div>
  <script>
    // 1. 第一大模块,页面滑动可以显示和隐藏
    //  为了防止变量污染  自适应函数  (function(){剪切的内容})();
    (function () {
      // 获取元素
      const elevator = document.querySelector('.xtx-elevator')
      // 1.当页面滚动大于300像素,就显示  电梯导航
      // --------   学了offset之后,页面滚动大于300px再显示就不科学了,我们要让它在出现那个盒子顶部之后就开始显示导航栏  这样一来这个盒子上面的盒子再加或者再减都没有影响了
      const xtx_entry = document.querySelector('.xtx_entry')
      // 2. 给页面添加滚动事件
      window.addEventListener('scroll', function () {
        // 被卷去的头部大于300
        const n = document.documentElement.scrollTop
        /*  if (n >= 300) {
           // opacity里面肯定添加了transition,淡入淡出效果
           elevator.style.opacity = 1
         } else {
           elevator.style.opacity = 0
         } */
        // 三元运算符
        // elevator.style.opacity = n >= 300 ? 1 : 0
        // 这里就不用300了,改为entry.offsetTop,程序就更加自由了,不用担心盒子的上移或者下移,是自动检测的
        elevator.style.opacity = n >= xtx_entry.offsetTop ? 1 : 0
      })

      // 点击返回页面顶部
      // 和上面的滚动没有关系
      const backTop = document.querySelector('#backTop')
      backTop.addEventListener('click', function () {
        // 可读写
        // document.documentElement.scrollTop = 0
        // 另外一种方法:window.scrollTo(x, y)
        // 它们的区别是一个是属性赋值,一个是方法赋值的形式。scrollTo可以x轴滚动也可以y轴滚动
        // window.scrollTo(200, 0)
        // window.scrollTo(0, 200)
        window.scrollTo(0, 0)
      })
    })();
    // 第二第三个模块一起都放到另外一个执行函数里面
    // 因为点击和滚动都有一样的效果
    (function () {
      // 2.(第二个模块)点击页面可以滑动
      // 有很多小li,循环绑定很麻烦,所以我们用事件委托,获取父元素,绑定事件
      const list = document.querySelector('.xtx-elevator-list')
      list.addEventListener('click', function (e) {
        // console.log(11);
        // 在 'A'后面添加 && e.target.dataset.name 是因为点击 顶部 后会报错,而且返回顶部之后向下滑动高亮没有消失  解决办法就是 发现顶部和另外4个小a的区别是 另外4个小a具有自定义属性而 顶部 没有  所以通过选出自定义属性名的方式将 顶部 排除在外  e.target.dataset.name能获取自定义属性名的时候就为真 获得自定义属性名为null的时候就为假 (字符串除了空其它的全为真) 
        if (e.target.tagName === 'A' && e.target.dataset.name) {
          // 排他思想
          /*  // 按照以前的做法: 先移除原来的类active 再在点击的a上面添加active
           // 这样的做法会报错,因为它跟之前的不一样,这个一开始没有固定选定一个a添加active,所以一开始获取active的时候会显示无法获取 active
           // document.querySelector('.xtx-elevator-list .active').classList.remove('active') */
          // 先移除原来的类active
          // 先获取这个带有active的对象
          const old = document.querySelector('.xtx-elevator-list .active')
          // console.log(old)
          // 判断
          // 如果存在就返回这个类名然后移除,如果不存在则返回null,if (old)就为假,就不执行后面的,不会报错
          // 一句话可以不用写大括号
          if (old) old.classList.remove('active')
          // 当前元素添加active
          e.target.classList.add('active')
          // 获得自定义属性  new topic
          // console.log(e.target.dataset)
          // console.log(e.target.dataset.name)
          // 根据小盒子的自定义属性值  去选择  对应的大盒子
          // console.log(document.querySelector(`.xtx_goods_new}`))
          // console.log(document.querySelector(`.xtx_goods_${e.target.dataset.name}`).offsetTop)
          // 获得对应大盒子的 offsetTop
          const top = document.querySelector(`.xtx_goods_${e.target.dataset.name}`).offsetTop
          // 让页面滚动到对应的位置
          document.documentElement.scrollTop = top
        }
      })



      // 3. 页面滚动, 可以根据大盒子选小盒子(new, popular等) 添加 active 类
      window.addEventListener('scroll', function () {
        // 3.1 先移除类  直接复制粘贴
        // 先获取这个带有active的对象
        const old = document.querySelector('.xtx-elevator-list .active'

你可能感兴趣的:(前端,javascript,html)