jQuery动画效果实现

最新推荐文章于 2021-06-03 08:34:23 发布

叁包辣條

最新推荐文章于 2021-06-03 08:34:23 发布

阅读量287

点赞数

分类专栏：网页设计

本文链接：https://blog.csdn.net/xuesen1995/article/details/78478180

版权

网页设计专栏收录该内容

9 篇文章 0 订阅

订阅专栏

 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             width: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>

叁包辣條

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery动画效果实现

1 2 3 4 "Content-Type" content="text/html; charset=utf-8" /> 5 jQuery动画特效 6 "http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"> 7
复制链接

扫一扫

专栏目录