WebAPIs-day5

已于 2022-05-05 17:29:06 修改
阅读量350 收藏
点赞数
分类专栏： Web API实用案例 文章标签： javascript 前端
于 2022-05-04 19:03:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JOUKELOVE/article/details/124529318
版权

DOM-网页特效篇

文章目录

案例-手风琴效果

原来是五个一样的矩形框，鼠标经过之后出现详细图，鼠标离开之后恢复原状
在这里插入图片描述

在这里插入图片描述

<!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 有默认宽度是 240像素
  // 2. 鼠标经过模块 
  // 当我们鼠标经过， 当前小li 宽度变大成800px 其余的小li 变为100px
  // 3. 鼠标离开模块 所有的小li 都要复原 宽度变为240px

  // (1) 获取元素
  let lis = document.querySelectorAll('li')
  // (2) 给所有的小li绑定鼠标经过和离开事件
  for (let i = 0; i < lis.length;i++) {
  // （3）鼠标经过
  lis[i].addEventListener('mouseenter',function(){
    // 排他思想  干掉所有人 复活我自己
    for (let j = 0; j < lis.length; j++){
      lis[j].style.width = '100px'
    }
    this.style.width = '800px'
  })
  // （4）鼠标离开
  lis[i].addEventListener('mouseleave',function(){
    for (let j = 0; j < lis.length; j++){
      lis[j].style.width = '240px'
    }
  })
  }
</script>

</html>

一、滚动和加载事件

目标：掌握新的事件，做更强交互

1.滚动事件

在这里插入图片描述

知识点补充：
overflow: auto;
//如果内容被修剪,则浏览器会显示滚动条,以便查看其余内容
加入前：
在这里插入图片描述
加入后：
在这里插入图片描述

2.加载事件

load加载有的时候实在太慢，实际开发中可能少用
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、元素大小和位置

在这里插入图片描述

1. scroll家族

在这里插入图片描述
scrollWidth和scrollHeight获取的宽高是盒子里具体内容的宽高，而非盒子的宽高

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
获得的被卷去头部距离是一个数字，没有单位的

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

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 3000px;
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .content {
            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;
        }
    </style>
</head>

<body>
    <div class="content"></div>
    <div class="backtop">
        <img src="./images/close2.png" alt="">
        <a href="javascript:;"></a>
    </div>
    <script>
        // 获取元素
        let backtop = document.querySelector('.backtop')
        let back = document.querySelector('.backtop a')
        // 1. 页面滚动事件
         window.addEventListener('scroll',function(){
        // 2. 页面检测滚动的距离
        let num = document.documentElement.scrollTop
        if(num >= 500 ) {
            // 3. 显示返回顶部的元素
            backtop.style.display = 'block'
        } else {
            backtop.style.display = 'none'
        }
        
        })

        // 点击链接返回顶部 
        back.addEventListener('click',function(){
            // 返回顶部 scrollTop可读写
            document.documentElement.scrollTop = 0
        })
    </script>
</body>

</html>

2. offset家族

在这里插入图片描述
offset得到的是盒子的大小，盒子元素的大小=盒子本身的宽度和高度 + padding + border

在这里插入图片描述
在这里插入图片描述

案例-京东固定导航栏

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

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

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

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

        .header {
            position: fixed;
            top: -80px; //先设置top值为-80px这样导航栏就会在外面
            // 后面设置当滚动距离满足条件时，再给导航栏的top值修改为0，由此实现导航栏滑入的效果
            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>

        // 1. 页面滚动事件
        let sk = document.querySelector('.sk')
        let hd = document.querySelector('.header')
        window.addEventListener('scroll',function(){
            let num = document.documentElement.scrollTop
            
            // 2. 要检测滚动的距离 >= 秒杀模块的offsetTop 则滑入
            if (num >= sk.offsetTop) {
                hd.style.top = '0'
            } else {
                hd.style.top = '-80px'
            }
        })
    </script>
</body>

</html>

案例-电梯导航

在这里插入图片描述

<!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;
        }

        .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. 获取元素
        let items = document.querySelectorAll('.item')
        // 内容的盒子获取
        let contents = document.querySelectorAll('.content div')
        // 2. 左侧aside 模块 点击谁，谁就高亮
        for (let i = 0; i < items.length;i++) {
            items[i].addEventListener('click',function(){
                // 找到上一个active 移除类
                document.querySelector('.aside .active').classList.remove('active')
                
                // 点击谁 谁添加类
                this.classList.add('active')
                // 3. 右侧内容跟随走动  让页面滚动到对应的offsetTop值位置
                document.documentElement.scrollTop = contents[i].offsetTop
            })
        }

    </script>
</body>

</html>

3. client家族

在这里插入图片描述
clientLeft和clientTop用的极少，知道就可以
在这里插入图片描述
用client获取实时的窗口宽度，再用if 对宽度进行层次划分，不同的宽度阶段会有不同的背景色
在这里插入图片描d

在这里插入图片描述

综合案例-焦点图

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
关于需求8开启定时器和关闭定时器的知识点： 再开启定时器时，需要写出完整的代码才能运行

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


    .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>
    // 轮播图开始
    // 需求1：小图标鼠标经过事件
    // 鼠标经过小图片，当前高亮，其余兄弟变淡 添加类
    // 获取元素
    let lis = document.querySelectorAll('.indicator li')
    let piclis = document.querySelectorAll('.slides ul li')
    let text = document.querySelector('.extra h3')
    let next = document.querySelector('.extra .next')
    let prev = document.querySelector('.extra .prev')
    let main = document.querySelector('.main')
    // let txt = document.querySelectorAll('.extra h3')

    for (let i = 0; i < lis.length;i++) {
        lis[i].addEventListener('mouseenter',function(){
            // 找到上一个active 移除类
            document.querySelector('.indicator .active').classList.remove('active')
            
            // 点击谁 谁添加类
            this.classList.add('active')
            
            // 需求2  大图片跟随变化 一定要放在鼠标经过事件里面
            // 对应的大图片跟着显示，如果想要过渡效果，可以使用opacity效果
            // 可以利用CSS淡入淡出的效果，还是添加类
            // 选出唯一的那个active， 删除类
            document.querySelector('.slides ul .active').classList.remove('active')
            // 对应序号的那个li 加上active 这个类
            piclis[i].classList.add('active')
            // 修改文字信息
            text.innerHTML = `这是第${i + 1}张图片的描述信息`

            // 需求4  解决一个BUG
            // 点击右侧按钮可以实现播放下一张，但是鼠标经过前面的，播放就会乱序
            // 解决方案：让变化量（索引号）重新赋值为 当前鼠标经过的索引号
            // 鼠标经过了哪个小li 他的索引号就是i
            // 右侧按钮是通过 index 来控制播放的
            index = i
            
        })
        
    }
    
    // 需求3  右侧按钮播放效果
            // 点击右侧按钮， 可以自动播放下一张图片
            
            // 需要一个变化量 index不断自增
            // 然后播放下一张图片
            // 如果到了最后一张， 必须要还原为第1张图片
            // 教你一招： 索引号=索引号%数组长度（放到播放前面）
            let index = 0  // 全局变量 信号量 控制器 为了给 右侧按钮和左侧按钮同时使用
            next.addEventListener('click',function(){
              index++
              // 选出 index 小图片 做操作
              // if(index === lis.length) {
              //   index = 0
              // }
              index = index % lis.length // 一种代替上面if的很特别的写法，利用余量计算去判断index的数值
              common()
            })
 
    
    
    // 需求5  
            // 点击左侧按钮， 可以自动播放上一张图片
            // 需要一个变化量 index不断自减
            // 然后播放上一张图片
            // 如果到了第一张， 必须要从最后一张图片播放
            // 教你一招： 索引号 = （索引号 + 数组长度）% 数组长度
            prev.addEventListener('click',function(){
              index--
              
              // 当图片在第一张时，点击左键能到达第十张
              if(index < 0) {
                index = lis.length - 1
              }
              common()
            })

    // 需求6
            // 因为左侧按钮和右侧按钮里面有大量相同的操作，可以抽取这些操作封装一个函数common
            function common() {
              document.querySelector('.indicator .active').classList.remove('active')
              lis[index].classList.add('active')
              // 选出 index 大图片 做操作
              document.querySelector('.slides ul .active').classList.remove('active')
              piclis[index].classList.add('active')
              text.innerHTML = `这是第${index + 1}张图片的描述信息`
            }

    // 需求7 开启定时器
            // 其实定时器自动播放，就相当于点击了右侧按钮，此时只需要，next.click()
            let timer = setInterval(function(){
              // 自动调用右侧按钮的点击事件
              next.click()
            },1000)

    // 需求8
            // 鼠标经过停止定时器（清除定时器）
            main.addEventListener('mouseenter',function(){
              clearInterval(timer)
            })
            // 鼠标离开开启定时器（开启定时器）
            main.addEventListener('mouseleave',function(){
              // 重新开启定时器需要再输入完整代码
              timer = setInterval(function(){
              // 自动调用右侧按钮的点击事件
              next.click()
            },1000)
            })
</script>
</body>

</html>
Rookie_wbe
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【前端小实战】实现手风琴特效
qq_53569667的博客
01-21 1265
jQuery 实现手风琴特效
jQuery设置网站首页手风琴特效(1+X Web前端开发初级 例题)
黛琳ghz的博客，期待你的关注。
04-22 1542
jQuery设置手风琴特效(1+X Web前端开发初级 例题)
2024年最新手风琴效果（vue实现）(1)，2024年最新高级web面试题
2401_84616838的博客
05-15 392
总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】.list {{{item}}toggle() 方法切换元素的可见状态。如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。
Web前端之实现手风琴效果
晚风挽着浮云的博客
03-06 2214
源代码如下所示：如要复制，记得换图哦！ <!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"&gt
web前端页面开发（HTML+CSS+javascript）案例2：HTML+CSS+js实现手风琴效果
123加油的博客
05-09 2235
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"> <titl
webapi手风琴案例
m0_62720752的博客
08-24 119
webapi手风琴案例，当经过图片时改变li的大小。
10几款网页图片手风琴效果代码
weixin_30724853的博客
07-21 786
简单的jquery手风琴插件带标题的水平手风琴图片轮换代码 jQuery CSS3水平滑动手风琴文字图片切换特效代码 jquery水平滑动手风琴菜单鼠标点击图片展示手风琴菜单代码 jquery手风琴相册幻灯片图片横向滚动展开收缩代码 jquery手风琴菜单制作横向菜单切换手风琴效果代码 jquery动漫人物网的横向手风琴切换...
网页特效之手风琴
初阶农民工的博客
08-29 1299
效果:使用动画，当鼠标经过某张图片，该图片(容器)宽度变大显示，其他图片宽度缩小显示。 关键知识：动画基本原理：盒子目标位置 = 盒子本身位置 + 步长具体代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;title&gt;手风琴效
几个网页手风琴效果分析
魔侠的沙滩
05-04 1788
都来自w3cfuns 第一个 jQuery+Css3实现手风琴 body{padding:0;margin:0;font:normal 14px/24px "\5FAE\8F6F\96C5\9ED1";color:#333;} ul,li{padding:0;margin:0} img{border:none;vertical-align:top;} li{list-styl
纯CSS实现手风琴效果
webdev
02-23 2451
今天来看一个使用hover触发的一个手风琴效果，鼠标hover时改变图像宽度，配合transition实现动画，效果如下图所示。大家也可以到我的codepen在线编辑、下载收藏。 感谢TheCodePlayer的图片和灵感。 下面来看看html，我们用ul、li来布局案例，我们需要一个图像盒子和一个图像描述的盒子。 &lt;div class="accordian"&gt; &...
web超轻量级手风琴效果，基于jquery，可批量生产，构造函数
powerFulCat的博客
08-13 89
css .box{border:1px solid #333;width:700px;height:500px;position:relative;overflow:hidden;} .box img{height:100%;width:100%;position:absolute;left: 0;top:0;transition: all 0.5s;} html <div class="box"></div> <script src="./static/jquery2.1.
手风琴特效
weixin_45354240的博客
07-03 219
在这里插入代码片 ```<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Docume...
前端--手风琴效果
LLLigj博客
01-01 4152
缓动动画 .js/** * Created by Lenovo on 2016/9/11. */ function show(ele){ ele.style.display = "block"; }/** * 获取元素样式兼容写法 * @param ele * @param attr * @returns {*} */ function getStyle(ele,attr){
简单的手风琴JS效果实现
蜗牛专栏
05-17 7423
简单的手风琴JS效果实现
手风琴效果
小森呀
06-29 1732
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>手风琴</title> <style type="text/css"> *{ margin: 0; padding: 0; } .bg{ ...
JavaScript - WebAPI - 动画 - 案例 - 手风琴图
Henry_ID的博客
08-14 184
<!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" /&gt
JavaScript青少年简明教程：函数及其相关知识（下）
cnds123的专栏
07-26 648
JavaScript青少年简明教程：函数及其相关知识（下）
VUE3自定义指令防止重复点击多次提交
最新发布
MadSnail00的博客
07-30 72
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
精通RESTful Web APIs设计
"RESTful Web APIs 是一本由 Leonard Richardson 和 Mike Amundsen 合著，并由 Sam Ruby 撰写前言的专业书籍，专注于探讨如何设计和实现高效、优雅的 RESTful Web API。这本书受到了业界专家的高度评价，被认为是对 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值