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>
时间： 2024-10-05 11:23:40