运动---第四课时
最近比较忙，没来得及整理，再忙也要更新，最近在做一款APP，预计9月份可以上线。继续关于运动的课程。这一篇文章主要是关于链式运动以及Json的运用。
所谓链式运动，就是完成一个运动效果之后继续进行下一个运动效果，然后继续下一个运动效果，往下延续...链式运动个人感觉蛮好玩的。下面看一个实例，startMove是我写的一个函数框架，这个库在前面的文章里面有，需要看的可以翻看前面的文章，这个框架蛮简单的，但是有很多细节需要注意，一不小心就写错了。
链式运动----按钮的单击事件，运用函数框架传递obj,attr,iTarget,fn来传递四个参数，分别为：元素，属性，目标值，执行函数。其中第四个参数用来传递嵌套的一个函数，通过这个特殊的参数来执行第一个运动效果后面的第二个运动效果。
1 <script>
2 window.onload=function(){
3 var oDiv=document.getElementById('div1');
4 var oBtn=document.getElementById('btn1');
5 oBtn.onclick=function(){
6 startMove(oDiv,'width',200,function(){
7 startMove(oDiv,'height',200);//嵌套一个函数，来执行第二次运动
8 })
9 }
10 }
11 </script>
链式运动2----这个实例同样是运用了startMove()框架，只不过是更改了元素的触发事件改为了鼠标移入和鼠标移出事件。同时，关于透明度这个属性有点想说的东西，IE，FF，Chrome对于透明度的支持不一样，兼容性存在问题，在IE下的设置为filter:alpha(opacity:30),在火狐，谷歌下设置为opacity：0.3即可。这个不是重点，提一下。
1 <script src="move.js"></script>
2 <script>
3 window.onload=function(){
4 var oDiv=document.getElementById('div1');
5
6 oDiv.onmouseover=function(){
7 startMove(oDiv,'width',200,function(){
8 startMove(oDiv,'height',200,function(){
9 startMove(oDiv,'opacity',100)
10 });//嵌套一个函数，来执行第二次运动
11 })
12 };
13
14 oDiv.onmouseout=function(){
15 startMove(oDiv,'opacity',30,function(){
16 startMove(oDiv,'height',100,function(){
17 startMove(oDiv,'width',100)
18 });//嵌套一个函数，来执行第二次运动
19 })
20 };
21 }
22 </script>
Json----其实关于他以前就说过他，他的数据存储方式很方便，类似于数组，但是调用的方式不一样，数组调用一般通过循环来实现，而且是一般的for循环，而Json要也通过for循环来实现，只不过是通过特殊的for in循环实现，for in循环会遍历所有的元素，也就是说会获取所有的元素，不会漏掉，在某些时候很实用。例如下面的实例，通过Json传参，给setStyle()传递多个参数，同时设置一个元素的多个属性，而没有必要写多个setStyle()函数，每个setStyle()函数只能设置一个属性。
1 <title>json应用</title>
2 <style>#div1{width:100px;height:100px;background:red;}</style>
3 <script>
4 function setStyle(obj,json){
5 var attr='';
6 for(attr in json){ //遍历所有的json里面的属性
7 obj.style[attr]=json[attr];
8 }
9 }
10
11 window.onload=function(){
12 var oDiv=document.getElementById('div1');
13 setStyle(oDiv,{width:'150px',height:'150px',background:'black'});//后面的第二个参数就是json
14 }
15 </script>
16 </head>
17
18 <body>
19 <div id="div1"></div>
20 </body>
for in循环----关于for in循环的一些细节，可以参看以下代码，想看看效果的可以复制代码，在自己的浏览器查看具体的运行效果。再说一下Json的格式，用大括号把各个元素括起来，a b c d 在下面的实例中就是他们的下标，和数组的不一样，相同的就是他们都有下标，只是形式不一样，元素与元素之间通过逗号隔开，下标和值之间使用冒号，话说这个格式有点蛋疼。。
1 <script>
2 var arr=[1,2,3,4];
3 var obj={a:1,b:2,c:3,d:4};
4 //alert(arr[2]); 数组和json的区别在于下标不一样
5 /*for(i in arr) 会遍历整个数组
6 {
7 alert(i+'='+arr[i]);
8 }*/
9 /*for(i in obj)
10 {
11 alert(i+'='+obj[i]);
12 }*/
13 //for循环可以更好地控制循环
14 </script>
不能同时在一个函数里的一个语句设置多个样式。同样的，下面的实例可以通过Json来解决，Json从某种程度上讲已经替代了XML，数据不再那么冗余，结构足够简单，作为技术发展迅速的现在，不要只是仅仅局限在当前，赶紧学习新技术，跟上潮流，需要深入学习Json的知识，这里只是皮毛，一起加油吧。下一篇文章会给出一个运动的完美框架，可以适用一些一般的运动效果。晚安:)
1 <style>
2 #div1{width:100px;height:100px;background:#666666;}
3 </style>
4 <script src="move.js"></script>
5 <script>
6 window.onload=function(){
7 var oDiv=document.getElementById('div1');
8 var oBtn=document.getElementById('btn1');
9 oBtn.onclick=function(){
10 startMove(oDiv,'width',200);
11 startMove(oDiv,'height',200);
12 //只有高可以变动，因为第一个定时器已经清除了
13 }
14 }
15 </script>
16 </head>
17
18 <body>
19 <input type="button" value="开始运动" id="btn1" />
20 <div id="div1"></div>
21 </body>
