jQuery第四天案例

最新推荐文章于 2024-10-17 14:16:32 发布

库库好困

最新推荐文章于 2024-10-17 14:16:32 发布

阅读量216

点赞数

分类专栏：四：jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/m0_46597922/article/details/106677501

版权

四：jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

案例-城市选择（jQuery节点操作知识点）

在这里插入图片描述

  <style>
    select {
      width: 200px;
      background-color: teal;
      height: 200px;
      font-size: 20px;
    }

    .btn-box {
      width: 30px;
      display: inline-block;
      vertical-align: top;
    }
  </style>
</head>

<body>
  <h1>城市选择：</h1>
  <select id="src-city" name="src-city" multiple>
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">深圳</option>
    <option value="4">广州</option>
    <option value="5">西红柿</option>
  </select>
  <div class="btn-box">
    <!--实体字符-->
    <button id="btn1"> &gt;&gt; </button>
    <button id="btn2"> &lt;&lt; </button>
    <button id="btn3"> &gt;</button>
    <button id="btn4"> &lt; </button>
  </div>

  <select id="tar-city" name="tar-city" multiple>
  </select>

  <script src="jquery-1.12.4.js"></script>
  <script>

    $(function () {
      // btn1 ==> 做的事情把src-city的所有的option添加到tar-city里面去
      // append()
      $('#btn1').click(function() {
        $('#tar-city').append($('#src-city option'));
      })

      // btn2 ==> 做的事情把tar-city的所有的option添加到src-city里面去
      $('#btn2').click(function() {
        $('#tar-city option').appendTo($('#src-city'));
      })

      // btn3 ==> 做的事情把src-city的所有选中的option添加到tar-city里面去
      // append()
      $('#btn3').click(function() {
        // :checked 单选或多选
        // :selected 下拉框
        // :disabled 禁用的
        $('#tar-city').append($('#src-city option:selected'));
      })

      // btn4 ==> 做的事情把tar-city的所有的option添加到src-city里面去
      $('#btn4').click(function() {
        $('#tar-city option:selected').appendTo($('#src-city'));
      })
    });
  </script>
</body>

案例-固定导航（scrollTop与scrollLeft知识点）

在这里插入图片描述
步骤：

给页面注册scroll
获取页面垂直方向的滚动卷曲距离 y
y 比 topPart的高度大 ==> navBar 固定定位
navBar 固定定位，不占位置，底下的mainPart跑到上面去
解决：给mainPart设置marginTop ==> 10 + navBar的高度，否则，navBar 取消固定定位

    <style>
      * {
        margin: 0;
        padding: 0;
      }

      img {
        vertical-align: top;
        width: 100%;
      }

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

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

  <body>
    <div class="top" id="topPart">
      <img src="images/top.png" alt="" />
    </div>
    <div class="nav" id="navBar">
      <img src="images/nav.png" alt="" />
    </div>
    <div class="main" id="mainPart">
      <img src="images/main.png" alt="" />
    </div>
    <script src="../jquery-1.12.4.js"></script>
    <script>
      $(function () {
        //  步骤：
        //  1. 给页面注册scroll
        //  2. 获取页面垂直方向的滚动卷曲距离 y
        //  3. y 比 topPart的高度大 ==> navBar 固定定位
        //           navBar 固定定位，不占位置，底下的mainPart跑到上面去
        //           解决：给mainPart设置marginTop ==> 10 + navBar的高度
        //        否则，navBar 取消固定定位

        var $topPart = $('#topPart')
        var $navBar = $('#navBar')
        var $mainPart = $('#mainPart')

        $(window).scroll(function () {
          var y = $(window).scrollTop()
          //   console.log(y)
          if (y >= $topPart.height()) {
            //  固定定位
            $navBar.addClass('fixed')

            // 解决
            $mainPart.css('marginTop', 10 + $navBar.height())
          } else {
            //   取消固定定位
            $navBar.removeClass('fixed')

            // 恢复原本的间距10
            $mainPart.css('marginTop', 10)
          }
        })
      })
    </script>
  </body>

案例-小火箭返回顶部（scrollTop与scrollLeft知识点）

在这里插入图片描述

    <style>
      body {
        height: 8000px;
      }

      a {
        color: #fff;
      }

      .actGotop {
        position: fixed;
        bottom: 50px;
        right: 50px;
        width: 150px;
        height: 195px;
        display: none;
        z-index: 100;
      }

      .actGotop a,
      .actGotop a:link {
        width: 150px;
        height: 195px;
        display: inline-block;
        background: url(images/gotop.png) no-repeat;
        outline: none;
      }

      .actGotop a:hover {
        width: 150px;
        height: 195px;
        background: url(images/gotop.gif) no-repeat;
        outline: none;
      }
    </style>
  </head>

  <body>
    <!-- 返回顶部小火箭 -->
    <div class="actGotop"><a href="javascript:;" title="Top"></a></div>

    <script src="jquery-1.12.4.js"></script>
    <script>
      $(function () {
        // 功能：
        // 1. 通过滚动来控制小火箭的显示与隐藏

        var $actGotop = $('.actGotop')

        $(window).scroll(function () {
          var y = $(window).scrollTop()

          if (y >= 1500) {
            // 小火箭显示
            $actGotop.stop().fadeIn(1000)
          } else {
            $actGotop.stop().fadeOut(1000)
          }
        })

        // 2. 点击小火箭缓慢的返回顶部
        $actGotop.click(function () {
          // 返回顶部，但是没有缓慢的动画效果
          // $(window).scrollTop(0)
          // 这样不行，没有返回顶部的功能
          // 是给window做动画，修改scrollTop，不行的，
          // 因为window没有scrollTop
          /* $(window).animate(
            {
              scrollTop: 0,
            },
            2000
          ) */
          // webapi阶段：获取页面滚动卷曲距离
          // window.pageYOffset ||
          //   document.documentElement.scrollTop ||
          //   document.body.scrollTop

          // window.pageYOffset 只读属性， 只能读取，设置无效
          // document.documentElement ==> html
          // document.body ==> body
          /* $(document.documentElement).animate(
            {
              scrollTop: 0,
            },
            1000
          ) */

          // 写上html,body 目的是为了更好的兼容更多浏览器
          $('html, body').animate(
            {
              scrollTop: 0,
            },
            1000
          )
        })
      })
    </script>
  </body>

案例-弹幕效果（jQuery事件对象知识点）

在这里插入图片描述
步骤：

找对象（text、btn/ boxDom）
给btn注册click
获取text的内容
创建span元素,给span设置内容为text的内容
往boxDom中添加span
给span设置随机颜色 ==> 从colors随机取
随机设置span的top ==> 可视区高度的一半
设置span的left
做动画运动去左边 left
当span运动结束的时候，把span移除掉

    <style type="text/css">
      html,
      body {
        margin: 0px;
        padding: 0px;
        width: 100%;
        height: 100%;
        font-family: '微软雅黑';
        font-size: 62.5%;
      }

      .boxDom {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
      }

      .idDom {
        width: 100%;
        height: 100px;
        background: #666;
        position: fixed;
        bottom: 0px;
      }

      .content {
        display: inline-block;
        width: 430px;
        height: 40px;
        position: absolute;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
        margin: auto;
      }

      .title {
        display: inline;
        font-size: 4em;
        vertical-align: bottom;
        color: #fff;
      }

      .text {
        border: none;
        width: 300px;
        height: 30px;
        border-radius: 5px;
        font-size: 2.4em;
      }

      .btn {
        width: 60px;
        height: 30px;
        background: #f90000;
        border: none;
        color: #fff;
        font-size: 2.4em;
      }

      span {
        width: 300px;
        height: 40px;
        position: absolute;
        overflow: hidden;
        color: #000;
        font-size: 4em;
        line-height: 1.5em;
        cursor: pointer;
        white-space: nowrap;
      }
    </style>
  </head>

  <body>
    <div class="boxDom" id="boxDom">
      <div class="idDom" id="idDom">
        <div class="content">
          <p class="title">吐槽:</p>
          <input type="text" class="text" id="text" />
          <button type="button" class="btn" id="btn">发射</button>
        </div>
      </div>
    </div>
  </body>

  <script src="jquery-1.12.4.js"></script>
  <script>
    $(function () {
    
      var $boxDom = $('#boxDom')
      var $text = $('#text')
      var $btn = $('#btn')

      // 随机的颜色数组
      var colors = [
        'red',
        'green',
        'hotpink',
        'pink',
        'cyan',
        'yellowgreen',
        'purple',
        'deepskyblue',
      ]

      // 2.
      $btn.on('click', function () {
        // 3.
        var str = $text.val().trim()
        // 清空文本框内容
        $text.val('')

        // 判断是否有内容
        if (str.length === 0) {
          return
        }

        // 4.
        var $newSpan = $('<span>' + str + '</span>')

        // 5.
        $boxDom.append($newSpan)

        // 6.
        // 先根据数组的长度取随机下标
        var idx = parseInt(Math.random() * colors.length) // Math.random() ==> [0, 1)
        // console.log(idx, colors[idx]);

        // 随机top
        var randomTop = parseInt((Math.random() * $(window).height()) / 2)

        $newSpan.css({
          color: colors[idx],
          left: $(window).width(),
          top: randomTop,
        })

        // 9.
        $newSpan.animate(
          {
            left: -$newSpan.width(),
          },
          8000,
          'linear',
          function () {
            $newSpan.remove()
          }
        )
      })

      // 添加回车发布功能
      $text.on('keydown', function (e) {
        // 判断按键是否为回车
        var code = e.keyCode

        if (code === 13) {
          // 发布 ==> 触发按钮的点击功能
          $btn.click()
        }
      })
    })
  </script>

钢琴案例（加强版）-支持键盘（jQuery事件对象知识点）

在这里插入图片描述

    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .nav {
            width: 700px;
            height: 60px;
            background-color: black;
            margin: 0 auto;
        }

        .maps {
            width: 700px;
            text-align: center;
        }

        .maps img {
            width: 80%;
            margin-top: 30px;
        }

        .nav li {
            width: 100px;
            height: 60px;
            /*border: 1px solid yellow;*/
            float: left;
            position: relative;
            overflow: hidden;
        }

        .nav a {
            position: absolute;
            width: 100%;
            height: 100%;
            font-size: 24px;
            color: blue;
            text-align: center;
            line-height: 60px;
            text-decoration: none;
            z-index: 2;
        }

        .nav span {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: yellow;
            top: 60px;
        }
    </style>
</head>

<body>
    <div class="nav">
        <ul>
            <li>
                <a href="javascript:void(0);">导航1</a>
                <span></span>
            </li>
            <li><a href="javascript:void(0);">导航2</a><span></span></li>
            <li><a href="javascript:void(0);">导航3</a><span></span></li>
            <li><a href="javascript:void(0);">导航4</a><span></span></li>
            <li><a href="javascript:void(0);">导航5</a><span></span></li>
            <li><a href="javascript:void(0);">导航6</a><span></span></li>
            <li><a href="javascript:void(0);">导航7</a><span></span></li>
        </ul>
        <div class="maps">
            <img src="1.jpg" alt="">
        </div>
        <div class="mp3">
            <audio src="mp3/1.mp3"></audio>
            <audio src="mp3/2.mp3"></audio>
            <audio src="mp3/3.mp3"></audio>
            <audio src="mp3/4.mp3"></audio>
            <audio src="mp3/5.mp3"></audio>
            <audio src="mp3/6.mp3"></audio>
            <audio src="mp3/7.mp3"></audio>
        </div>
    </div>
    <script src="../jquery-1.12.4.js"></script>
    <script>
        $(function () {
            var index = 0;
            var arrs = ["1.jpg", "2.jpg", "3.jpg"];
            $(".maps img").click(function () {
                index++;
                if (index === arrs.length) {
                    index = 0;
                }
                $(this).attr("src", arrs[index])
            })

            // 给nav下的所有的li注册mouseenter事件， 让当前li下的span做自定义动画，top=0，播放对应的音频
            // 给nav下的所有的li注册mouseleave事件， 让当前li下的span做自定义动画，top=60

            $(".nav li").mouseenter(function () {
                // stop() 保证停止当前正在执行的动画，让添加的动画立即执行
                $(this).children("span").stop().animate({ top: 0 });

                // 找到当前元素的下标
                var idx = $(this).index();

                // 添加音乐的播放
                // play 方法是H5提供的，jq并没有封装对应的方法，所以需要将jq对象转成dom对象
                // 需让让鼠标经过的时候，重新开启这个音频文件的播放
                // load 方式是H5提供的，让当前资源重新去加载。
                $(".mp3 audio").get(idx).load();
                $(".mp3 audio").get(idx).play();
            })

            $(".nav li").mouseleave(function () {
                // stop() 保证停止当前正在执行的动画，让添加的动画立即执行
                $(this).children("span").stop().animate({ top: 60 });
            })

            // 绑定键盘事件
            // 实现思路：
            //  给键盘数字1-7注册keydown，触发对应的nav的li的mouseenter
            //  给键盘数字1-7注册keyup，触发对应的nav的li的mouseleave

            // 默认可以被触发keydown事件
            var flag = true;

            $(document).keydown(function (e) {
                // 在谷歌浏览器上，一直摁住键盘不会，会不停的触发keydown事件
                // 如何解决这个问题？？？

                if (flag) {
                    // 当事件被执行的时候，立即让flag变为false
                    flag = false;

                    // 当键盘摁下的时候，keydown事件被触发，只能触发一次，节流阀
                    console.log(e.keyCode);
                    var keyCode = e.keyCode;

                    // 更简洁的方法去实现
                    if (keyCode <= 55 && keyCode >= 49) {
                        // 说明按键是数字1-7
                        // 这个index就是li的下标
                        var index = keyCode - 49;

                        // 找到对应下标的li，触发mouseenter事件
                        $(".nav li").eq(index).trigger("mouseenter");
                    }

                    /*switch(keyCode){
                        case 49:
                            // 数字1
                            // $(".nav li").eq(0).mouseenter();
                            $(".nav li").eq(0).trigger("mouseenter");
                        break;
                        case 50:
                            // 数字2
                            $(".nav li").eq(1).trigger("mouseenter");
                        break;
                        default:
                            
                        break;
                    };*/
                }


            });

            // 注册键盘弹起事件
            $(document).keyup(function (e) {
                // 目的是当keyup的时候，重新将flag变成true，让下一次的keydown可以使用
                flag = true;

                var keyCode = e.keyCode;

                // 更简洁方式去实现功能
                if (keyCode <= 55 && keyCode >= 49) {
                    // 键盘码就是数字1-7

                    // index 就是li对应的下标
                    var index = keyCode - 49;

                    // 找到对应下标的li，去触发他的mouseleave事件
                    $(".nav li").eq(index).trigger("mouseleave");
                }

                /*switch(keyCode){
                    case 49:
                        $(".nav li").eq(0).trigger("mouseleave");
                    break;
                    case 50:
                        // 数字2
                        $(".nav li").eq(1).trigger("mouseleave");
                    break;
                };*/
            })

        })
    </script>
</body>