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;}
var odiv = ElementById('odiv');
startMover(0);
}
startMover(-200);
}
}
var timer = null;
function startMover(itarget){//⽬标值
clearInterval(timer);//执⾏当前动画同时清除之前的动画
var odiv = ElementById('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;}
var odiv = ElementById('odiv');
startMover(0);
}
startMover(-200);
}
var timer = null;
function startMover(itarget){//速度和⽬标值
clearInterval(timer);//执⾏当前动画同时清除之前的动画
var odiv = ElementById('odiv');
timer = setInterval(function(){
var speed = (itarget-odiv.offsetLeft)/10;//缓冲动画的速度参数变化值
//如果速度是⼤于0，说明是向右⾛，那么就向上取整
speed = speed>il(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;}
var odiv = ElementsByTagName('div');
for(var i=0;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、多物体动画
说明：多个物体在⼀起执⾏的动画效果
多物体动画
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;} load = function(){
var olist = ElementsByTagName('li');
for(var i=0; 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>il(speed):Math.floor(speed);
if(obj.offsetWidth == itarget){
clearInterval(obj.timer);
}
else{
obj.style.width = obj.offsetWidth+speed+'px';
}
},30);
}
}
//offsetWidth获取的是元素实际的宽度(包括边框和内边距)
/
/只要是多物体运动，所有的属性都不能共⽤
5、获取样式动画
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论