9种原生js动画效果(转)
Posted 颉旺飞
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了9种原生js动画效果(转)相关的知识,希望对你有一定的参考价值。
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 olist = document.getElementsByTagName(‘li‘); for(var i=0; i<olist.length;i++) { olist[i].onmouseover = function(){ startmov(this,400); }; olist[i].onmouseleave = function(){ startmov(this,200); }; olist[i].timer = null; } function startmov(obj,itarget){ clearInterval(obj.timer);//执行动画之前清除动画 obj.timer = setInterval(function(){ var speed =0; speed = (itarget - obj.offsetWidth)/8; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(obj.offsetWidth == itarget){ clearInterval(obj.timer); } else{ obj.style.width = obj.offsetWidth+speed+‘px‘; } },30); } }
5,获取样式动画
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,多物体复杂动画
window.onload = function(){ var li1 = document.getElementById(‘li1‘); var li2 = document.getElementById(‘li2‘); li1.onmouseover = function(){ startMov(this,400,‘width‘); }; li1.onmouseout = function(){ startMov(this,200,‘width‘); }; li2.onmouseover = function(){ startMov(this,200,‘height‘); }; li2.onmouseout = function(){ startMov(this,100,‘height‘); }; function startMov(obj,itarget,attr){ clearInterval(obj.timer);//执行动画之前清除动画 obj.timer = setInterval(function(){ var 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); } 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]; } } }
7,多物体复杂动画(带透明度的)
window.onload = function(){ var li1 = document.getElementById(‘li1‘); var li2 = document.getElementById(‘li2‘); li1.onmouseover = function(){ startMov(this,100,‘opacity‘); }; li1.onmouseout = function(){ startMov(this,30,‘opacity‘); }; li2.onmouseover = function(){ startMov(this,200,‘height‘); }; li2.onmouseout = function(){ startMov(this,100,‘height‘); } li1.timer = null; li2.timer = null; function startMov(obj,itarget,attr){ 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); } 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]; } } }
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]; } } }
以上是关于9种原生js动画效果(转)的主要内容,如果未能解决你的问题,请参考以下文章