JavaScript运动框架多物体任意值运动（三)

前面两篇都是单物体的运动，本文开始讲多物体的运动，比如多个差异的各自不同的属性如宽，高，字体大小，透明度的缓冲运动变化。

从本文起，就不再使用偏中间，偏右边了等等，因为会出现问题，比如加个边界，偏移就会出现严重问题，参见我个人的博客Java脚本语言中在中间的臭虫及其对策解决方案就是封装getStyle(obj，attr)函数，用了获取运动中的当前值！

函数getStyle(obj，name){ if(obj。currentstyle){//IE返回物体。current style[name]；} else { return getComputedStyle(obj，false)[name]；}}既然是各个物体各自运动，那么他们之间有些变量就不能共享，比如定时器，每个对象都应有自己的定时器，因为每次启动定时器的时候先要清除上一个定时器，这就导致如果第一个物体还在运动，就把鼠标移动到第二个物体，瞬间清除上个定时器，导致第一个物体的运动不能运动到目标值就停下

另外，物体运动的样式，基本上就两类：一类是大小也就是像素为单位的属性，还有一类就是透明度！

！DOCTYPE html html head meta charset=' utf-8 '标题运动框架（三):多物体运动/title style type=' text/CSS ' div { width : 100px；高度： 100像素；背景：黄色；余量： 10px向左浮动：滤镜： alpha(opa城市3360100)；opa城市3360 1；} /style/headbody div id='div1 '变高/div div id='div2 '变宽/div div id=' div 3 '字体大小已更改/div div id=' div 4 ' alpha/div脚本类型=' text/JavaScript ' var doc=document；var ODI v1=doc。getelementbyid(' div 1 ')；ODI v1。onmouseover=function(){ startMove(这个，‘高度’，300)；};ODI v1。onmouseout=function(){ startMove(这个，‘高度’，100)；};var ODI v2=doc。getelementbyid(' div 2 ')；ODI v2。onmouseover=function(){ startMove(this，' width '，300)；};ODI v2。onmouseout=function(){ startMove(this，' width '，100)；};var ODI v3=doc。getelementbyid(' div 3 ')；odiv 3。onmouseover=function(){ startMove(this，' fontSize '，30)；};odiv 3。onmouseout=function(){ startMove(this，' fontSize '，16)；};var odiv 4=doc。getelementbyid(' div 4 ')；odiv 4。onmouseover=function(){ startMove(this，' opacity '，30)；};odiv 4。onmouseout=function(){ start move(此处为'不透明度',100);};函数getStyle(obj，attr){ if(obj。currentstyle){ return obj。current style[attr]；} else { return getComputedStyle(obj，null)[attr]；} }函数startMove(obj，attr，iTarget){ clearInterval(obj。计时器)；物体。timer=setInterval(function(){ var cur=0；if (attr=='不透明度){ cur=parseFloat(getStyle(obj，attr))* 100；} else { cur=ParSeint(GetStyle(obj，attr))；} var speed=(itar get-cur)/10；速度=速度0?数学天花板（速度):数学地板（速度);if(iTarget==cur){ clearInterval(obj。计时器)；} else { if (attr==='不透明度){ cur=speedobj。风格。filter=' alpha(opa city 3360 ' cur ')'；风格。不透明度=cur/100；//FireFox Chrome } else { cur=speed；物体。style[attr]=cur ' px '；} } }, 30);}/脚本/正文/html

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