返回动画案例杂01...登陆

动画案例杂01

A00A-KAจุ๊บ 2019-08-23 15:43:2512

<!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>


最新手记推荐

• 依赖注入小例子• 模板显示用户信息表,并分页显示• 模板继承,模仿php页面• 模拟用户登录验证的案例 依赖注入 Facade• 创建一个验证器, 用来对模型对应的表中字段进行验证处理

全部回复(0)我要回复

暂无评论~
  • 取消回复发送
  • PHP中文网