<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">原文地址:http://www.jb51.net/article/74686.htm
这篇文章主要介绍了九种原生js动画效果,个个都非常精彩,都值得大家学习,需要的朋友可以参考下。</span>
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">在做页面中,多数情况下都会遇到页面上做动画效果,我们大部分做动画的时候都是使用框架来做(比如jquery),这里我介绍下如何让通过原生的js来实现像框架一样的动画效果!</span>
1、匀速动画效果
说明:匀速动画就是动画的效果从开始到结束每次执行的速度都是一致的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>匀速动画</title>
<style type="text/css">
html,body{margin:0;padding:0;}
div{margin:0;padding:0;}
.odiv{width:200px; height:200px; background:#f00; position:relative; left:-200px; top:100px;}
.sdiv{width:20px; height:60px; background:#00f; position:absolute; top:70px; right:-20px;}
</style>
</head>
<body>
<div id="odiv" class="odiv">
<div id="sdiv" class="sdiv">
</div>
</div>
</body>
</html>
<script language="javascript">
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);
}
//注明:offsetWidth = width+padding+border
//offsetHeight = height+padding+border
//offsetWidth=(border-width)*2+(padding-left)+(width)+(padding-right)
//offsetHeight=(border-width)*2+(padding-top)+(height)+(padding-bottom)
/*
offsetLeft=(offsetParent的padding-left)+(中间元素的offsetWidth)+(当前元素的margin-left)。
offsetTop=(offsetParent的padding-top)+(中间元素的offsetHeight)+(当前元素的margin-top)。
当offsetParent为body时情况比较特殊:
在IE8/9/10及Chrome中,offsetLeft = (body的margin-left)+(body的border-width)+(body的padding-left)+(当前元素的margin-left)。
在FireFox中,offsetLeft = (body的margin-left)+(body的padding-left)+(当前元素的margin-left)。
offsetParent属性返回一个对象的引用,这个对象是距离调用offsetParent的元素最近的(在包含层次中最靠近的),并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素的引用。
总的来说两条规则:
1、如果当前元素的父级元素没有进行CSS定位(position为absolute或relative),offsetParent为body。
2、如果当前元素的父级元素中有CSS定位(position为absolute或relative),offsetParent取最近的那个父级元素。
*/
</script>
2、缓冲动画
说明:缓冲动画就是动画到结束或这开始的时候,速度是随着动画执行的进度动态变化的
3、透明度动画
说明:处理元素透明效果的动画
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>透明度动画</title>
<style type="text/css">
html,body{margin:0;padding:0;}
div{margin:0;padding:0;}
.odiv{width:200px; height:200px; background:#f00; position:relative; left:0px; top:100px;opacity:0.3; filter:alpha(opacity:30); float:left; margin:10px;}
</style>
</head>
<body>
<div id="odiv" class="odiv"></div>
</body>
</html>
<script language="javascript">
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);
}
</script>
4、多物体动画
说明:多个物体在一起执行的动画效果
5、获取样式动画
说明:这里的获取样式是通过计算出来元素的样式,然后通过这个计算出来的结果来操作元素
6、多物体复杂动画
说明:多物体复杂动画可以控制元素的不同属性变化来实现动画效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多物体复杂动画</title>
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tr,td {margin:0;padding:0; font-size:12px;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal}
ol,ul {list-style:none}
caption,th,td{text-align:center}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal}
q:before,q:after {content:''}
abbr,acronym { border:0}
.odiv{position:relative;}
.odiv ul li{width:200px; height:100px; background:yellow; margin-bottom:20px; border:2px solid #000;}
</style>
</head>
<body>
<div id="odiv" class="odiv">
<ul>
<li id="li1"></li>
<li id="li2"></li>
</ul>
</div>
</body>
</html>
<script language="javascript">
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];
}
}
}
//offsetWidth获取的是元素实际的宽度(包括边框和内边距)
//只要是多物体运动,所有的属性都不能共用
</script>
7、多物体复杂动画(带透明度的)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多物体复杂动画(带透明度的)</title>
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tr,td {margin:0;padding:0; font-size:12px;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal}
ol,ul {list-style:none}
caption,th,td{text-align:center}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal}
q:before,q:after {content:''}
abbr,acronym { border:0}
.odiv{position:relative;}
.odiv ul li{width:200px; height:100px; background:yellow; margin-bottom:20px; border:2px solid #000;}
#li1{opacity:0.3;filter:alpha(opacity:30);}
</style>
</head>
<body>
<div id="odiv" class="odiv">
<ul>
<li id="li1"></li>
<li id="li2"></li>
</ul>
</div>
</body>
</html>
<script language="javascript">
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];
}
}
}
//offsetWidth获取的是元素实际的宽度(包括边框和内边距)
//只要是多物体运动,所有的属性都不能共用
</script>
8、链式动画
说明:链式动画就是当前动画执行完成后执行下一个动画效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>链式动画</title>
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tr,td {margin:0;padding:0; font-size:12px;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal}
ol,ul {list-style:none}
caption,th,td{text-align:center}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal}
q:before,q:after {content:''}
abbr,acronym { border:0}
.odiv{position:relative;}
.odiv ul li{width:200px; height:100px; background:yellow; margin-bottom:20px; border:2px solid #000;}
#li1{opacity:0.3;filter:alpha(opacity:30);}
</style>
</head>
<body>
<div id="odiv" class="odiv">
<ul>
<li id="li1"></li>
</ul>
</div>
</body>
</html>
<script language="javascript">
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];
}
}
}
//offsetWidth获取的是元素实际的宽度(包括边框和内边距)
//只要是多物体运动,所有的属性都不能共用
</script>
9、多物体同时运动动画(支持链式动画)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多物体同时运动动画</title>
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tr,td {margin:0;padding:0; font-size:12px;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal}
ol,ul {list-style:none}
caption,th,td{text-align:center}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal}
q:before,q:after {content:''}
abbr,acronym { border:0}
.odiv{position:relative;}
.odiv ul li{width:200px; height:100px; background:yellow; margin-bottom:20px; border:2px solid #000;}
#li1{opacity:0.3;filter:alpha(opacity:30);}
</style>
</head>
<body>
<div id="odiv" class="odiv">
<ul>
<li id="li1"></li>
</ul>
</div>
</body>
</html>
<script language="javascript">
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];
}
}
}
//offsetWidth获取的是元素实际的宽度(包括边框和内边距)
//只要是多物体运动,所有的属性都不能共用
</script>
最后一个动画效果完善了上述所有动画的代码,自己可以根据上述的代码进行扩展!
其实这九种原生js动画效果,都有独特之处,每个源码都可以直接复制运行,希望对大家掌握js动画有所帮助。