同时分析JS体育特效的实现方法

本文通过一个例子来说明如何在移动中实现JS特效。分享给大家参考，如下：

然后最后一篇《JS运动特效之链式运动》继续折腾

在前一篇文章中，我们的运动框架可以使对象先变宽，变高并变得透明.这似乎是完美的！

看来我们可以喝茶看美女了。但是老板突然说，让你同时改变一个物体的宽度、高度和透明度，这让我心碎！

拍了之前的运动帧，发现不可能同时让div更宽、更高、更透明！最后我无能为力，只好欢迎json。不知道JSON的，去问杜娘。

startMove (obj，attr，itarget，fn)之前的函数startMove()都传入了一个attr属性，传入iTarget值之后，我们可以将属性和目标值成对放入JSON，然后只传入JSON来替换之前的attr和iTarget。

例如，如果我们想要更改宽度、高度和透明度，请将它们放入JSON : {宽度：300，高度：300，不透明度：30}

然后用for遍历这个json.在获取相应的属性和值，那么如何在运动框架程序中修改呢？

让我们从一个简单的测试开始来说明json

脚本var json={width:200，height:300，opa city 336030 }；for(JSON中的attr){ alert('属性为：' attr '-目标值' JSON[attr])；}/脚本

从上面弹出的结果中，我们可以看到json中的widht、height和不透明度是对应的属性名，200、300、30是目标值。遍历这个json对象，我们可以看到attr对应于每个属性名，而json[attr]对应于每个目标值。你大概应该明白怎么修改吧！

1.首先，函数start move中的attr和itarget(obj、attr、itar get、fn)被杀死，并传入一个json对象。

功能开始移动(obj，json，fn) 2。然后在计时器中遍历这个JSON，看看哪些属性需要更改

函数start move (obj，JSON，fn) {//fn:执行下一个移动的函数clearInterval(obj . timer)；Obj。timer=set interval(function(){ for(JSON中的键){//.用key替换之前传入的属性，json[atrr]替换之前的目标值//，即把之前startMove函数中的attr重写为key。ITarget重写为json[atrr] //，但为了方便起见，最好将key in for的名称直接重写为attr，for(attr在json中，所以不要在startMove中逐个重写attr，省事} }，30)；}完整的测试代码如下：

HTML部分：

Div id='div1'/divcss部分：

样式# div1 { width: 200px高度： 200 px；背景：绿色；}/stylejs部分：

脚本窗口。onload=function(){ var Odiv=document。getelementbyid(' div 1 ')；oDiv。onmouseover=function(){ startMove(Odiv，{width:300，height:300，opa city 336030 })；} oDiv。onmouseout=function(){ startMove(Odiv，{width:200，height:200，opa city 3360100 })；} }函数getStyle(obj，attr){返回getComputedStyle？getComputedStyle(obj，false)[attr]: obj。current style[attr]；}函数startMove(obj，json，fn) {//json代替了原来的属性和伊塔格参数clearInterval(obj。计时器)；物体。timer=setInterval(函数(){ for(JSON中的attr){ var Objattr=0；if(attr=='不透明度'){ //由于因为在里的键名字是属性所以这里不用替换objAttr=数学。round(parseFloat(getStyle(obj，attr))* 100)；} else { Objatr=ParSeint(GetStyle(obj，attr))；} var iSpeed=(JSON[attr]-Objattr)/10；//由之前的摩邑投替换成了json[attr] iSpeed=iSpeed0？数学。最高时速：楼层(I速)；if(ObJattr==JSON[attr]){ ClearInterval(obj。计时器)；if(fn){//如果传了"下一个运动的函数"就执行fn()；} }else{ if(attr=='不透明度){ obj。风格。filter=' alpha(opa city 3360 '(Objattr isPeed)')'；物体。风格。不透明度=(Objattr isPeed)/100；} else { obj。style[attr]=Objattr isPeed ' px '；} } } },30);}/脚本

到这里我们的运动框架几乎接近完美了，但是还有一个小问题，什么问题那？下回继续

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript运动效果与技巧汇总》 、 《JavaScript切换特效与技巧总结》 、 《JavaScript查找算法技巧总结》 、 《JavaScript动画特效与技巧汇总》 、 《JavaScript错误与调试技巧总结》 、 《JavaScript数据结构与算法技巧总结》 、 《JavaScript遍历算法与技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。