运动---第四课时

最近比较忙，没来得及整理，再忙也要更新，最近在做一款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>

 


__EOF__

本文作者：Paxster
本文链接：https://www.cnblogs.com/paxster/archive/2013/06/04/3118040.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   Paxster  阅读(705)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 地球OL攻略 —— 某应届生求职总结
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· [AI/GPT/综述] AI Agent的设计模式综述
点击右上角即可分享
微信分享提示
AI IDE Trae