本文实例讲述了JS运动特效之运动框架。分享给大家供大家参考,具体如下:
在前面一篇的《js运动特效之同时运动》中说过,我们的运动框架还存在一个问题,那究竟是什么问题那?把上一篇的程序做一下调整
oDiv。onmouseover=function () {//startMove (oDiv{宽度:300,身高:300,不透明度:30});
startMove (oDiv{宽度:204,身高:300,不透明度:30});
}
之前
在鼠标移入的时候,我们不让宽度变成300年,而是变成204,看看会有什么变化那? ?
从图可以看的出,当鼠标移入的时候,<强> 强,而高度和透明度都没有达到目标值(目标值是300和0.3),这是为什么那? ?是下面的问题引起的
如果(objAttr==json (attr]) {
clearInterval (obj.timer);
如果(fn) {
fn ();
}
}
之前
如果语句里只是判断当objAttr等于目标值的时候就清除定时器(也就是说,清除定时器),并不是判断”所有的运动”都达到了目标值;宽度从200变204年成很快就达到目标值了,而此时高度和不透明度还在半路上;但是由于宽度已经达到了目标值,所以就进入如果语句清除了定时器,宽度,高度,不透明度它们用的是一个定时器,所以此时高度和不透明度就定格在半道上永远无法达到目标值了。
那怎么解决那? ? ?
1。在,设置一个标志位var国旗,用它来检测是否所有的运动都到达目标值
函数startMove (obj、json、fn) {
clearInterval (obj.timer);
obj。计时器=setInterval(函数(){
var国旗=true;//一进入定时器设置标志位
}, 30);
}
var国旗=true;//表示所有的运动都到达目标值
var国旗=false;//表示有的运动没有到达目标值
之前
2。接着在检测运动是否停止的语句中
如果(objAttr !=json (attr]){//判断是否所有的运动都达到目标值//进入如果语句,说明至少有一个运动未到达目标值
国旗=false;
}
之前
的…。循环里面每一个属性做变化(widht、身高、不透明度…),只要有一个属性变化没有到达目标值,国旗标志的值就是假,然后在外判断标记的值,如果依然为真正的就标志”所有的运动”都到达了目标值,此时就可以清除定时器了
(attr以json) {
}
如果(国旗){//再次判断标志的值
clearInterval (obj.timer);
如果(fn) {
fn ();
}
}
之前
定时器每隔30毫秒执行一次,每次进入首先设置<代码> var国旗=true>
<代码>如果(objAttr !=json [attr)) {…}> 如果(国旗){,……,}> 如果(国旗){,……,}执行。
到这里就完美了,看下效果
Hhtm部分和css部分和上一篇完全一样js代码如下
& lt; script>
窗口。onload=function () {
var oDiv=. getelementbyid (“div1”);
oDiv。onmouseover=function () {//startMove (oDiv{宽度:300,身高:300,不透明度:30});
startMove (oDiv{宽度:204,身高:300,不透明度:30});
}
oDiv。onmouseout=function () {
startMove (oDiv{宽度:200,身高:200,不透明度:100});
}
}
函数getStyle (obj, attr) {
返回getComputedStyle & # 63;getComputedStyle (obj, false) [attr]: obj.currentStyle [attr);
}
函数startMove (obj、json、fn) {
clearInterval (obj.timer);
obj。计时器=setInterval(函数(){
var bStop=true;
(attr以json) {//1。取得当前的值(可以是widht,身高、透明度等的值)
var objAttr=0;
如果(attr==安煌该鞫取?{
objAttr=Math.round (parseFloat (getStyle (obj, attr)) * 100);
其他}{
objAttr=方法(getStyle (obj, attr));
}//2 .计算运动速度
var哲学=(json (attr] -objAttr)/10;
哲学=iSpeed> 0 & # 63; Math.ceil(哲学):Math.floor(哲学);//3。检测所有运动是否到达目标
如果(objAttr !=json (attr]) {
bStop=false;
}
如果(attr==安煌该鞫取?{
obj.style。过滤器='α(不透明度:' + (objAttr +哲学)+ ')';
obj.style。不透明度=(objAttr +哲学)/100;
其他}{
obj。风格(attr]=objAttr +哲学+“px”;//需要又。属性名的形式改成[]
}
}
如果(bStop){//表示所有运动都到达目标值
clearInterval (obj.timer);
如果(fn) {
fn ();
}
}
}, 30);
}
& lt;/script>
