jQuery初识 - jQuery案例练习

jQuery事件委托

  1. 什么是事件委托

​ 请别人帮忙做事情,然后将做完的结果反馈给我们

在jQuery中,如果通过核心函数找到的元素不止一个,那么在添加事件的时候,jQuery会遍历所有找到的元素,给所有找到的元素添加事件。

jQuery移入移出事件

mouseover/mouseout事件,子元素被移入移出也会触发父元素的事件

mouseenter/mouserleave事件,子元素被移入移出不会触发父元素的事件(推荐使用)

电影排行榜案例



<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>35-电影排行榜下title>
    <style>
      * {
      
        margin: 0;
        padding: 0;
      }
      .box {
      
        width: 300px;
        height: 450px;
        margin: 50px auto;
        border: 1px solid #000;
      }
      .box > h1 {
      
        font-size: 20px;
        line-height: 35px;
        color: deeppink;
        padding-left: 10px;
        border-bottom: 1px dashed #ccc;
      }
      ul > li {
      
        list-style: none;
        padding: 5px 10px;
        border: 1px dashed #ccc;
      }
      ul > li:nth-child(-n + 3) span {
      
        background: deeppink;
      }
      ul > li > span {
      
        display: inline-block;
        width: 20px;
        height: 20px;
        background: #ccc;
        text-align: center;
        line-height: 20px;
        margin-right: 10px;
      }
      .content {
      
        overflow: hidden;
        margin-top: 5px;
        display: none;
      }
      .content > img {
      
        width: 80px;
        height: 120px;
        float: left;
      }
      .content > p {
      
        width: 180px;
        height: 120px;
        float: right;
        font-size: 12px;
        line-height: 20px;
      }
      .current .content {
      
        display: block;
      }
    style>
    <script src="jquery-1.12.4.js">script>
    <script>
      // 编写jQuery代码
      $(function () {
      
        /*
        // 1. 监听鼠标移入事件
        $("li").mouseenter(function () {
          $(this).addClass("current");
        });

        // 2. 监听鼠标移出事件
        $("li").mouseleave(function () {
          $(this).removeClass("current");
        });
        */

        $("li").hover(
          function () {
      
            $(this).addClass("current");
          },
          function () {
      
            $(this).removeClass("current");
          }
        );
      });
    script>
  head>
  <body>
    <div class="box">
      <h1>电影排行榜h1>
      <ul>
        <li>
          <span>1span>电影名称
          <div class="content">
            <img src="images/ysqwl.jpg" alt="" />
            <p>
              天圣八年,岁在庚午。是夜,许府中,下人发现员外离奇倒地身亡。前来寻员外的许夫人神情呆滞,居然同一美艳女子在屋内翩翩起舞。曲终,此女在众人眼前瞬间消失。怪事一出,开封府派捕快拾生破案。拾生发现许员外竟是中毒而亡,而后从夫人处得知那女子的身世,她就是二十二年前听雨楼中名噪一时的歌妓谢晓菀,但已故去多年。
              调查陷入僵局,一切线索都直指谢晓菀,拾生毫无头绪。为安抚民心,他打算快速侦破案件,遂入隐市向白青萝求助。药婆白青萝有一个灵鼻子,它能闻辨百毒,拾生想借此“闻香探案”。
              避世多时的白青萝会轻易同意吗?许府里又藏着怎样的秘密......
            p>
          div>
        li>
        <li>
          <span>2span>电影名称
          <div class="content">
            <img src="images/ysqwl.jpg" alt="" />
            <p>
              天圣八年,岁在庚午。是夜,许府中,下人发现员外离奇倒地身亡。前来寻员外的许夫人神情呆滞,居然同一美艳女子在屋内翩翩起舞。曲终,此女在众人眼前瞬间消失。怪事一出,开封府派捕快拾生破案。拾生发现许员外竟是中毒而亡,而后从夫人处得知那女子的身世,她就是二十二年前听雨楼中名噪一时的歌妓谢晓菀,但已故去多年。
              调查陷入僵局,一切线索都直指谢晓菀,拾生毫无头绪。为安抚民心,他打算快速侦破案件,遂入隐市向白青萝求助。药婆白青萝有一个灵鼻子,它能闻辨百毒,拾生想借此“闻香探案”。
              避世多时的白青萝会轻易同意吗?许府里又藏着怎样的秘密......
            p>
          div>
        li>
        <li>
          <span>3span>电影名称
          <div class="content">
            <img src="images/ysqwl.jpg" alt="" />
            <p>
              天圣八年,岁在庚午。是夜,许府中,下人发现员外离奇倒地身亡。前来寻员外的许夫人神情呆滞,居然同一美艳女子在屋内翩翩起舞。曲终,此女在众人眼前瞬间消失。怪事一出,开封府派捕快拾生破案。拾生发现许员外竟是中毒而亡,而后从夫人处得知那女子的身世,她就是二十二年前听雨楼中名噪一时的歌妓谢晓菀,但已故去多年。
              调查陷入僵局,一切线索都直指谢晓菀,拾生毫无头绪。为安抚民心,他打算快速侦破案件,遂入隐市向白青萝求助。药婆白青萝有一个灵鼻子,它能闻辨百毒,拾生想借此“闻香探案”。
              避世多时的白青萝会轻易同意吗?许府里又藏着怎样的秘密......
            p>
          div>
        li>
        <li>
          <span>4span>电影名称
          <div class="content">
            <img src="images/ysqwl.jpg" alt="" />
            <p>
              天圣八年,岁在庚午。是夜,许府中,下人发现员外离奇倒地身亡。前来寻员外的许夫人神情呆滞,居然同一美艳女子在屋内翩翩起舞。曲终,此女在众人眼前瞬间消失。怪事一出,开封府派捕快拾生破案。拾生发现许员外竟是中毒而亡,而后从夫人处得知那女子的身世,她就是二十二年前听雨楼中名噪一时的歌妓谢晓菀,但已故去多年。
              调查陷入僵局,一切线索都直指谢晓菀,拾生毫无头绪。为安抚民心,他打算快速侦破案件,遂入隐市向白青萝求助。药婆白青萝有一个灵鼻子,它能闻辨百毒,拾生想借此“闻香探案”。
              避世多时的白青萝会轻易同意吗?许府里又藏着怎样的秘密......
            p>
          div>
        li>
        <li>
          <span>5span>电影名称
          <div class="content">
            <img src="images/ysqwl.jpg" alt="" />
            <p>
              天圣八年,岁在庚午。是夜,许府中,下人发现员外离奇倒地身亡。前来寻员外的许夫人神情呆滞,居然同一美艳女子在屋内翩翩起舞。曲终,此女在众人眼前瞬间消失。怪事一出,开封府派捕快拾生破案。拾生发现许员外竟是中毒而亡,而后从夫人处得知那女子的身世,她就是二十二年前听雨楼中名噪一时的歌妓谢晓菀,但已故去多年。
              调查陷入僵局,一切线索都直指谢晓菀,拾生毫无头绪。为安抚民心,他打算快速侦破案件,遂入隐市向白青萝求助。药婆白青萝有一个灵鼻子,它能闻辨百毒,拾生想借此“闻香探案”。
              避世多时的白青萝会轻易同意吗?许府里又藏着怎样的秘密......
            p>
          div>
        li>
        <li>
          <span>6span>电影名称
          <div class="content">
            <img src="images/ysqwl.jpg" alt="" />
            <p>
              天圣八年,岁在庚午。是夜,许府中,下人发现员外离奇倒地身亡。前来寻员外的许夫人神情呆滞,居然同一美艳女子在屋内翩翩起舞。曲终,此女在众人眼前瞬间消失。怪事一出,开封府派捕快拾生破案。拾生发现许员外竟是中毒而亡,而后从夫人处得知那女子的身世,她就是二十二年前听雨楼中名噪一时的歌妓谢晓菀,但已故去多年。
              调查陷入僵局,一切线索都直指谢晓菀,拾生毫无头绪。为安抚民心,他打算快速侦破案件,遂入隐市向白青萝求助。药婆白青萝有一个灵鼻子,它能闻辨百毒,拾生想借此“闻香探案”。
              避世多时的白青萝会轻易同意吗?许府里又藏着怎样的秘密......
            p>
          div>
        li>
      ul>
    div>
  body>
html>

TAB选项卡案例



<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>38-TAB选项卡终极title>
    <style>
      * {
      
        margin: 0;
        padding: 0;
      }
      .box {
      
        width: 440px;
        height: 298px;
        border: 1px solid #000;
        margin: 50px auto;
      }
      .nav {
      
        height: 50px;
      }
      .nav > li {
      
        list-style: none;
        width: 110px;
        height: 50px;
        background: orange;
        text-align: center;
        line-height: 50px;
        float: left;
      }
      .nav > .current {
      
        background: #ccc;
      }
      .content li {
      
        list-style: none;
        width: 440px;
        height: 250px;
        display: none;
      }
      /* .content li div {
        width: 440px;
        height: 250px;
        display: none;
      } */
      .content .show {
      
        display: block;
      }
    style>
    <script src="jquery-1.12.4.js">script>
    <script>
      // 编写jQuery代码
      $(function () {
      
        // 1. 监听选项卡的移入事件
        $(".nav>li").mouseenter(function () {
      
          // 1.1 修改被移入选项卡的背景颜色
          $(this).addClass("current");
          // 1.2 还原其他兄弟选项卡的背景颜色
          $(this).siblings().removeClass("current");
          // 1.3 获取当前移入选项卡的索引
          var $index = $(this).index();
          // 1.4 根据索引找到对应的图片
          var $li = $(".content li").eq($index);
          // 1.5 隐藏非当前的其他图片
          $li.siblings().removeClass("show");
          // 1.6 显示找到的图片
          $li.addClass("show");
        });
      });
    script>
  head>
  <body>
    <div class="box">
      <ul class="nav">
        <li class="current">H5+C3li>
        <li>jQueryli>
        <li>C语言li>
        <li>Go语言li>
      ul>
      <ul class="content">
        <li class="show" style="background: red;">li>
        <li style="background: blue;">li>
        <li style="background: yellow;">li>
        <li style="background: green;">li>
      ul>
    div>
  body>
html>

jQuery显示和隐藏动画


<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>39-jQuery显示和隐藏动画title>
    <style>
      * {
      
        margin: 0;
        padding: 0;
      }
      div {
      
        width: 200px;
        height: 200px;
        background: red;
        display: none;
      }
    style>
    <script src="jquery-1.12.4.js">script>
    <script>
      // 编写jQuery代码
      $(function () {
      
        $("button")
          .eq(0)
          .click(function () {
      
            // $("div").css("display", "block");
            $("div").show(1000, function () {
      
              alert("显示动画执行完毕");
            });
          });
        $("button")
          .eq(1)
          .click(function () {
      
            // $("div").css("display", "none");
            $("div").hide(1000, function () {
      
              alert("隐藏动画执行完毕");
            });
          });
        $("button")
          .eq(2)
          .click(function () {
      
            $("div").toggle(1000, function () {
      
              alert("切换完毕");
            });
          });
      });
    script>
  head>
  <body>
    <button>显示button>
    <button>隐藏button>
    <button>切换button>
    <div>div>
  body>
html>

jQuery展开和收起动画



<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>41-jQuery 展开和收起动画title>
    <style>
      * {
      
        margin: 0;
        padding: 0;
      }
      div {
      
        width: 100px;
        height: 300px;
        background: red;
        display: none;
      }
    style>
    <script src="jquery-1.12.4.js">script>
    <script>
      // 编写jQuery代码
      $(function () {
      
        $("button")
          .eq(0)
          .click(function () {
      
            $("div").slideDown(1000, function () {
      
              alert("展开完毕");
            });
          });
        $("button")
          .eq(1)
          .click(function () {
      
            $("div").slideUp(1000, function () {
      
              alert("收起完毕");
            });
          });
        $("button")
          .eq(2)
          .click(function () {
      
            $("div").slideToggle(1000, function () {
      
              alert("切换完毕");
            });
          });
      });
    script>
  head>
  <body>
    <button>展开button>
    <button>收起button>
    <button>切换button>
    <div>div>
  body>
html>

折叠菜单



<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>43-折叠菜单下title>
    <style>
      * {
      
        margin: 0;
        padding: 0;
      }
      .nav {
      
        list-style: none;
        width: 300px;
        margin: 100px auto;
      }
      .nav > li {
      
        border: 1px solid #000;
        line-height: 35px;
        border-bottom: none;
        text-indent: 2rem;
        position: relative;
      }
      .nav > li:last-child {
      
        border-bottom: 1px solid #000;
        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 5px;
      }
      .nav > li:first-child {
      
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
      }
      .nav > li > span {
      
        display: inline-block;
        width: 32px;
        height: 32px;
        text-align: center;
        line-height: 32px;
        position: absolute;
        right: 20px;
        top: 5px;
      }
      .nav > li > span span {
      
        position: absolute;
        top: 0;
        left: -20px;
      }
      .sub {
      
        display: none;
      }
      .sub > li {
      
        list-style: none;
        background: mediumpurple;
        border-bottom: 1px solid #fff;
      }
      .sub > li:hover {
      
        background: red;
      }
      .nav .current > span {
      
        transform: rotate(90deg);
      }
    style>
    <script src="jquery-1.12.4.js">script>
    <script>
      // 编写jQuery代码
      $(function () {
      
        // 1. 监听一级菜单的点击事件、
        $(".nav>li").click(function () {
      
          // 1.1 拿到二级菜单
          var $sub = $(this).children(".sub");
          // 1.2 让二级菜单展开
          $sub.slideDown(1000);
          $(this).addClass("current");
          // 1.3 拿到所有非当前的二级菜单
          var otherSub = $(this).siblings().children(".sub");
          // 1.4 让所有非当前的二级菜单收起
          otherSub.slideUp(1000);
          $(this).siblings().removeClass("current");
        });
      });
    script>
  head>
  <body>
    <ul class="nav">
      <li>
        一级菜单<span><span>>span>span>
        <ul class="sub">
          <li>二级菜单li>
          <li>二级菜单li>
          <li>二级菜单li>
          <li>二级菜单li>
          <li>二级菜单li>
        ul>
      li>
      <li>
        一级菜单<span><span>>span>span>
        <ul class="sub">
          <li>二级菜单li>
          <li>二级菜单li>
          <li>二级菜单li>
          <li>二级菜单li>
          <li>二级菜单li>
        ul>
      li>
      <li>
        一级菜单<span><span>>span>span>
        <ul class="sub">
          <li>二级菜单li>
          <li>二级菜单li>
          <li>二级菜单li>
          <li>二级菜单li>
          <li>二级菜单li>
        ul>
      li>
      <li>
        一级菜单<span><span>>span>span>
        <ul class="sub">
          <li>二级菜单li>
          <li>二级菜单li>
          <li>二级菜单li>
          <li>二级菜单li>
          <li>二级菜单li>
        ul>
      li>
      <li>
        一级菜单<span><span>>span>span>
        <ul class="sub">
          <li>二级菜单li>
          <li>二级菜单li>
          <li>二级菜单li>
          <li>二级菜单li>
          <li>二级菜单li>
        ul>
      li>
      <li>
        一级菜单<span><span>>span>span>
        <ul class="sub">
          <li>二级菜单li>
          <li>二级菜单li>
          <li>二级菜单li>
          <li>二级菜单li>
          <li>二级菜单li>
        ul>
      li>
      <li>
        一级菜单<span><span>>span>span>
        <ul class="sub">
          <li>二级菜单li>
          <li>二级菜单li>
          <li>二级菜单li>
          <li>二级菜单li>
          <li>二级菜单li>
        ul>
      li>
      <li>
        一级菜单<span><span>>span>span>
        <ul class="sub">
          <li>二级菜单li>
          <li>二级菜单li>
          <li>二级菜单li>
          <li>二级菜单li>
          <li>二级菜单li>
        ul>
      li>
    ul>
  body>
html>

下拉菜单



<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>44-下拉菜单title>
    <style>
      * {
      
        margin: 0;
        padding: 0;
      }
      .nav {
      
        list-style: none;
        width: 300px;
        height: 50px;
        background: red;
        margin: 100px auto;
      }
      .nav > li {
      
        width: 100px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        float: left;
      }
      .sub {
      
        list-style: none;
        background: mediumpurple;
        display: none;
      }
    style>
    <script src="jquery-1.12.4.js">script>
    <script>
      // 编写jQuery代码
      $(function () {
      
        /*
            在jQuery中如果需要执行动画,建议在执行动画之前先调用stop方法,然后再执行动画
          */
        // 1. 监听一级菜单的移入事件
        $(".nav>li").mouseenter(function () {
      
          // 1.1 拿到二级菜单
          var $sub = $(this).children(".sub");
          // 停止当前正在运行的动画
          $sub.stop();
          // 1.2 让二级菜单展开
          $sub.slideDown(1000);
        });
        // 2. 监听一级菜单的移出事件
        $(".nav>li").mouseleave(function () {
      
          // 2.1 拿到二级菜单
          var $sub = $(this).children(".sub");
          // 停止当前正在运行的动画
          $sub.stop();
          // 2.2 让二级菜单收起
          $sub.slideUp(1000);
        });
      });
    script>
  head>
  <body>
    <ul class="nav">
      <li>
        一级菜单
        <ul class="sub">
          <li>二级菜单li>
          <li>二级菜单li>
          <li>二级菜单li>
          <li>二级菜单li>
          <li>二级菜单li>
          <li>二级菜单li>
          <li>二级菜单li>
        ul>
      li>
      <li>一级菜单li>
      <li>一级菜单li>
    ul>
  body>
html>

jQuery淡入淡出动画



<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>45-jQuery淡入淡出动画title>
    <style>
      * {
      
        margin: 0;
        padding: 0;
      }
      div {
      
        width: 300px;
        height: 300px;
        background: red;
        display: none;
      }
    style>
    <script src="jquery-1.12.4.js">script>
    <script>
      // 编写jQuery代码
      $(function () {
      
        $("button")
          .eq(0)
          .click(function () {
      
            $("div").fadeIn(1000, function () {
      
              alert("淡入完毕");
            });
          });
        $("button")
          .eq(1)
          .click(function () {
      
            $("div").fadeOut(1000, function () {
      
              alert("淡出完毕");
            });
          });
        $("button")
          .eq(2)
          .click(function () {
      
            $("div").fadeToggle(1000, function () {
      
              alert("切换完毕");
            });
          });
        $("button")
          .eq(3)
          .click(function () {
      
            $("div").fadeTo(1000, 0.5, function () {
      
              alert("淡入到完毕");
            });
          });
      });
    script>
  head>
  <body>
    <button>淡入button>
    <button>淡出button>
    <button>切换button>
    <button>淡入到button>
    <div>div>
  body>
html>

弹窗广告



<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
    <style>
      * {
      
        margin: 0;
        padding: 0;
      }
      .ad {
      
        position: fixed;
        right: 0;
        bottom: 0;
        display: none;
      }
      .ad > span {
      
        display: inline-block;
        width: 30px;
        height: 30px;
        background: red;
        position: absolute;
        top: 0;
        right: 0;
      }
    style>
    <script src="jquery-1.12.4.js">script>
    <script>
      // 编写jQuery代码
      $(function () {
      
        // 1. 监听span的点击事件、
        $("span").click(function () {
      
          $(".ad").remove();
        });

        // 2. 执行广告动画
        // $(".ad").slideDown(1000, function () {
      
        //   $(".ad").delay(5000);
        //   $(".ad").fadeOut(3000);
        // });

        $(".ad").slideDown(1000).delay(5000).fadeOut(3000);
      });
    script>
  head>
  <body>
    <div class="ad">
      <img src="images/BB14xSko.jpg" alt="" />
      <span>span>
    div>
  body>
html>

jQuery自定义动画



<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>47-jQuery自定义动画title>
    <style>
      * {
      
        margin: 0;
        padding: 0;
      }
      div {
      
        width: 100px;
        height: 100px;
        margin-top: 10px;
        background: red;
      }
      .two {
      
        background: blue;
      }
    style>
    <script src="jquery-1.12.4.js">script>
    <script>
      // 编写jQuery代码
      $(function () {
      
        $("button")
          .eq(0)
          .click(function () {
      
            /*
            $(".one").animate(
              {
                width: 500,
              },
              1000,
              function () {
                alert("自定义动画执行完毕");
              }
            );
            */
            $(".one").animate(
              {
      
                marginLeft: 500,
              },
              5000,
              function () {
      }
            );
            /*
              第一个参数:接收一个对象,可以在对象中修改属性
              第二个参数:指定动画时长
              第三个参数:指定动画节奏,默认为swing
              第四个参数:动画执行完毕之后的回调函数
            */
            $(".two").animate(
              {
      
                marginLeft: 500,
              },
              5000,
              "linear",
              function () {
      }
            );
          });
        $("button")
          .eq(1)
          .click(function () {
      
            $(".one").animate(
              {
      
                width: "+=100",
              },
              1000,
              function () {
      }
            );
          });
        $("button")
          .eq(2)
          .click(function () {
      
            $(".one").animate(
              {
      
                // width: "hide",
                width: "toggle",
              },
              1000,
              function () {
      }
            );
          });
      });
    script>
  head>
  <body>
    <button>操作属性button>
    <button>累加属性button>
    <button>关键字button>
    <div class="one">div>
    <div class="two">div>
  body>
html>

jQuery的stop和delay方法



<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>48-jQuery的stop和delay方法title>
    <style>
      * {
      
        margin: 0;
        padding: 0;
      }
      .one {
      
        width: 100px;
        height: 100px;
        background: red;
      }
      .two {
      
        width: 500px;
        height: 10px;
        background: blue;
      }
    style>
    <script src="jquery-1.12.4.js">script>
    <script>
      // 编写jQuery代码
      $(function () {
      
        $("button")
          .eq(0)
          .click(function () {
      
            /*
             在jQuery的{}中可以同时修改多个属性,多个属性的动画也会同时执行
             */
            /*
            $(".one").animate(
              {
                width: 500,
                // height: 500,
              },
              1000
            );
            $(".one").animate(
              {
                height: 500,
              },
              1000
            );
            */
            /*
            $(".one")
              .animate(
                {
                  width: 500,
                },
                1000
              )
              .delay(2000)
              .animate(
                {
                  height: 500,
                },
                1000
              );
              */

            $(".one").animate(
              {
      
                width: 500,
                // height: 500,
              },
              1000
            );
            $(".one").animate(
              {
      
                height: 500,
              },
              1000
            );
            $(".one").animate(
              {
      
                width: 100,
                // height: 500,
              },
              1000
            );
            $(".one").animate(
              {
      
                height: 100,
              },
              1000
            );
          });
        $("button")
          .eq(1)
          .click(function () {
      
            // 立即停止当前动画,继续执行后续动画
            // $("div").stop();
            // $("div").stop(false);
            // $("div").stop(false, false);

            // 立即停止当前和后续所有的动画
            // $("div").stop(true);
            // $("div").stop(true, false);

            // 立即完成当前的,继续执行后续动画
            // $("div").stop(false, true);

            // 立即完成当前的,并且停止后续所有的
            $("div").stop(true, true);
          });
      });
    script>
  head>
  <body>
    <button>开始动画button>
    <button>停止动画button>
    <div class="one">div>
    <div class="two">div>
  body>
html>

图标特效



<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>49-图标特效title>
    <style>
      * {
      
        margin: 0;
        padding: 0;
      }
      ul {
      
        list-style: none;
        width: 400px;
        height: 250px;
        border: 1px solid #000;
        margin: 100px auto;
      }
      ul > li {
      
        width: 100px;
        height: 50px;
        margin-top: 50px;
        text-align: center;
        float: left;
        overflow: hidden;
      }
      ul > li > span {
      
        display: inline-block;
        width: 24px;
        height: 24px;
        background: red;
        position: relative;
        /* top: 50px; */
      }
    style>
    <script src="jquery-1.12.4.js">script>
    <script>
      // 编写jQuery代码
      $(function () {
      
        // 2. 监听li移入事件
        $("li").mouseenter(function () {
      
          // 2.1 将图标往上移动
          $(this)
            .children("span")
            .animate(
              {
      
                top: -50,
              },
              1000,
              function () {
      
                // 2.2 将图片往下移动
                $(this).css("top", "50px");
                // 2.3 将图片复位
                $(this).animate(
                  {
      
                    top: 0,
                  },
                  1000
                );
              }
            );
        });
      });
    script>
  head>
  <body>
    <ul>
      <li>
        <span>span>
        <p>百度p>
      li>
      <li>
        <span>span>
        <p>百度p>
      li>
      <li>
        <span>span>
        <p>百度p>
      li>
      <li>
        <span>span>
        <p>百度p>
      li>
      <li>
        <span>span>
        <p>百度p>
      li>
      <li>
        <span>span>
        <p>百度p>
      li>
      <li>
        <span>span>
        <p>百度p>
      li>
      <li>
        <span>span>
        <p>百度p>
      li>
    ul>
  body>
html>

无限循环滚动案例



<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>50-无限循环滚动title>
    <style>
      * {
      
        margin: 0;
        padding: 0;
      }
      div {
      
        width: 600px;
        height: 161px;
        border: 1px solid #000;
        margin: 100px auto;
        overflow: hidden;
      }
      ul {
      
        list-style: none;
        width: 1800px;
        height: 161px;
        background: #000;
      }
      ul > li {
      
        width: 300px;
        height: 161px;
        background: yellow;
        font-size: 50px;
        float: left;
        text-align: center;
        line-height: 161px;
      }
    style>
    <script src="jquery-1.12.4.js">script>
    <script>
      // 编写jQuery代码
      $(function () {
      
        // 0. 定义变量保存偏移位
        var offset = 0;
        // 1. 让图片滚动起来
        var timer;
        function autoPlay() {
      
          timer = setInterval(function () {
      
            offset -= 1;
            if (offset <= -1200) {
      
              offset = 0;
            }
            $("ul").css("marginLeft", offset);
          }, 1);
        }
        autoPlay();
        // 2. 监听li的移入移除事件
        $("li").hover(
          function () {
      
            // 停止滚动
            clearInterval(timer);
            // 给非当前选中添加蒙版
            $(this).siblings().fadeTo(100, 0.5);
            // 去除当前选中的蒙版
            $(this).fadeTo(100, 1);
          },
          function () {
      
            // 继续滚动
            autoPlay();
            // 去除所有的蒙版
            $("li").fadeTo(100, 1);
          }
        );
      });
    script>
  head>
  <body>
    <div>
      <ul>
        <li>1li>
        <li>2li>
        <li>3li>
        <li>4li>
        <li>1li>
        <li>2li>
      ul>
    div>
  body>
html>

你可能感兴趣的:(jQuery,JavaScript,jquery)