JavaScript运动框架的多值运动(4)

多值运动，也就是说，对于一个对象来说，不仅一个属性值在变化，而是很多，比如宽度、高度、字体、透明度等等，同时发生变化

当然，多值游戏会造成一个问题，那就是计时器什么时候会关闭！当然，所有的属性值都移动到目标值来清除计时器，也就是等待最慢。就像十个人一起吃饭，不能等一个人吃！

前面的文章都谈到了元素对象中属性的移动。这一次，我们讲了同一个元素对象中多个属性值的缓冲移动，所以每个属性都有一个终点(目标点)。我们以对象或json的形式编写这些属性及其目标值！容易产生的问题如上所述。这里使用了一个通用的速度函数，但是有些属性值的范围是100101，有些属性值的范围是100600。在关闭obj拥有的计时器之前，您必须等待时间最长的属性值达到目标值。设计思想是每次执行轮询函数时设置一个bStob=true。在json中遍历和扫描属性时，只要有属性没有达到目标值，就会设置为false，这样定时器就不会关闭。即使某些属性值已经到达终点，此时轮询仍会执行扫描，但该属性的运动速度为0，此时不会移动。也就是之前：

if(attr==cur){ cleartInterval(obj . timer)；}增强到：

if(bStop){ clearInterval(obj . timer)；}!doctype html head metharset=' utf-8 ' title运动帧(4):多值运动/title style type=' text/CSS ' div { width : 100px；高度： 100像素；背景：橙色；margin: 10px向左浮动：}/style/head body div id=' div 1 '/div script type=' text/JavaScript ' var oDiv=document . getelementbyid(' div 1 ')；odiv . onmouseover=function(){ var JSON={ width : 600，height: 200，opa city 3360 30 }；startMove(这个，JSON)；};odiv . onmouseout=function(){ var JSON={ width : 100，height: 100，opa city 3360 100 }；startMove(这个，JSON)；};函数getStyle(obj，attr){ if(obj . currentstyle){ return obj . currentstyle[attr]；} else { return getComputedStyle(obj，false)[attr]；} }函数startMove(obj，JSON){ clearInterval(obj . timer)；obj . timer=setInterval(function(){ var bStop=true；for(JSON中的var attr){ var cur=0；if (attr==='不透明度'){ cur=math . round(parseFloat(getStyle(obj，attr))* 100)；} else { cur=ParSeint(GetStyle(obj，attr))；} var speed=(JSON[attr]-cur)/10；速度=速度0？数学天花板(速度):数学地板(速度)；if (cur！=json[attr]) {//任何未达到目标点的属性都不会停止计时器，否则有些属性将达不到目标值bStop=false} if (attr==='不透明度'){ cur=速度；obj . style . filter=' alpha(opa city 3360 ' cur ')'；obj.style .不透明度=cur/100；//Chrome，IE } else { obj . style[attr]=cur speed ' px '；} }//整个周期结束后仍然保持真，表示没有未达到目标值的属性，即都达到了if(bstop){ clear interval(obj . timer)；//表示所有属性都达到了目标值} }，30)；}/脚本/正文/html

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。