码迷,mamicode.com
首页 > 移动开发 > 详细

17jquery学习笔记-------动画----图片在网页中移动,改变样式

时间:2016-01-13 23:38:02      阅读:259      评论:0      收藏:0      [点我收藏+]

标签:

animate:animate内部设置的多个值是同步变化的,链式的 animate是依次动画的。
例子:animate({ left: 0, top: 0, width: 300, height: 300 },3000) .animate({ opacity: 0 }).animate({ opacity: 1 })。还可以指定增量,$(“#div1”).animate({ height: “+=100” });
//如果 是+=、-=等增量形式要写成字符串,因为JavaScript不认识这种语法

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 4     <title></title>
 5     <script src="jquery-1.8.3.js"></script>
 6     <script type="text/javascript">
 7         $(function () {
 8             $(‘:button‘).click(function () {
 9                 $(‘img‘).animate({ ‘left‘: ‘20px‘, ‘top‘: ‘500px‘, ‘width‘: ‘30px‘, ‘height‘: ‘30px‘ }, 3000).animate({ ‘top‘: ‘20px‘, ‘left‘: ‘600px‘, ‘width‘: ‘100px‘, ‘height‘: ‘100px‘ }, 3000).animate({‘top‘:‘+=400px‘,‘left‘:‘-=500px‘},3000);
10             });
11         });
12 
13 
14     </script>
15 </head>
16 <body>
17     <input type="button" name="name" value="小鸟飞起来" />
18     <br/>
19     <img style="position:absolute;" src="2.png" />
20 </body>
21 </html>

 

17jquery学习笔记-------动画----图片在网页中移动,改变样式

标签:

原文地址:http://www.cnblogs.com/clcloveHuahua/p/5128792.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!