zoukankan      html  css  js  c++  java
  • jQuery动画效果实现

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5         <title>jQuery动画特效</title>
     6         <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
     7         <style>
     8         div{
     9             position:absolute;
    10             top:50px;
    11             left:200px;
    12             height:50px;
    13             50px;
    14             border:1px solid red;   
    15         }
    16         </style>
    17     </head>
    18     <body>
    19         <div></div>
    20         <input id="leftmove" type="button" value="左移"/>
    21         <input id="rightmove" type="button" value="右移"/>
    22         <script type="text/javascript">
    23             $(function(){
    24                 $ltime=0;
    25                 $rtime=0;
    26                $("#leftmove").bind("click",function(){//绑定元素事件
    27                    $ltime++;
    28                    $("div").animate({//调用animate制作移动动画
    29                        left:'-=50px'
    30                    },600,function(){
    31                        $("div").html("左移"+$ltime+"次!");
    32                    });
    33                });
    34                $("#rightmove").bind("click",function(){
    35                    $rtime++;
    36                    $("div").animate({
    37                        left:'+=50px'
    38                    },600,function(){
    39                        $("div").html("右移"+$rtime+"次!");
    40                    });
    41                }); 
    42             });
    43         </script>
    44     </body>
    45 </html>
  • 相关阅读:
    内存检测与优化
    iOS逆向工程(1)
    UIBezierPath 概述
    万能弹窗,点击区域外消失
    逆向传值
    蓝牙开发
    pod
    github
    iOS语音
    图像去噪——分割后处理
  • 原文地址:https://www.cnblogs.com/xuesen1995/p/4298010.html
Copyright © 2011-2022 走看看