本文阐述了JS特效的运动框架。分享给大家参考，如下：

前面的文章《js运动特效之同时运动》提到，我们的体育框架还是有问题的。是什么问题？对上一篇文章中的程序进行一些调整

oDiv . onmouseover=function(){//startMove(oDiv，{width:300，height:300，opa city 336030 })；startMove(oDiv，{width:204，height:300，opa city 336030 })；}当鼠标移入时，让我们将宽度改为204而不是300，看看会发生什么变化。

从图中可以看出，当鼠标移入时，只有宽度达到期望值204，而高度和不透明度没有达到目标值(目标值为300和0.3)。为什么呢？是由以下问题引起的

if(ObJattr==JSON[attr]){ ClearInterval(obj . timer)；if(fn){ fn()；}}在if语句中，只判断当objAttr等于目标值时，计时器将被清零(即只要有一个属性达到目标值，就会进入if，计时器将被清零)，但不判断“所有动作”都达到了目标值；宽度从200变为204，很快达到目标值，而高度和不透明度还在路上；但是，由于宽度已经达到目标值，所以输入if语句来清除计时器，宽度、高度和不透明度使用计时器，因此高度和不透明度固定在道路中间，永远无法达到目标值。

那怎么解决呢？

1.进入定时器时，设置一个标志位var flag，并使用它来检测是否所有运动都达到目标值。

函数startMove(obj，json，fn){ clearInterval(obj . timer)；obj . timer=setInterval(function(){ var flag=true；//一进入定时器就设置标志位，30)；}var标志=真；//表示所有移动都达到目标值varflag=false//表示有些动作没有达到目标值。2.然后在检测运动是否停止的语句中做出判断。

if(objAttr！=json[attr]){//判断是否所有移动都达到目标值//输入if语句，表示至少有一个移动没有达到目标值标志=false}中的每个属性.英寸循环变化(宽度、高度、不透明度.)，只要一个属性变化没有达到目标值，则标志标志的值为假；然后判断标志的值是否在整体之外.在.循环。如果仍然为真，则表示“所有运动”都已达到目标值，此时可以清除计时器

for(JSON中的attr){ } if(flag){//再次确定flag clearInterval(obj.timer)的值；if(fn){ fn()；}}计时器每30毫秒执行一次。进入时先设置var标志=true，然后向下执行，每次判断

if(objAttr！=json[attr]){.}只要存在未达到目标值的移动，就会进入if语句，并将标志设置为false。当定时器最后一次执行时，发现所有属性都达到了目标值。此时if语句站不住脚，所以没有机会将标志设置为flag，所以它最后一次进入定时器标志始终为true；然后，if(flag)的条件(.}满足，然后，如果(标志){ 0.}被执行。

这里很完美。看效果

完整的测试代码：

Hhtm和css与前一个完全相同。Js代码如下

脚本窗口。onload=function(){ var Odiv=document。getelementbyid(' div 1 ')；oDiv。onmouseover=function(){//startMove(oDiv，{width:300，height:300，opa city 336030 })；startMove(oDiv，{width:204，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){ clearInterval(obj。计时器)；物体。timer=setInterval(function(){ var bStop=true；for(JSON中的attr){//1 .取得当前的值（可以是宽度、高度、不透明度等的值)var Objattr=0；if(attr=='不透明度'){ objAttr=math。round(parseFloat(getStyle(obj，attr))* 100)；} else { Objatr=ParSeint(GetStyle(obj，attr))；} //2.计算运动速度var iSpeed=(JSON[attr]-Objattr)/10；iSpeed=iSpeed0？数学。最高时速：楼层(I速)；//3.检测所有运动是否到达目标if(objAttr！=JSON[attr]){ bSTop=false；} if(attr=='不透明度){ obj。风格。filter=' alpha(opa city 3360 '(Objattr isPeed)')'；物体。风格。不透明度=(Objattr isPeed)/100；} else { obj。style[attr]=Objattr isPeed ' px '；//需要又。属性名的形式改成[] } } if(bStop){ //表示所有运动都到达目标值clearInterval(obj。计时器)；if(fn){ fn()；} } },30);}/脚本到这里我们就可以把这个运动框架单独出来，保存成射流研究…文件供我们以后享用了！

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

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