jQuery（自定义动画/导航动态显示效果）

自定义动画

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>24_自定义动画</title>
  <style type="text/css">
    * {
      margin: 0px;
    }

    .div1 {
      position: absolute;
      width: 100px;
      height: 100px;
      top: 50px;
      left: 300px;
      background: red;
    }
  </style>
</head>
<body>
<button id="btn1">逐渐扩大</button>
<button id="btn2">移动到指定位置</button>
<button id="btn3">移动指定距离</button>
<button id="btn4">停止动画</button>

<div class="div1">
  爱在西元前，学在尚硅谷
</div>

<!--
jQuery动画本质 : 在指定时间内不断改变元素样式值来实现的
1. animate(): 自定义动画效果的动画
2. stop(): 停止动画

-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  /*
   需求：
   1. 逐渐扩大
     1). 宽/高都扩为200px
     2). 宽先扩为200px, 高后扩为200px
   2. 移动到指定位置
     1).移动到(500, 100)处
     2).移动到(100, 20)处
   3.移动指定的距离
     1). 移动距离为(100, 50)
     2). 移动距离为(-100, -20)
   4. 停止动画
   */
  var $div1 = $('.div1')

  /*
   1. 逐渐扩大
   1). 宽/高都扩为200px
   2). 宽先扩为200px, 高后扩为200px
   */
  $('#btn1').click(function () {
    // 1). 宽/高都扩为200px
    /*$div1
     .animate({
     width: 200,
     height: '200px'
     }, 1000)*/

    // 2). 宽先扩为200px, 高后扩为200px
    $div1
      .animate({
        width: 200
      }, 2000)
      .animate({
        height: 200
      }, 2000)
  })


  /*
   2. 移动到指定位置
   1).移动到(500, 100)处
   2).移动到(100, 20)处
   */
  $('#btn2').click(function () {

    // 1).移动到(500, 100)处
    /*$div1
     .animate({
     left: 500,
     top: 100
     }, 1000)*/
    // 2).移动到(100, 20)处
    $div1
      .animate({
        left: 100,
        top: 20
      }, 1000)
  })


  /*
   3.移动指定的距离
   1). 移动距离为(100, 50)
   2). 移动距离为(-100, -20)
   */
  $('#btn3').click(function () {
    // 1). 移动距离为(100, 50)
    /*$div1.animate({
     left: '+=100',
     top: '+=50'
     }, 1000)*/

    //2). 移动距离为(-100, -20)
    $div1.animate({
      left: '-=100',
      top: '-=20'
    }, 1000)
  })

  /*
   4. 停止动画
   */
  $('#btn4').click(function () {
    $div1.stop() // 只停止当前运行的动画(后面其它动画还会运行)
    // $div1.stop(true) // 停止所有动画
    // $div1.stop(true, true)
  })
</script>
</body>
</html>

导航动态显示效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04_导航动态显示效果</title>
  <script src="jquery-1.10.1.js"></script>
  <style rel="stylesheet">
    * {
      margin: 0;
      padding: 0;
      word-wrap: break-word;
      word-break: break-all;
    }

    body {
      background: #FFF;
      color: #333;
      font: 12px/1.6em Helvetica, Arial, sans-serif;
    }

    a {
      color: #0287CA;
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }

    ul, li {
      list-style: none;
    }

    img {
      border: none;
    }

    h1, h2, h3, h4, h5, h6 {
      font-size: 1em;
    }

    html {
      overflow: -moz-scrollbars-vertical; /* 在Firefox下始终显示滚动条*/
    }

    #navigation {
      width: 784px;
      padding: 8px;
      margin: 8px auto;
      background: #3B5998;
      height: 18px;
    }

    #navigation ul li {
      float: left;
      margin-right: 14px;
      position: relative;
      z-index: 100;
    }

    #navigation ul li a {
      display: block;
      padding: 0 8px;
      background: #EEEEEE;
      font-weight: 700;
    }

    #navigation ul li a:hover {
      background: none;
      color: #fff;
    }

    #navigation ul li ul {
      background-color: #88C366;
      position: absolute;
      width: 80px;
      overflow: hidden;
      display: none;
    }

    #navigation ul li ul li {
      border-bottom: 1px solid #BBB;
      text-align: left;
      width: 100%;
    }
  </style>
</head>
<body>
<div id="navigation">
  <ul>
    <li><a href="#">首 页</a></li>
    <li>
      <a href="#">衬 衫</a>
      <ul>
        <li><a href="#">短袖衬衫</a></li>
        <li><a href="#">长袖衬衫</a></li>
        <li><a href="#">无袖衬衫</a></li>
      </ul>
    </li>
    <li>
      <a href="#">卫 衣</a>
      <ul>
        <li><a href="#">开襟卫衣</a></li>
        <li><a href="#">套头卫衣</a></li>
      </ul>
    </li>
    <li>
      <a href="#">裤 子</a>
      <ul>
        <li><a href="#">休闲裤</a></li>
        <li><a href="#">卡其裤</a></li>
        <li><a href="#">牛仔裤</a></li>
        <li><a href="#">短裤</a></li>
      </ul>
    </li>
    <li><a href="#">联系我们</a></li>
  </ul>
</div>

<script>
  $("#navigation>ul>li:has(ul)").hover(function () {
    $(this).children("ul").stop().slideDown(400)
  }, function () {
    $(this).children("ul").stop().slideUp("fast")
  })
</script>
</body>
</html>

posted on 2023-01-17 18:45 垂序葎草阅读(101) 评论(0) 编辑收藏举报

自定义动画

导航动态显示效果

搜索

常用链接

我的标签

随笔分类

随笔档案

阅读排行榜

推荐排行榜