图片 1

目前的话

  除了拖拽以外,运动也是javascript动画的一个基本操作。通过CSS属性transitionanimation可以兑现移动。不过,要开展更精致地操作,javascript运动是必备的。本文将详细介绍javascript运动

 

自我最欢跃的动物是狗。小编全体它是一个有时候。有一次,小编和公公一起去岳丈单位的司长家。临走时,部长妻子充满爱心地递给小编贰只狗——三只油红的沙皮狗。于是,小编随后把那只原本属于局长孙女的狗带回了家,伊始了狗的一段生活。

简单运动

  让3个要素在页面中移动兴起很简短,设置定时器,改变一定成分的left或top值即可

<button id="btn">开始运动</button>
<button id="reset">还原</button>
<div id="test" style="height: 100px;width: 100px;background-color: pink;position:absolute;left:0;"></div>
<script>
var timer;
reset.onclick = function(){history.go();}
btn.onclick = function(){
    timer = setInterval(function(){
        if(test.offsetLeft < 500){
            test.style.left = test.offsetLeft + 10 + 'px';
        }else{
            test.style.left = '500px';
            clearInterval(timer);
        }    
    },30);
}
</script>

那只狗,不久就成了自小编的生活的整套。

定时器管理

  上边的代码中一直不举行定时器管理。当成分在活动的历程中,多次按下按钮,会张开八个定时器,从而使元素运动速度加速

  有二种定时器管理办法

【1】开启新定时器前,消除旧定时器

  [注意]尽管没有定时器的意况下,解决定时器也不会报错,只是静默战败

<button id="btn">开始运动</button>
<button id="reset">还原</button>
<div id="test" style="height: 100px;width: 100px;background-color: pink;position:absolute;left:0;"></div>
<script>
var timer;
reset.onclick = function(){history.go();}
btn.onclick = function(){
    clearInterval(timer);
    timer = setInterval(function(){
        if(test.offsetLeft < 500){
            test.style.left = test.offsetLeft + 10 + 'px';
        }else{
            test.style.left = '500px';
            clearInterval(timer);
        }    
    },30);
}
</script>

【2】当定时器未截止时,不允许开启新定时器

  [注意]由于定时器开启时,其再次来到值是一个不为0的平头,所以能够经过判断其重临值,来规定是还是不是采纳return语句

<button id="btn">开始运动</button>
<button id="reset">还原</button>
<div id="test" style="height: 100px;width: 100px;background-color: pink;position:absolute;left:0;"></div>
<script>
var timer;
reset.onclick = function(){history.go();}
btn.onclick = function(){
    if(timer) return;
    timer = setInterval(function(){
        if(test.offsetLeft < 500){
            test.style.left = test.offsetLeft + 10 + 'px';
        }else{
            test.style.left = '500px';
            clearInterval(timer);
        }    
    },30);
}
</script>

一起头得到那只狗,作者先导观看它。它的眼睛会笑,会说话,我每一天都会和它张嘴。此外,如若把它的嘴掰下来,它就成了2只兔子。

分享功用

  将来要做三个像样于“分享到”侧边栏的效能

<style>
#test{
    width: 100px;
    height: 100px;
    background-color: lightblue;
    text-align:center;
    position:absolute;
    top: 0;
    left: -100px;
}    
#test-in{
    width: 30px;
    height: 60px;
    background-color: orange;
    margin-left: 100px;
    position:relative;
    top: 20px;
}
</style>
<div id="test">
    <div id="test-in">分享到</div>
</div>    
<script>
test.onmouseover = function(){test.style.left = '0px';}
test.onmouseout = function(){test.style.left = '-100px';}
</script>

当即作者在上初一。初一始于学希腊语了,德语课本中出现了人教版中的多少个经典人物:露茜和lily。我将狗起名为露西。

移入移出

  如果把鼠标移入和鼠标移出都增多移动成效,则须要利用移动函数

  不过,有一个很要紧的标题亟需注意的是,鼠标移入移出的次第难题

  假使把移入移出事件都加在父成分的随身,则要求做如下处理

  由于鼠标从子成分移动到父成分上时,会触发子成分的移出事件,通过冒泡也会接触父成分移出事件。此时,有二种格局化解该难题。一种是在子成分移出事件中梗阻冒泡,另一种是在父成分移出事件设置target判断标准。当target为父成分本人时才实施

  鼠标从父成分移动到子成分的长河中,会坚守顺序触发父成分的移出事件、子成分的移入事件以及父成分的移入事件

  为了幸免接触移入事件。此时,使用开关变量对移入事件的代码举办限定。移出事件代码落成以前不履行移入事件代码

<script>
var testIn = document.getElementById('test-in');
var timer1,timer2;
var onOff = false;
test.onmouseover = function(){
    if(!onOff){    
        clearInterval(timer1);
        timer1 = setInterval(function(){
            if(!onOff){
                if(test.offsetLeft < 0){
                    test.style.left = test.offsetLeft + 10 + 'px';
                }else{
                    test.style.left = '0';
                    clearInterval(timer1);
                    timer1 = 0;
                }                    
            }else{
                clearInterval(timer1);
            }
        },30);
    }
}
test.onmouseout = function(e){
    e = e || event;
    var target = e.target || e.srcElement;
    if(target === test){
        //当触发父元素移出事件时,开启开关
        onOff = true;
        clearInterval(timer2);
        timer2 = setInterval(function(){
            if(test.offsetLeft > -100){
                test.style.left = test.offsetLeft - 10 + 'px';
            }else{
                test.style.left = '-100px';
                clearInterval(timer2);
                timer2 = 0;
                //当运动结束后,关闭开关
                onOff = false;
            }    
        },30);        
    }
}
</script>

有三回,我清晨和伯伯大妈一起出去吃饭,作者把Lucy在口门的沙发上,傍晚很晚回来,一开门,就看看它在门口笑。

运动函数

  从地点的代码中,可以见到运动部分的重新代码较多,把活动封装为带参数的函数更适用

<style>
#test{width: 100px;height: 100px;background-color:lightblue;text-align:center;position:absolute;top: 0;left: -100px;}    
#test-in{width: 30px;height: 60px;background-color: orange;margin-left: 100px;position:relative;top: 20px;}
</style>
<div id="test">
    <div id="test-in">分享到</div>
</div>    
<script>
var testIn = document.getElementById('test-in');
var timer;
test.onmouseover = function(){move(test,0,10);}
test.onmouseout = function(){move(test,-100,-10)}
function move(obj,target,speed){
    clearInterval(timer);
    timer = setInterval(function(){
        if((obj.offsetLeft - target)*speed < 0){
            obj.style.left = obj.offsetLeft + speed + 'px';
        }else{
            obj.style.left = target + 'px';
            clearInterval(timer);
            timer = 0;
        }                
    },16);        
}    
</script>

  由于不仅仅是left值能够做活动,其余质量(如width)也得以。所以,属性attr也相应作为参数提取出来

  这时就不可以利用offset类性质,而相应运用算算样式的包容函数getCSS()

function getCSS(obj,style){
    if(window.getComputedStyle){
        return getComputedStyle(obj)[style];
    }
    return obj.currentStyle[style];
}   

function move(obj,attr,target,speed){
    clearInterval(timer);
    timer = setInterval(function(){
        var cur = parseInt(getCSS(obj,attr));
        if((cur - target)*speed < 0){
            obj.style.left = cur + speed + 'px';
        }else{
            obj.style.left = target + 'px';
            clearInterval(timer);
            timer = 0;
        }                
    },30);        
}

 

本人天天放学回家,第叁件事就是回卧室和露西说话,小编自称为狗的姊姊。

透明度

  透明度是一个相比较分外的体裁,因为IE8-浏览器不援助opacity,只好通过滤镜的章程写成filter:阿尔法(opacity=透明值)

  可是,由于IE浏览器获取总括样式时,可以收获自定义样式,所以尽管opacity属性在IE8-浏览器无法生效,可是足以拿走它的值

  如若反射率做运动的话,则必要对活动函数举行双重打包

  [注意]鉴于折射率事关小数统计,如0.07*100=>
7.000000000000001,所以须求用Math.round()去掉尾巴

<style>
#test{width: 100px;height: 100px;background-color:lightblue;text-align:center;position:absolute;top: 0;left: 0;}    
#test-in{width: 30px;height: 60px;background-color: orange;margin-left: 100px;position:relative;top: 20px;}
</style>
<div id="test">
    <div id="test-in">分享到</div>
</div>    
<script>
var testIn = document.getElementById('test-in');
var timer;
test.onmouseover = function(){move(test,'opacity',0.1,-0.05);}
test.onmouseout = function(){move(test,'opacity',1,0.05)}
function getCSS(obj,style){
    if(window.getComputedStyle){
        return getComputedStyle(obj)[style];
    }
    return obj.currentStyle[style];
}   
function move(obj,attr,target,speed){
    clearInterval(timer);
    var cur;
    timer = setInterval(function(){
        if(attr == 'opacity'){
            cur = Math.round(getCSS(obj,attr)*100);
            if((cur - target*100)*speed < 0){
                obj.style.opacity = (cur + speed*100)/100;
                obj.style.filter = 'alpha(opacity=' + (cur + speed*100) + ')';
            }else{
                obj.style.opacity = target;
                obj.filter = 'alpha(opacity=' + target + ')';
                clearInterval(timer);
                timer = 0;
            }
        }else{
            cur = parseInt(getCSS(obj,attr));
            if((cur - target)*speed < 0){
                obj.style[attr] = cur + speed + 'px';
            }else{
                obj.style[attr] = target + 'px';
                clearInterval(timer);
                timer = 0;
            }    
        }

    },30);        
}    
</script>

小编会平常和Lucy拍照,3个雪天,作者拽着露西的耳朵在雪域中拍片。

多值

  假设二个成分有多少个值同时活动时,像上面那样直接调用move()函数是有失水准的

move(test,'opacity',0.1,-0.05);
move(test,'left',-100,-1);

  因为函数里面定时器的变量timer是三个集体变量,当二个运动截止时,会解决定时器。那时另一个活动就是没有马到功成,定时器已经终止了,就不只怕继续运动了

  所以,合适的做法是在参数对象obj上面设置二个自定义属性timers,timers为一个空对象,然后将定时器重回值储存在timers对象下的attr属性中,此时多少个定时器不会相互烦扰

<style>
#test{width: 100px;height: 100px;background-color: lightblue;text-align:center;position:absolute;top: 0;left: -100px;opacity:1;}    
#test-in{width: 30px;height: 60px;background-color: orange;margin-left: 100px;position:relative;top: 20px;}
</style>
<div id="test">
    <div id="test-in">分享到</div>
</div>    
<script>
test.onmouseover = function(){
    move(test,'opacity',0.1,-0.05);
    move(test,'left',0,10);
}
test.onmouseout = function(){
    move(test,'opacity',1,0.05);
    move(test,'left',-100,-10);
}
function getCSS(obj,style){
    if(window.getComputedStyle){
        return getComputedStyle(obj)[style];
    }
    return obj.currentStyle[style];
}   
function move(obj,attr,target,speed){
    if(!obj.timers){
        obj.timers = {};
    }
    clearInterval(obj.timers[attr]);
    var cur;
    obj.timers[attr] = setInterval(function(){
        if(attr == 'opacity'){
            cur = Math.round(getCSS(obj,attr)*100);
            if((cur - target*100)*speed < 0){
                obj.style.opacity = (cur + speed*100)/100;
                obj.style.filter = 'alpha(opacity=' + (cur + speed*100) + ')';
            }else{
                obj.style.opacity = target;
                obj.filter = 'alpha(opacity=' + target + ')';
                clearInterval(obj.timers[attr]);
                obj.timers[attr] = 0;
            }
        }else{
            cur = parseInt(getCSS(obj,attr));
            if((cur - target)*speed < 0){
                obj.style[attr] = cur + speed + 'px';
            }else{
                obj.style[attr] = target + 'px';
                clearInterval(obj.timers[attr]);
                obj.timers[attr] = 0;
            }    
        }        
    },30);        
}    
</script>

当本人学会了绘画后,小编给露茜画了一幅中国画,完全是写实的。

多物体

  即便在页面中有三个元素运用移动函数举行移动。由于定时器重临值在不相同因素不一致属性中都不会受影响。所以,上面的活动函数能够直接选取

<style>
div{height: 100px;width: 100px;position: absolute;left: 0;}
#test1{background-color: pink;top: 40px;}
#test2{background-color: lightblue;top: 150px;}
</style>
<div id="test1">元素一</div>
<div id="test2">元素二</div>
<button id="btn">开始运动</button>
<button id="reset">还原</button>    
<script>
reset.onclick = function(){history.go();}
btn.onclick = function(){
    move(test1,'width',300,10);
    move(test1,'left',100,10);
    move(test2,'width',500,20);
    move(test2,'left',200,10);
}
function getCSS(obj,style){
    if(window.getComputedStyle){
        return getComputedStyle(obj)[style];
    }
    return obj.currentStyle[style];
}   
function move(obj,attr,target,speed){
    if(!obj.timers){
        obj.timers = {};
    }
    clearInterval(obj.timers[attr]);
    var cur;
    obj.timers[attr] = setInterval(function(){
        if(attr == 'opacity'){
            cur = Math.round(getCSS(obj,attr)*100);
            if((cur - target*100)*speed < 0){
                obj.style.opacity = (cur + speed*100)/100;
                obj.style.filter = 'alpha(opacity=' + (cur + speed*100) + ')';
            }else{
                obj.style.opacity = target;
                obj.filter = 'alpha(opacity=' + target + ')';
                clearInterval(obj.timers[attr]);
                obj.timers[attr] = 0;
            }
        }else{
            cur = parseInt(getCSS(obj,attr));
            if((cur - target)*speed < 0){
                obj.style[attr] = cur + speed + 'px';
            }else{
                obj.style[attr] = target + 'px';
                clearInterval(obj.timers[attr]);
                obj.timers[attr] = 0;
            }    
        }        
    },30);        
}    
</script>

有了lucy,小编就只喜欢它了。不久,作者还又买了3头白狗,起名为Lily。

回调

  物体的四个属性恐怕不是还要活动,或然是1脾性质运动成功以往,另壹特性质再运动。倘使要成功那种要求,就必要用到回调函数

  在活动函数中,定时器为止时,再调用运动函数,就可以继承运动成效

<style>
div{height: 100px;width: 100px;position: absolute;left: 0;}
#test{background-color: pink;top: 40px;}
</style>
<div id="test">元素</div>
<button id="btn">开始运动</button>
<button id="reset">还原</button>    
<script>
reset.onclick = function(){history.go();}
btn.onclick = function(){
    move(test,'left',100,20,function(){
        move(test,'width',300,10)
    });
}
function getCSS(obj,style){
    if(window.getComputedStyle){
        return getComputedStyle(obj)[style];
    }
    return obj.currentStyle[style];
}   
function move(obj,attr,target,speed,fn){
    if(!obj.timers){obj.timers = {};}
    clearInterval(obj.timers[attr]);
    var cur;
    obj.timers[attr] = setInterval(function(){
        if(attr == 'opacity'){
            cur = Math.round(getCSS(obj,attr)*100);
            if((cur - target*100)*speed < 0){
                obj.style.opacity = (cur + speed*100)/100;
                obj.style.filter = 'alpha(opacity=' + (cur + speed*100) + ')';
            }else{
                obj.style.opacity = target;
                obj.filter = 'alpha(opacity=' + target + ')';
                clearInterval(obj.timers[attr]);
                obj.timers[attr] = 0;
                fn && fn.call(obj);
            }
        }else{
            cur = parseInt(getCSS(obj,attr));
            if((cur - target)*speed < 0){
                obj.style[attr] = cur + speed + 'px';
            }else{
                obj.style[attr] = target + 'px';
                clearInterval(obj.timers[attr]);
                obj.timers[attr] = 0;
                fn && fn.call(obj);
            }    
        }        
    },30);        
}    
</script>

lucy从来随同本人十多年,甚至出现在小编高校宿舍的枕边。下铺的幼女都晓得本身有二头“小破狗”。这几个名字即使有个别高雅,可是露茜经过了累累水洗已经明朗掉毛了。

函数完善

【速度参数】

  上面封装的函数中,传递速度参数时,要求在速度参数前添加正负号作为方向标识。实际上,那步可以写在函数的次序内,而只传递正的速度参数即可

speed = parseInt(getCSS(obj,attr)) < target ? speed : -speed;

【拉回操作】

  还有1个可以提高的地点,就是拉回操作。通过判断成分是不是到达目标点,借使当先目的点后,将成分拉回来目标点地点

cur = parseInt(getCSS(obj,attr));
if((cur - target)*speed < 0){
    obj.style[attr] = cur + speed + 'px';
}else{
    obj.style[attr] = target + 'px';
    clearInterval(obj.timers[attr]);
    obj.timers[attr] = 0;
    fn && fn.call(obj);
} 

  更客观的操作,应该是因素肯定不能跨越目标点

  所以应该把判断标准用来拍卖speed,当speed是二个适度的值时,再赋值给obj.style[attr],可更改如下

cur = parseInt(getCSS(obj,attr));
//若速度设置值使得元素超过目标点时,将速度设置值更改为目标点值 - 当前值
if((cur +speed - target)*speed > 0){
    speed = target - cur;    
}
//将合适的speed值赋值给元素的样式
obj.style[attr] = cur + speed + 'px';

//当元素到达目标点后,停止定时器
if(speed == target - cur){
    clearInterval(obj.timers[attr]);
    obj.timers[attr] = 0;
    fn && fn.call(obj);    
}

【使用步长】

  其实,把元素的移位变化命名为速度并不对劲,只是因为约定俗成的涉及才这么起名,将其取名为宽度step更为恰当,定时器每运营四回,该元素前特别

 

大学结业后,笔者重返家里。有一年的十一月一,作者和岳父大姨在广场上闲逛,看到了一个卖狗的人。他的脚边有1个笼子,笼子中四多只狗。大爷问她:“那是如何狗?”卖狗的人说:“腊肠。”“多少钱?”“150。”小编跟着说:“50啊!”卖狗的人依然很干脆地说:“好呢。”就这么,大家花了50元钱从市场上买回1只腊肠狗。大家走从前,卖狗的人对着狗说:“享福去吧!”

Interval函数

  以move.js的名字对该活动函数举办保存,在线地址

function getCSS(obj,style){
    if(window.getComputedStyle){
        return getComputedStyle(obj)[style];
    }
    return obj.currentStyle[style];
} 
function move(obj,attr,target,step,fn){
    //如果没有建立定时器对象,则在obj下建立定时器对象
    if(!obj.timers){obj.timers = {};}
    //清除定时器
    clearInterval(obj.timers[attr]);
    //声明当前值变量cur
    var cur;
    //判断步长step的正负值
    step = parseInt(getCSS(obj,attr)) < target ? step : -step;
    //开启定时器
    obj.timers[attr] = setInterval(function(){
        //如果样式是透明度
        if(attr == 'opacity'){
            //对当前值的取值进行四舍五入,去除由于javascript小数计数中的bug存在的小尾巴
            cur = Math.round(getCSS(obj,attr)*100);
            if((cur - target*100)*step < 0){
                //设置透明度
                obj.style.opacity = (cur + step*100)/100;
                //IE兼容
                obj.style.filter = 'alpha(opacity=' + (cur + step*100) + ')';
            //透明度到达指定目标时
            }else{
                obj.style.opacity = target;
                obj.filter = 'alpha(opacity=' + target + ')';
                //清除定时器
                clearInterval(obj.timers[attr]);
                obj.timers[attr] = 0;
                //设置回调函数
                fn && fn.call(obj);
            }
        //当样式不是透明度时
        }else{
            //获取样式当前值并赋值给cur
            cur = parseFloat(getCSS(obj,attr));
            ////若步长设置值使得元素超过目标点时,将步长设置值更改为目标点值 - 当前值
            if((cur + step - target)*step > 0){
                step = target - cur;
            }
            //将合适的步长值赋值给元素的样式
            obj.style[attr] = cur + step + 'px';
            //当元素到达目标点后,停止定时器
            if(step == target - cur){
                clearInterval(obj.timers[attr]);
                obj.timers[attr] = 0;
                fn && fn.call(obj);    
            }
        }        
    },30);        
}  

【实例】

  上边以三个实例来证实move函数的运用,点击document即可查看效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    background-color:lightblue;
}
div:nth-child(odd){
    background-color:pink;
}
</style>
</head>
<body>
<script src="http://files.cnblogs.com/files/xiaohuochai/move.js"></script>
<script>
var str = '';
var len = 10;
var timer;
var num = 0;
for(var i = 0; i < len; i++){
    str+= '<div style="left:'+60*i+'px;"></div>';
}
document.body.innerHTML = str;
document.onclick = function(){
    var aDiv = document.getElementsByTagName('div');
    if(timer) return;
    timer = setInterval(function(){
        move(aDiv[num++],'top', 200,10,function(){
            var _this = this;
            setTimeout(function(){
                move(_this,'top', 0,10);
            },1000)
        });
        if(num == len){
            clearInterval(timer);
            num = 0;
            setTimeout(function(){
                timer = 0;
            },2000);
        }
    },100);
}
</script>    
</body>
</html>

 

些微年过后,笔者才能明白那些卖狗的人说那句话时心里的的表情,这是一种对黑狗二叔般的慈爱。

Frame函数

  使用setInterval()的标题在于,定时器代码或然在代码再次被添加到队列以前还没有水到渠成实施,结果导致定时器代码连续运维好几遍,而里面从未其余停顿。而JS引擎对那个难点的缓解是:当使用setInterval()时,仅当没有该定时器的别的其余代码实例时,才将定时器代码添加到行列中。那确保了定时器代码参加到行列中的最小时间距离为指定间隔

  然则,这样会造成七个难题:壹,有个别间隔被跳过;二,几个定时器的代码执行之间的间隔大概比预想的小

  为了幸免setInterval()定时器的难点,可以应用链式requestAnimationFrame()调用,IE9-浏览器能够利用setTimeout()兼容

  以frameMove.js的名号保存该js文件

if (!window.requestAnimationFrame) {
    requestAnimationFrame = function(fn) {
        setTimeout(fn, 17);
    };    
}
if (!window.cancelAnimationFrame) {
    window.cancelAnimationFrame = function(id) {
        clearTimeout(id);
    };
}
function getCSS(obj,style){
    if(window.getComputedStyle){
        return getComputedStyle(obj)[style];
    }
    return obj.currentStyle[style];
}   
function move(obj,attr,target,step,fn){
  //如果没有建立定时器对象,则在obj下建立定时器对象
  if(!obj.timers){
    obj.timers = {};
  }
  //清除定时器
  cancelAnimationFrame(obj.timers[attr]);
  //声明当前值变量cur
  var cur;
  //判断步长step的正负值
  step = parseInt(getCSS(obj,attr)) < target ? step : -step;  
  //开启定时器
  obj.timers[attr] = requestAnimationFrame(function func(){
    //如果样式是透明度
    if(attr == 'opacity'){
        //对当前值的取值进行四舍五入,去除由于javascript小数计数中的bug存在的小尾巴
        cur = Math.round(getCSS(obj,attr)*100);
        if((cur - target*100)*step < 0){
            //设置透明度
            obj.style.opacity = (cur + step*100)/100;
            //IE兼容
            obj.style.filter = 'alpha(opacity=' + (cur + step*100) + ')';
            //递归调用定时器
            obj.timers[attr] = requestAnimationFrame(func);
        //透明度到达指定目标时    
        }else{
            obj.style.opacity = target;
            obj.filter = 'alpha(opacity=' + target + ')';
            //清除定时器
            cancelAnimationFrame(obj.timers[attr]);
            obj.timers[attr] = 0;
            //设置回调函数
            fn && fn.call(obj);
        }
    //当样式不是透明度时    
    }else{         
      //获取样式当前值并赋值给cur
      cur = parseInt(getCSS(obj,attr));
      //若步长设置值使得元素超过目标点时,将步长设置值更改为目标点值 - 当前值
      if((cur + step - target)*step > 0){
          step = target - cur;
      }
      //将合适的步长值赋值给元素的样式
      obj.style[attr] = cur + step + 'px';
      //递归调用定时器
      obj.timers[attr] = requestAnimationFrame(func);
      //当元素到达目标点后,停止定时器
      if(step == target - cur){
        cancelAnimationFrame(obj.timers[attr]);
        obj.timers[attr] = 0;
        fn && fn.call(obj);        
      }
    }   
  });  
}  

 

正午,大家和狗一起重返了家。狗一起先不太动,大姑乘上一碗水放在狗旁边,狗就上前去喝水了。小编打动地说:“狗喝水了。”

浏览器难点

  不论是Interval版本的位移函数,依旧requestAnimationFrame版本的位移函数,语法都并未难点。但浏览器却不日常。为了节约,对于那个不处于当前窗口的页面,浏览器会将时刻间隔伸张到一千毫秒。别的,若是台式机电脑处于电池供电境况,Chrome和IE10+浏览器,会将时刻间隔切换成系统定时器,大致是16.6飞秒

  定时器时间距离的转移,得到运动不能依照预期进展,很多时刻会现身预想不到的bug

  比如,依旧地点的事例,它是以iframe内联框架的样式引入页面的。假诺成分在运动进度中,拖动滚动条,使可视区域体现其余故事情节。过几分钟后,再移回来时,发现移动的因素已经冒出了bug

图片 2

  关于以上气象的消除办法是,只要页面不处在活动状态,定时器就告一段落运转,回到活动状态时,再恢复生机运营。可以行使window的onblur和onfocus事件来化解

  window.onblur = function(){
    //清除定时器
    cancelAnimationFrame(timer);
  }
  window.onfocus = function(){
    //开启定时器
    timer = requestAnimationFrame(func)
  }

  [注意]不得不动用window.onblur的款式,而不能动用window.add伊芙ntListener的款型  

  然则,当出现七个定时器时,此题材依旧不佳化解。更好的办法是利用岁月版运动

 

爹爹让本人给狗起壹个名字。作者想,狗汪汪叫,就起名“汪汪”。不久,就被二姨改成了“旺旺”,大姑说是旺财的意思。

旺旺到家没多短时间,就做了一件傻事,把lucy给咬了。于是,旺旺代替了lucy。

自己最欣赏的Lucy,我花了100元钱在网上定制了三个1:1玩偶。

旺旺很快变成了父亲的宠物狗。旺旺总会在四叔躺在沙发上时去趴到叔伯腿上。无论去到哪儿,二伯大姑都会带着旺旺出去。

婴儿出世后,很快就认了“旺旺狗大姑”。旺旺成了二姨,每一趟和宝宝一起出去,都会在虎子旁边保安宝宝。

每便旺旺被锁在门外,小编都会第临时间去开门,让旺旺进来。第贰,天,当自家坐在沙发上时,旺旺一定会死灰复燃用爪子蹭小编的裤子。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图