[9种原生js动画效果(转) - lolDragon - 博客园]

原文地址：http://www.qdfuns.com/notes/21391/f6bf2265ea77df3ce9352d5a75e11c26.html

; "复制代码")

1，匀速动画效果
window.onload = function(){ var odiv = document.getElementById('odiv');
odiv.onmouseover = function(){
startMover(0);
}
odiv.onmouseout = function(){
startMover(-200);
}
} var timer = null; function startMover(itarget){//目标值
clearInterval(timer);//执行当前动画同时清除之前的动画
var odiv = document.getElementById('odiv');
timer = setInterval(function(){ var speed = 0; if(odiv.offsetLeft > itarget){
speed = -1;
} else{
speed = 1;
} if(odiv.offsetLeft == itarget){
clearInterval(timer);
} else{
odiv.style.left = odiv.offsetLeft+speed+'px';
}
},30);
} 2，缓冲动画效果
window.onload = function(){ var odiv = document.getElementById('odiv');
odiv.onmouseover = function(){
startMover(0);
}
odiv.onmouseout = function(){
startMover(-200);
}
} var timer = null; function startMover(itarget){//速度和目标值
clearInterval(timer);//执行当前动画同时清除之前的动画
var odiv = document.getElementById('odiv');
timer = setInterval(function(){ var speed = (itarget-odiv.offsetLeft)/10;//缓冲动画的速度参数变化值
//如果速度是大于0，说明是向右走，那么就向上取整
speed = speed>0?Math.ceil(speed):Math.floor(speed); //Math.floor();向下取整
if(odiv.offsetLeft == itarget){
clearInterval(timer);
} else{ //clientLeft 返回对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离
odiv.style.left = odiv.offsetLeft+speed+'px';
}
},30);
} 3，透明度动画
window.onload = function(){ var odiv = document.getElementsByTagName('div'); for(var i=0;i<odiv.length;i++)
{
odiv[i].onmouseover = function(){
startOP(this,100);
}
odiv[i].onmouseout = function(){
startOP(this,30);
}
odiv[i].timer = null;//事先定义
odiv[i].alpha = null;//事先定义
//这里发现一个问题，对象的动画属性可以不定义，但是透明度属性必须定义，否则报错
}
} function startOP(obj,utarget){
clearInterval(obj.timer);//先关闭定时器
obj.timer = setInterval(function(){ var speed = 0; if(obj.alpha>utarget){
speed = -10;
} else{
speed = 10;
}
obj.alpha = obj.alpha+speed; if(obj.alpha == utarget){
clearInterval(obj.timer);
}
obj.style.filter = 'alpha(opacity:'+obj.alpha+')';//基于IE的
obj.style.opacity = parseInt(obj.alpha)/100;
},30);
} 4，多物体动画

window.onload = function(){ var odiv = document.getElementById('odiv');

    odiv.onmouseover = function(){
        startMov(this);
    }; function startMov(obj){
        setInterval(function(){
            obj.style.width = parseInt(getStyle(obj,'width'))+1+'px';
            obj.style.fontSize = parseInt(getStyle(obj,'fontSize'))+1+'px';
        },30);
    } function getStyle(obj,attr)
    { if(obj.currentStyle){ return obj.currentStyle\[attr\];
        } else{ return getComputedStyle(obj,false)\[attr\];
        }
    }
} 6，多物体复杂动画

obj.style.filter = 'alpha(opacity:'+(icur+speed)+')';
obj.style.opacity = (icur+speed)/100;

} else{

obj.style\[attr\] = icur+speed+'px';
}

}
},30);
} function getStyle(obj,attr)
{ if(obj.currentStyle){ return obj.currentStyle[attr];
} else{ return getComputedStyle(obj,false)[attr];
}
}
} 8，链式动画
window.onload = function(){ var li1 = document.getElementById('li1');
li1.onmouseover = function(){
startMov(li1,400,'width',function(){
startMov(li1,200,'height',function(){
startMov(li1,100,'opacity');
});
});
};
li1.onmouseout = function(){
startMov(li1,30,'opacity',function(){
startMov(li1,100,'height',function(){
startMov(li1,100,'width');
});
});
};
li1.timer = null; function startMov(obj,itarget,attr,fn){//fn回调函数
clearInterval(obj.timer);//执行动画之前清除动画
obj.timer = setInterval(function(){ var icur = 0; if(attr == 'opacity'){
icur = Math.round(parseFloat(getStyle(obj,attr))*100);//转换成整数,并且四舍五入下
//计算机在计算小数的时候往往是不准确的！
} else{
icur = parseInt(getStyle(obj,attr));
} var speed =0;
speed = (itarget - icur)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed); if(icur == itarget){
clearInterval(obj.timer); if(fn){

fn();

}
} else{ if(attr == 'opacity'){

obj.style.filter = 'alpha(opacity:'+(icur+speed)+')';
obj.style.opacity = (icur+speed)/100;

} else{

obj.style\[attr\] = icur+speed+'px';
}

}
},30);
} function getStyle(obj,attr)
{ if(obj.currentStyle){ return obj.currentStyle[attr];
} else{ return getComputedStyle(obj,false)[attr];
}
}
} 9，多物体同时运动动画
window.onload = function(){ var li1 = document.getElementById('li1');
li1.onmouseover = function(){
startMov(li1,{width:201,height:200,opacity:100});
};
li1.onmouseout = function(){
startMov(li1,{width:200,height:100,opacity:30});
};
li1.timer = null; function startMov(obj,json,fn){//fn回调函数
clearInterval(obj.timer);//执行动画之前清除动画
var flag = true;//是否动画都完成了
obj.timer = setInterval(function(){ for(var attr in json){ var icur = 0; if(attr == 'opacity'){
icur = Math.round(parseFloat(getStyle(obj,attr))*100);//转换成整数,并且四舍五入下
//计算机在计算小数的时候往往是不准确的！
} else{
icur = parseInt(getStyle(obj,attr));
} var speed =0;
speed = (json[attr] - icur)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed); if(icur != json[attr]){
flag = false;
} if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity:'+(icur+speed)+')';
obj.style.opacity = (icur+speed)/100;
} else{
obj.style[attr] = icur+speed+'px';
} if(flag){
clearInterval(obj.timer); if(fn){

fn();

}
}
}
},30);
} function getStyle(obj,attr)
{ if(obj.currentStyle){ return obj.currentStyle[attr];
} else{ return getComputedStyle(obj,false)[attr];
}
}
}

; "复制代码")

原网址: 访问

创建于: 2018-10-12 02:09:00

目录: default

标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论