jQuery实例——图标特效

最新推荐文章于 2024-07-10 03:42:08 发布

jwz934738949

最新推荐文章于 2024-07-10 03:42:08 发布

阅读量179

点赞数

分类专栏： jQuery+Ajax

本文链接：https://blog.csdn.net/jwz934738949/article/details/108398902

版权

jQuery+Ajax 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>图标特效</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      width: 400px;
      height: 300px;
      border: 1px solid #000;
      margin: 50px auto;
    }

    ul > li {
      list-style: none;
      float: left;
      width: 100px;
      height: 80px;
      text-align: center;
      margin-top: 50px;
      overflow: hidden;
    }

    ul > li > span {
      position: relative;
    }

    img {
      width: 30px;
      height: 30px;
    }


  </style>
  <script src="./js/jquery-3.5.1.js"></script>
  <script>
    $(function () {
      // 监听li的鼠标移入事件
      $("li").mouseenter(function () {
        // 将图标向上移动
        $(this).children("span").animate({
          top: -50
        }, 2000, function () {
          // 将图标置于下方
          $(this).css("top", "50px")
          // 将图标返回至原处
          $(this).animate({
            top: 0
          }, 2000)
        })
      })
    })
  </script>
</head>
<body>
<ul>
  <li><span><img src="images/icon1.png" alt=""></span>
    <p>图标1</p></li>
  <li><span><img src="images/icon2.png" alt=""></span>
    <p>图标2</p></li>
  <li><span><img src="images/icon3.png" alt=""></span>
    <p>图标3</p></li>
  <li><span><img src="images/icon4.png" alt=""></span>
    <p>图标4</p></li>
</ul>
</body>
</html>