js动画与html动画效果,九种原生js动画效果

在做页面中，多数情况下都会遇到页面上做动画效果，我们大部分做动画的时候都是使用框架来做(比如jquery)，这里我介绍下如何让通过原生的js来实现像框架一样的动画效果！

1、匀速动画效果说明：匀速动画就是动画的效果从开始到结束每次执行的速度都是一致的

匀速动画

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;}

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取最近的那个父级元素。

*/

2、缓冲动画说明：缓冲动画就是动画到结束或这开始的时候，速度是随着动画执行的进度动态变化的

缓冲动画

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;}

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、透明度动画

说明：处理元素透明效果的动画

透明度动画

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;}

window.onload = function(){

v