动画案例杂01

原创2019-08-23 15:43:259
摘要:<!DOCTYPE html><html lang="en"><head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, in

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <title>动画案例</title>

   <script src="jquery-3.3.1.min.js"></script>

   <style>

   .mian{

       float: left;width: 200px;height: 240px;margin: 20px;

   }

   .box1, .box2 ,.box3,.box4,.box8,.box10,.box13{

      width: 200px;height: 200px;background: pink;

   }

   .box11{

       background: #ccc;width: 200px;height: 200px;position: absolute;

   }

   button{

       width: 200px;height: 40px;border: none;

   }

   .clear{

       clear: both;

   }

   </style>

</head>

<body>

   <script>

       

       $(document).ready(function(){

           $('.box1').hide()

           $('.bt1').click(function(){

               $('.box1').fadeIn(3000)

           })

           $('.bt2').click(function(){

               $('.box2').fadeOut(3000)

           })

           $('.bt3').click(function(){

               $('.box3').fadeToggle()

           })

           $('.bt4').click(function(){

               $('.box4').fadeTo(1000,0.3)

           })

           $('.btn5').click(function(){

               $('.p5').slideUp()

           })

           $('.p6').hide()

           $('.btn6').click(function(){

               $('.p6').slideDown()

           })

           $('.btn7').click(function(){

               $('.p7').slideToggle()

           })

           $('.btn8').click(function(){

               $('.box8').show()

           })

           $('.btn9').click(function(){

               $('.box8').hide()

           })

           $('.btn10').click(function(){

               $('.box8').toggle()

           })

           $('.right').click(function(){

               $('.box11').animate({left:'+500px'},3000)

               

           })

           $('.stop').click(function(){

               $('.box11').stop()

           })

           $('.btn12').click(function(){

               $('.box13').animate({

                   height:'400px',

                   width:'400px',

                   opacity:'0.3',

               },1500)

           })  

       })  

   </script>

   <h2>淡入淡出</h2>

   <div class="mian">

           <button class="bt1">淡出</button>

           <div class="box1"></div>        

   </div>

   <div class="mian">

           <button class="bt2">淡入</button>

           <div class="box2"></div>        

   </div>

   <div class="mian">

           <button class="bt3">切换</button>

           <div class="box3"></div>        

   </div>

   <div class="mian">

           <button class="bt4">特定值</button>

           <div class="box4"></div>        

   </div>

   <br>

   <h2>滑动</h2>

   <div class="clear"></div>

   <button class="btn5">上滑</button>

   <p class="p5">jQuery的滑动是通过高度的变化(向某个方向增大或者缩小)来动态的显示所匹配的元素</p>

   <p class="p5">jQuery的滑动是通过高度的变化(向某个方向增大或者缩小)来动态的显示所匹配的元素</p>

   <p class="p5">jQuery的滑动是通过高度的变化(向某个方向增大或者缩小)来动态的显示所匹配的元素</p>

   <br>

   <button class="btn6">下滑</button>

   <p class="p6">jQuery的滑动是通过高度的变化(向某个方向增大或者缩小)来动态的显示所匹配的元素</p>

   <p class="p6">jQuery的滑动是通过高度的变化(向某个方向增大或者缩小)来动态的显示所匹配的元素</p>

   <p class="p6">jQuery的滑动是通过高度的变化(向某个方向增大或者缩小)来动态的显示所匹配的元素</p>

   <br>

   <br>

   <button class="btn7">切换</button>

   <p class="p7">jQuery的滑动是通过高度的变化(向某个方向增大或者缩小)来动态的显示所匹配的元素</p>

   <p class="p7">jQuery的滑动是通过高度的变化(向某个方向增大或者缩小)来动态的显示所匹配的元素</p>

   <p class="p7">jQuery的滑动是通过高度的变化(向某个方向增大或者缩小)来动态的显示所匹配的元素</p>

   <br>

   <h2>显示与隐藏</h2>

   <button class="btn8">显示</button>

   

   <button class="btn9">隐藏</button>

   <button class="btn10">切换</button>

   <div class="box8"></div>

   <br>

   <h2>自定义动画</h2>

   <button class="right">右移</button>

   <button class="stop">停止</button>

   <br>

   <div class="box11">动画函数</div>

   <br>

   <br>

   <br>

   <br>

   <br>

   <br>

   <br>

   <br>

   <br>

   <br>

   <br>

   <br>

   <br>

   <br>

   <br>

   <h2>字体放大</h2>

   <button class="btn12">放大</button><br>

   <div class="box13"></div>

</body>

</body>

</html>


批改老师:Peter-Zhu批改时间:2019-08-27 09:15:32
老师总结:jQuery中的自定义动画操作, 非常的简单, 也有意思, 运用巧妙可以做出许多酷炫的效果

发布手记

热门词条

第九期线上培训班