jQuery小例

rfalcon

于 2020-08-28 11:37:09 发布

阅读量149

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/rfalcon/article/details/108261345

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

自学黑马教程练习

下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.5.1.min.js"></script>

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

    li {
      list-style-type: none;
    }

    a {
      text-decoration: none;
      font-size: 14px;
    }

    .nav {
      margin: 100px;
    }

    .nav>li {
      position: relative;
      float: left;
      width: 80px;
      height: 40px;
      text-align: center;
    }

    .nav li a {
      display: block;
      width: 100%;
      height: 100%;
      line-height: 40px;
      color: grey;
    }

    .nav>li>a:hover {
      background-color: #eee;
    }

    .nav ul {
      display: none;
      position: absolute;
      top: 40px;
      left: 0;
      width: 100%;
      border-left: 1px solid #FECC5B;
      border-right: 1px solid #FECC5B;
    }

    .nav ul li {
      border-bottom: 1px solid #FECC5B;
    }

    .nav ul li a:hover {
      background-color: #FFF5DA;
    }
  </style>
</head>
<body>
  <ul class="nav">
    <li>
      <a href="#">我的</a>
      <ul class="nav_list">
        <li><a href="">私信</a></li>
        <li><a href="">评论</a></li>
        <li><a href="">@我</a></li>
      </ul>
    </li>
    <li>
      <a href="#">我的</a>
      <ul class="nav_list">
        <li><a href="">私信</a></li>
        <li><a href="">评论</a></li>
        <li><a href="">@我</a></li>
      </ul>
    </li>
    <li>
      <a href="#">我的</a>
      <ul class="nav_list">
        <li><a href="">私信</a></li>
        <li><a href="">评论</a></li>
        <li><a href="">@我</a></li>
      </ul>
    </li>
    <li>
      <a href="#">我的</a>
      <ul class="nav_list">
        <li><a href="">私信</a></li>
        <li><a href="">评论</a></li>
        <li><a href="">@我</a></li>
      </ul>
    </li>
  </ul>
  <script>
    $(function () {
      $('.nav>li').mouseover(function () {
        // $(this) 表示jQuery的当前元素
        $(this).children('ul').show()
        // 让其有滑动效果
        $(this).children('ul').slideDown()
      })
      $('.nav>li').mouseout(function () {
        $(this).children('ul').hide()
        // 让其有滑动效果
        $(this).children('ul').slideUp()
      })
    })
  </script>
</body>
</html>

// 效果切换一栏可以用hover([over,]out)这一函数实现
 $('.nav>li').hover(function () {
	$(this).children('ul').slideDown()
}, function () {
	$(this).children('ul').slideUp()
})

$('.nav>li').hover(function () {
	$(this).children('ul').slideToggle()
})

动画广告

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./jquery-3.5.1.min.js"></script>

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

    .ad {
      width: 200px;
      height: 120px;
      background: #ccc;
      border: 1px solid yellow;
      position: absolute;
      right: 10px;
      bottom: 10px;
    }

    .ad span {
      display: block;
      width: 20px;
      height: 15px;
      background: pink;
      line-height: 15px;
      text-align: center;
      position: absolute;
      top: 1px;
      right: 1px;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="ad">
    <span>×</span>
  </div>


  <script>
    $(function () {
      $('.ad').slideDown(1000).slideUp(1000).fadeIn(1000).children('span').click(function () {
        $(this).parent().fadeOut(1000)
      })
    })
  </script>
</body>

</html>

排他思想

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>排他思想</title>
  <script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
  <div>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <button>按钮6</button>
  </div>
  <script>
    $(function () {
      $('button').click(function () {
        $(this).css('background', 'red')
        $(this).css('color', 'white')
        $(this).siblings('button').css('background', '')
        $(this).siblings('button').css('color', '')
      })
    })
  </script>
</body>
</html>

分类展示（左右两栏）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>分类展示案例</title>
  <script src="js/jquery-3.5.1.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      list-style: none;
    }
    a {
      text-decoration: none;
    }
    .content {
      width: 300px;
      height: 256px;
      margin: 100px auto;
      border: 1px solid #ccc;
      border-right: 0;
      overflow: hidden;
    }
    .left,
    .right {
      float: left;
    }
    .left li a {
      display: block;
      width: 44px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      border-bottom: 1px solid #ccc;
    }
    .left li a:hover {
      background-color: greenyellow;
      color: white;
    }
    .right {
      border-left: 1px solid #ccc;
      border-right: 1px solid #ccc;
    }
    .right img {
      width: 254px;
      height: 254px;
    }
  </style>
</head>
<body>
  <div class="content">
    <ul class="left">
      <li><a href="">分类1</a></li>
      <li><a href="">分类2</a></li>
      <li><a href="">分类3</a></li>
      <li><a href="">分类4</a></li>
      <li><a href="">分类5</a></li>
    </ul>
    <div class="right">
      <div><a href="#"><img src="img/swiper/nature-1.jpg" alt=""></a></div>
      <div><a href="#"><img src="img/swiper/nature-2.jpg" alt=""></a></div>
      <div><a href="#"><img src="img/swiper/nature-3.jpg" alt=""></a></div>
      <div><a href="#"><img src="img/swiper/nature-4.jpg" alt=""></a></div>
      <div><a href="#"><img src="img/swiper/nature-5.jpg" alt=""></a></div>
    </div>
  </div>
  <script>
    $(function () {
      $('.left li').mouseover(function () {
        var index = $(this).index()
        console.log(index)
        $('.right div').eq(index).show().siblings().hide()
      })
    })
  </script>
</body>
</html>

分类展示（上下两栏）

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/jquery-3.5.1.min.js"></script>
  <style>
    .container {
      width: 600px;
      height: 400px;
      margin: 100px auto;
    }

    .nav_list {
      overflow: hidden;
      width: 600px;
      height: 50px;
      border-top: 1px solid #ccc;
      border-left: 1px solid #ccc;
      /* border-bottom: 1px solid #ccc; */
    }


    .nav_list li {
      list-style: none;
      display: block;
      width: 99px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      float: left;
      /* border-bottom: 1px solid #ccc; */
      border-right: 1px solid #ccc;
    }

    .nav_list li.cur {
      background-color: thistle;
    }

    .nav_con div {
      width: 599px;
      height: 348px;
      border: 1px solid #ccc;
      text-align: center;
      line-height: 348px;
      display: none;
    }

    .nav_con div:nth-child(1) {
      display: block;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="nav_list">
      <li>导航1</li>
      <li>导航2</li>
      <li>导航3</li>
      <li>导航4</li>
      <li>导航5</li>
      <li>导航6</li>
    </div>
    <div class="nav_con">
      <div>这是关于导航1的内容</div>
      <div>这是关于导航2的内容</div>
      <div>这是关于导航3的内容</div>
      <div>这是关于导航4的内容</div>
      <div>这是关于导航5的内容</div>
      <div>这是关于导航6的内容</div>
    </div>
  </div>

  <script>
    $(function () {
      $('.nav_list li').mouseover(function () {
        var index = $(this).index()
        if ($(this).hasClass('cur')) return
        $(this).addClass('cur').siblings().removeClass()
        $('.nav_con div').eq(index).show().siblings().hide()
      })
    })
  </script>
</body>

</html>

tab栏的切换

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>tab栏切换</title>
  <script src="js/jquery-3.5.1.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    li {
      list-style-type: none;
    }
    .tab {
      width: 500px;
      margin: 100px auto;
    }
    .tab_list {
      height: 40px;
      border: 1px solid #ccc;
      background-color: blanchedalmond;
    }
    .tab_list li {
      float: left;
      width: 20%;
      height: 40px;
      line-height: 40px;
      text-align: center;
    }
    .tab_list li:hover {
      background-color: hotpink;
      color: white;
      cursor: pointer;
    }
    .item {
      display: none;
    }
  </style>
</head>
<body>
  <div class="tab">
    <div class="tab_nav">
      <ul class="tab_list">
        <li>商品展示1</li>
        <li>商品展示2</li>
        <li>商品展示3</li>
        <li>商品展示4</li>
        <li>商品展示5</li>
      </ul>
    </div>
    <div class="tab_con">
      <div class="item">商品1的相关介绍</div>
      <div class="item">商品2的相关介绍和图片展示</div>
      <div class="item">商品3的相关图片展示</div>
      <div class="item">商品4的相关介绍和图片</div>
      <div class="item">商品5的相关展示</div>
    </div>
  </div>
  <script>
    $(function () {
      $('.tab_list li').mouseover(function () {
        var index = $(this).index()
        $('.tab_con div').eq(index).show().siblings().hide()

      })
    })
  </script>
</body>
</html>

突出显示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>突出显示</title>
  <script src="js/jquery-3.5.1.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style-type: none;
    }

    body {
      background-color: #000000;
    }

    .pics {
      width: 400px;
      height: 200px;
      margin: 100px auto;
    }

    .item img {
      display: block;
      width: 100px;
      height: 90px;
      margin: 5px;
      padding: 5px;
      border: 1px solid #ccc;
    }

    .item {
      float: left;
    }
  </style>
</head>
<body>
  <div class="pics">
    <ul class="con">
      <li class="item">
        <img src="img/highlight/01.jpg" alt="">
      </li>
      <li class="item">
        <img src="img/highlight/02.jpg" alt="">
      </li>
      <li class="item">
        <img src="img/highlight/03.jpg" alt="">
      </li>
      <li class="item">
        <img src="img/highlight/04.jpg" alt="">
      </li>
      <li class="item">
        <img src="img/highlight/05.jpg" alt="">
      </li>
      <li class="item">
        <img src="img/highlight/06.jpg" alt="">
      </li>
    </ul>
  </div>
  <script>
    $(function () {
      $('.item').hover(function () {
        $(this).siblings().stop().fadeTo(400, 0.5);
      }, function () {
        $(this).siblings().stop().fadeTo(400, 1);
      })
    })
  </script>
</body>
</html>

手风琴案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>手风琴案例</title>
  <script src="js/jquery-3.5.1.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style-type: none;
    }

    img {
      display: block;
    }

    .fn {
      width: 440px;
      height: 70px;
      background: url(img/uzfgqb/bg.png) no-repeat;
      margin: 100px auto;
      overflow: hidden;
      padding: 10px;
    }

    .fn ul {
      overflow: hidden;
      margin: 10px auto;
    }

    .fn li {
      position: relative;
      float: left;
      width: 50px;
      height: 50px;
      margin-right: 5px;
    }

    .small {
      width: 50px;
      height: 50px;
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 5px;
    }

    .big {
      width: 100px;
      height: 50px;
      display: none;
    }

    .fn li.current {
      width: 100px;
    }

    .fn li.current .big {
      display: block;
    }

    .fn li.current .small {
      display: none;
    }
  </style>
</head>
<body>
  <div class="fn">
    <ul>
      <li class="current">
        <a href="">
          <img class="small" src="img/uzfgqb/clsoe/1.jpg" alt="">
          <img class="big" src="img/uzfgqb/open/1.png" alt="">
        </a>
      </li>
      <li>
        <a href="">
          <img class="small" src="img/uzfgqb/clsoe/2.jpg" alt="">
          <img class="big" src="img/uzfgqb/open/2.png" alt="">
        </a>
      </li>
      <li>
        <a href="">
          <img class="small" src="img/uzfgqb/clsoe/3.jpg" alt="">
          <img class="big" src="img/uzfgqb/open/3.png" alt="">
        </a>
      </li>
      <li>
        <a href="">
          <img class="small" src="img/uzfgqb/clsoe/4.jpg" alt="">
          <img class="big" src="img/uzfgqb/open/4.png" alt="">
        </a>
      </li>
      <li>
        <a href="">
          <img class="small" src="img/uzfgqb/clsoe/5.jpg" alt="">
          <img class="big" src="img/uzfgqb/open/5.png" alt="">
        </a>
      </li>
      <li>
        <a href="">
          <img class="small" src="img/uzfgqb/clsoe/6.jpg" alt="">
          <img class="big" src="img/uzfgqb/open/6.png" alt="">
        </a>
      </li>
      <li>
        <a href="">
          <img class="small" src="img/uzfgqb/clsoe/7.jpg" alt="">
          <img class="big" src="img/uzfgqb/open/7.png" alt="">
        </a>
      </li>
    </ul>
  </div>
  <script>
    $(function () {
      $('.fn li').mouseenter(function () {
        $(this).stop().animate({
          width: 100
        }).find('.small').stop().fadeOut().siblings('.big').stop().fadeIn()
        $(this).siblings('li').stop().animate({
          width: 50
        }).find('.big').stop().fadeOut().siblings('.small').stop().fadeIn()
      })
    })
  </script>
</body>
</html>

模拟购物车的全选与反选

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>模拟购物车的全选和反选</title>
  <script src="js/jquery-3.5.1.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .fn {
      width: 300px;
      margin: 100px auto;
    }

    table {
      border-collapse: collapse;
      width: 100%;
      text-align: center;
    }

    thead th {
      border: 1px solid #d7d7d7;
      background-color: skyblue;
    }

    tbody td {
      border: 1px solid #d7d7d7;
    }

    .total {
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <div class="fn">
    <table>
      <thead>
        <tr>
          <th>
            <input type="checkbox" id="check_all" />
          </th>
          <th>商品</th>
          <th>价钱</th>
        </tr>
      </thead>
      <tbody id="check_td">
        <tr>
          <td>
            <input type="checkbox" class="check_item" />
          </td>
          <td>iPhone8</td>
          <td>8000</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" class="check_item" />
          </td>
          <td>iPad Pro</td>
          <td>5000</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" class="check_item" />
          </td>
          <td>iPad Air</td>
          <td>2000</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" class="check_item" />
          </td>
          <td>Apple Watch</td>
          <td>2000</td>
        </tr>
      </tbody>
    </table>
    <input type="checkbox" class="total">选中所有商品
  </div>
  <script>
    $(function () {
      // 如果选中了全选按钮，将全选按钮的checked的值赋值给每个按钮即可
      $('#check_all').change(function () {
        $('.check_item,.total').prop('checked', $(this).prop('checked'))
      })
      $('.total').change(function () {
        $('.check_item,#check_all').prop('checked', $(this).prop('checked'))
      })
      // 如果商品按钮的checked值等于按钮数目，将checked值赋值给全选按钮
      $('.check_item').change(function () {
        if ($('.check_item:checked').length === $('.check_item').length) {
          $('#check_all,.total').prop('checked', true)
        } else {
          $('#check_all,.total').prop('checked', false)
        }
      })
    })
  </script>
</body>
</html>

实现购物车商品计数功能

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>购物车增减商品数量模块</title>
  <script src="js/jquery-3.5.1.min.js"></script>
  <style>
    .count {
      width: 100px;
      margin: 100px auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    button {
      width: 20px;
      border: 1px solid #ccc;
      text-align: center;
    }
    input {
      width: 30px;
      border: 1px solid #ccc;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="count">
    <button class="sub" href="">-</button>
    <input type="text" value="1">
    <button class="add" href="">+</button>
  </div>
  <script>
    $(function () {
      var num = $('input').val()
      $('.add').click(function () {
        if (num < 10) {
          $('input').val(++num)
        } else {
          $('input').val(10)
        }
      })
      $('.sub').click(function () {
        if (num > 1) {
          $(this).attr('disabled', false)
          $('input').val(--num)
        } else {
          $('input').val(1)
        }
      })
    })
  </script>
</body>
</html>

简易发布功能的实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>简易发布功能</title>
  <script src="js/jquery-3.5.1.min.js"></script>
  <style>
    .box {
      width: 500px;
      margin: 100px auto;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
    }
    .txt,
    ul {
      margin-top: 10px;
    }
    li {
      list-style: none;
      width: 380px;
      border-bottom: 1px dashed #ccc;
    }
    a {
      text-decoration: none;
      float: right;
    }
    .btn {
      width: 100px;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <div class="box">
    <span>信息发布</span>
    <textarea name="" class="txt" cols="50" rows="10"></textarea>
    <button class="btn">发布</button>
    <ul></ul>
  </div>
  <script>
    $(function () {
      $('.btn').on('click', function () {
        // 创建 li 元素
        var li = $('<li></li>')
        // 向 li 标签里面填入内容：textarea中的内容 + 删除
        li.html($('.txt').val() + "<a href='javascript:;'>删除</a>")
        // 将li标签添加到ul中
        $('ul').append(li)
        // 将文本框中的输入置空
        $('.txt').val("")
        // 实现li标签的删除
        $('ul li').on('click', 'a', function () {
          $(this).parent().fadeOut()
        })
      })
    })
  </script>
</body>
</html>

实现图片的懒加载

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>lazyload</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <style>
      img {
        display: block;
        margin: 0 auto;
        margin-top: 100px;
      }
    </style>
  </head>
  <body>
    <img data-lazy-src="img/swiper/nature-1.jpg" alt="" />
    <img data-lazy-src="img/swiper/nature-2.jpg" alt="" />
    <img data-lazy-src="img/swiper/nature-3.jpg" alt="" />
    <img data-lazy-src="img/swiper/nature-4.jpg" alt="" />
    <img data-lazy-src="img/swiper/nature-5.jpg" alt="" />
    <!-- 注：easylazyload.js 必须写在所有图片的后面 -->
    <script src="js/EasyLazyload.min.js"></script>
    <script>
      lazyLoadInit({
        coverColor: 'white',
        coverDiv: '<h1>test</h1>',
        offsetBottom: 0,
        offsetTopm: 0,
        showTime: 1100,
        onLoadBackEnd: function (i, e) {
          console.log('onLoadBackEnd:' + i)
        },
        onLoadBackStart: function (i, e) {
          console.log('onLoadBackStart:' + i)
        },
      })
    </script>
  </body>
</html>

响应式网格瀑布流布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>响应式网格瀑布流布局</title>
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/default.css" />
    <style type="text/css">
      #gallery-wrapper {
        position: relative;
        max-width: 75%;
        width: 75%;
        margin: 50px auto;
      }
      img.thumb {
        width: 100%;
        max-width: 100%;
        height: auto;
      }
      .white-panel {
        position: absolute;
        background: white;
        border-radius: 5px;
        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
        padding: 10px;
      }
      .white-panel h1 {
        font-size: 1em;
      }
      .white-panel h1 a {
        color: #a92733;
      }
      .white-panel:hover {
        box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
        margin-top: -5px;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
      }
    </style>
  </head>
  <body>
    <section id="gallery-wrapper">
      <article class="white-panel">
        <img src="img/swiper/nature-1.jpg" class="thumb" />
        <h1><a href="#">Title 1</a></h1>
        <p>Description 1</p>
      </article>
      <article class="white-panel">
        <img src="img/swiper/nature-2.jpg" class="thumb" />
        <h1><a href="#">Title 1</a></h1>
        <p>Description 1</p>
      </article>
      <article class="white-panel">
        <img src="img/swiper/nature-3.jpg" class="thumb" />
        <h1><a href="#">Title 1</a></h1>
        <p>Description 1</p>
      </article>
      <article class="white-panel">
        <img src="img/swiper/nature-4.jpg" class="thumb" />
        <h1><a href="#">Title 1</a></h1>
        <p>Description 1</p>
      </article>
      <article class="white-panel">
        <img src="img/swiper/nature-5.jpg" class="thumb" />
        <h1><a href="#">Title 1</a></h1>
        <p>Description 1</p>
      </article>
    </section>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/pinterest_grid.js"></script>
    <script>
      $(function () {
        $('#gallery-wrapper').pinterest_grid({
          no_columns: 4,
          padding_x: 10,
          padding_y: 10,
          margin_bottom: 50,
          single_column_breakpoint: 700,
        })
      })
    </script>
  </body>
</html>

插件实现全屏滚动

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>全屏滚动</title>
    <link rel="stylesheet" href="css/fullpage.min.css" />
    <style>
      #fp-nav ul li a.active span,
      #fp-nav ul li a span {
        background-color: red !important;
      }
      .section1 {
        background: url(img/swiper/nature-1.jpg) 50% no-repeat;
      }
      .section2 {
        background: url(img/swiper/nature-2.jpg) 50% no-repeat;
      }
      .section3 {
        background: url(img/swiper/nature-3.jpg) 50% no-repeat;
      }
      .section4 {
        background: url(img/swiper/nature-4.jpg) 50% no-repeat;
      }
      .section5 {
        background: url(img/swiper/nature-5.jpg) 50% no-repeat;
      }
    </style>
  </head>
  <body>
    <div id="dowebok">
      <div class="section section1">
        <h3>第一屏里面的内容</h3>
      </div>
      <div class="section section2">
        <h3>第二屏</h3>
      </div>
      <div class="section section3">
        <h3>第三屏</h3>
      </div>
      <div class="section section4">
        <h3>第四屏</h3>
      </div>
      <div class="section section5">
        <h3>第五屏</h3>
      </div>
    </div>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/fullpage.min.js"></script>
    <script>
      $(function () {
        $('#dowebok').fullpage({
          sectionsColor: ['pink', '#4BBFC3', '#7BAABE', '#f90', 'hotpink'],
          navigation: true,
        })
      })
    </script>
  </body>
</html>

bootstrap js使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>bootstrap js使用</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <!-- Single button -->
      <div class="btn-group">
        <button
          type="button"
          class="btn btn-default dropdown-toggle"
          data-toggle="dropdown"
          aria-haspopup="true"
          aria-expanded="false"
        >
          Action <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div>
      <!-- nav -->
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button
              type="button"
              class="navbar-toggle collapsed"
              data-toggle="collapse"
              data-target="#bs-example-navbar-collapse-1"
              aria-expanded="false"
            >
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div
            class="collapse navbar-collapse"
            id="bs-example-navbar-collapse-1"
          >
            <ul class="nav navbar-nav">
              <li class="active">
                <a href="#">Link <span class="sr-only">(current)</span></a>
              </li>
              <li><a href="#">Link</a></li>
              <li class="dropdown">
                <a
                  href="#"
                  class="dropdown-toggle"
                  data-toggle="dropdown"
                  role="button"
                  aria-haspopup="true"
                  aria-expanded="false"
                  >Dropdown <span class="caret"></span
                ></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
            <form class="navbar-form navbar-left">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Search" />
              </div>
              <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">Link</a></li>
              <li class="dropdown">
                <a
                  href="#"
                  class="dropdown-toggle"
                  data-toggle="dropdown"
                  role="button"
                  aria-haspopup="true"
                  aria-expanded="false"
                  >Dropdown <span class="caret"></span
                ></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </li>
            </ul>
          </div>
          <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
      </nav>
    </div>
  </body>
</html>

简单的do_list小例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>do_list</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <style>
      ul li {
        width: 400px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .doing_count,
      .done_count {
        margin-left: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <input type="text" class="iput" />
    </div>
    <div class="doing">
      <h3>正在进行<span class="doing_count">0</span></h3>
      <ul class="doing_list"></ul>
    </div>
    <div class="done">
      <h3>已经完成<span class="done_count">0</span></h3>
      <ul class="done_list"></ul>
    </div>
  </body>
  <script>
    $(function () {
      load()
      $('.iput').on('keydown', function (e) {
        if (e.keyCode === 13) {
          // 先读取本地存储中原来的数据
          var local = getData()
          console.log(local)
          // local数组进行更新数据，即把最新的数据追加给local数组
          local.push({ title: $(this).val(), done: false })
          // 把这个local数组存储到本地存储
          saveData(local)
          // 把数据渲染到页面
          load()
        }
      })

      // doList删除操作
      $('.doing_list,.done_list').on('click', 'a', function () {
        // 获取本地存储数据
        var data = getData()
        console.log(data)
        // 修改数据
        var index = $(this).attr('id')
        console.log(index)
        data.splice(index, 1)
        // 保存到本地存储
        saveData(data)
        // 重新将数据渲染到页面
        load()
      })

      // doList 正在进行和已完成选项的操作
      $('.doing_list,.done_list').on('click', 'input', function () {
        // 获取本地数据
        var data = getData()
        // 修改数据
        var index = $(this).siblings('a').attr('id')
        console.log(index)
        data[index].done = $(this).prop('checked')
        console.log(data)
        // 保存到本地存储
        saveData(data)
        // 重新将数据渲染到页面
        load()
      })

      // 读取本地存储的数据
      function getData() {
        var data = localStorage.getItem('doList')
        if (data !== null) {
          return JSON.parse(data)
        } else {
          return []
        }
      }

      // 保存本地存储数据
      function saveData(data) {
        localStorage.setItem('doList', JSON.stringify(data))
      }

      // 渲染加载数据
      function load() {
        // 读取本地存储的数据
        var data = getData()
        console.log(data)
        // 遍历之前先要清空ul里面的元素内容
        $('.doing_list,.done_list').empty()
        // 统计未完成和已完成事件的个数
        var doingCount = 0
        var doneCount = 0
        // 遍历这个数据
        $.each(data, function (i, n) {
          // console.log(n)
          if (n.done) {
            $('.done_list').prepend(
              '<li><input type="checkbox" checked="checked"><p>' +
                n.title +
                '</p><a href="javascript:;" id=' +
                i +
                '>del</a></li>'
            )
            doneCount++
          } else {
            $('.doing_list').prepend(
              '<li><input type="checkbox"><p>' +
                n.title +
                '</p><a href="javascript:;" id=' +
                i +
                '>del</a></li>'
            )
            doingCount++
          }
        })
        // 将doing和done的计数渲染到页面上
        $('.doing_count').text(doingCount)
        $('.done_count').text(doneCount)
      }
    })
  </script>
</html>

简易模仿返回顶部的原理

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <style>
      div {
        width: 400px;
        height: 700px;
        background-color: pink;
        margin: 150px auto;
      }
    </style>
  </head>
  <body>
    <div></div>
    <span>top</span>
    <script>
      $(function () {
        // 元素距离document的距离
        var divTop = $('div').offset().top
        $(window).scroll(function () {
          if ($(document).scrollTop() > divTop) {
            alert('触发返回顶部事件')
          }
        })
        // 返回顶部事件处理
        $('button').on('click', function () {
          $('body,html').stop().animate({
            scrollTop: 0,
          })
        })
      })
    </script>
  </body>
</html>

用jQuery设置滚动一定距离后固定导航条

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .scroll_fix {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 10000;
    }

    .nav {
      width: 1000px;
      margin: 100px auto;
      overflow: hidden;
    }

    .nav_box li {
      list-style: none;
      display: block;
      width: 150px;
      height: 60px;
      line-height: 60px;
      color: #222;
      text-align: center;
      font-size: 24px;
      overflow: hidden;
      float: left;
    }

    .nav_box li a {
      text-decoration: none;
    }

    p {
      height: 30px;
    }
  </style>
  <!-- 引入jQuery -->
  <script src="./js/jquery-3.5.1.min.js"></script>
</head>
<body>
  <div>
    <div class="nav">
      <ul class="nav_box">
        <li><a href="">导航一</a></li>
        <li><a href="">导航二</a></li>
        <li><a href="">导航三</a></li>
        <li><a href="">导航四</a></li>
        <li><a href="">导航五</a></li>
        <li><a href="">导航六</a></li>
      </ul>
    </div>

    <!-- 弄100个p展示效果，这里省略 -->
    <p>123</p>
  </div>

  <script>
    $(document).ready(function () {
      $(window).scroll(function () {
        var scrollTop = $(document).scrollTop()
        // console.log(scrollTop)
        if ($(document).scrollTop() > 200) {
          // alert('固定导航条')
          $('.nav_box').addClass('scroll_fix')
        } else {
          $('.nav_box').removeClass('scroll_fix')
        }
      })
    })
  </script>
</body>
</html>

rfalcon

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery小例

下拉菜单<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js/jquery-3.5.1.min.js">
复制链接

扫一扫

专栏目录