这篇文章主要介绍了九种原生射流研究…动画效果，个个都非常精彩，都值得大家学习，需要的朋友可以参考下
在做页面中，多数情况下都会遇到页面上做动画效果，我们大部分做动画的时候都是使用框架来做（比如jquery)，这里我介绍下如何让通过原生的射流研究…来实现像框架一样的动画效果！
1、匀速动画效果
说明：匀速动画就是动画的效果从开始到结束每次执行的速度都是一致的
！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www。w3。org/TR/XHTML 1/DTD/XHTML 1-过渡。' DTD '
html xmlns=' http://。w3。' org/1999/XHTML '
头
meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /
标题匀速动画/标题
style type='text/css '
html，body { margin:0；填充：0;}
div { margin:0；填充：0;}。odiv {宽度：200像素高度：200像素背景：# f00位置：相对；左：-200 px；top:100px；}。sdiv { width:20px；高度：60px背景：# 00f位置：绝对；顶配：70px右：-20px；}
/风格
/头
身体
div id='odiv' class='odiv '
div id='sdiv' class='sdiv '
/div
/div
/body
/html
脚本语言='javascript '
window.onload=function(){
var odiv=文档。getelementbyid(' odiv ')；
odiv.onmouseover=function(){
启动移动器(0)；
}
odiv.onmouseout=function(){
启动移动器(-200)；
}
}
var timer=null
函数startMover(itarget){//目标值
间隙(定时器);//执行当前动画同时清除之前的动画
var odiv=文档。getelementbyid(' odiv ')；
timer=setInterval(function(){
定义变量速度=0;
if(odiv.offsetLeft itarget){
速度=-1;
}
否则{
速度=1;
}
if(odiv.offsetLeft==itarget){
间隙(定时器);
}
否则{
奥迪夫。风格。左=odiv。偏左速度' px '；
}
},30);
}
//注明：offsetWidth=填充边框宽度
//offsetHeight=填充边框的高度
//offsetWidth=(border-width)*2(左填充)(宽度)(右填充)
//offsetHeight=(边框宽度)*2(填充顶部)(高度)(填充底部)
/*
offsetLeft=(offsetParent的左填充) (中间元素的偏移量) (当前元素的左边距).
offsetTop=(offsetParent的填充顶部) (中间元素的偏高) (当前元素的页边距-顶部).
当父代为身体时情况比较特殊：
在2010年9月8日及铬中，offsetLeft=(body的左边距)(正文)的边框宽度)(正文的左填充) (当前元素的左边距).
在火狐浏览器中，offsetLeft=(body的左边距)(正文)的左填充) (当前元素的左边距).
父代属性返回一个对象的引用，这个对象是距离调用父代的元素最近的（在包含层次中最靠近的),并且是已进行过半铸钢钢性铸铁(铸造半钢)定位的容器元素。如果这个容器元素未进行半铸钢钢性铸铁(铸造半钢)定位，则父代属性的取值为根元素的引用。
总的来说两条规则：
1、如果当前元素的父级元素没有进行半铸钢钢性铸铁(铸造半钢)定位（位置为绝对的或相对)，offsetParent为身体。
2、如果当前元素的父级元素中有半铸钢钢性铸铁(铸造半钢)定位（位置为绝对的或相对)，offsetParent取最近的那个父级元素。
*/
/脚本
2、缓冲动画
说明：缓冲动画就是动画到结束或这开始的时候，速度是随着动画执行的进度动态变化的
！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www。w3。org/TR/XHTML 1/DTD/XHTML 1-过渡。' DTD '
html xmlns=' http://。w3。' org/1999/XHTML '
头
meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /
标题缓冲动画/标题
style type='text/css '
html，body { margin:0；填充：0;}
div { margin:0；填充：0;}。odiv {宽度：200像素高度：200像素背景：# f00位置：相对；左：-200 px；top:100px；}。sdiv { width:20px；高度：60px背景：# 00f位置：绝对；顶配：70px右：-20px；}
/风格
/头
身体
div id='odiv' class='odiv '
div id='sdiv' class='sdiv '
/div
/div
/body
/html
脚本语言='javascript '
window.onload=function(){
var odiv=文档。getelementbyid(' odiv ')；
odiv.onmouseover=function(){
启动移动器(0)；
}
odiv.onmouseout=function(){
启动移动器(-200)；
}
}
var timer=null
函数startMover(itarget){//速度和目标值
间隙(定时器);//执行当前动画同时清除之前的动画
var odiv=文档。getelementbyid(' odiv ')；
timer=setInterval(function(){
var speed=(itarget-odiv。向左偏移)/10；//缓冲动画的速度参数变化值
//如果速度是大于0,说明是向右走，那么就向上取整
speed=speed0？Math.ceil(速度):Math.floor(速度);
//数学。floor()；向下取整
if(odiv.offsetLeft==itarget){
间隙(定时器);
}
否则{
//客户端左侧返回对象的偏左属性值和到当前窗口左边的真实值之间的距离
奥迪夫。风格。左=odiv。偏左速度' px '；
}
},30);
}
/脚本
3、透明度动画
说明：处理元素透明效果的动画
！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www。w3。org/TR/XHTML 1/DTD/XHTML 1-过渡。' DTD '
html xmlns=' http://。w3。' org/1999/XHTML '
头
meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /
标题透明度动画/标题
style type='text/css '
html，body { margin:0；填充：0;}
div { margin:0；填充：0;}。odiv {宽度：200像素高度：200像素背景：# f00位置：相对；左：0pxtop:100px；不透明度：0.3;滤镜：阿尔法(不透明度：30);浮动：左；边距：10px}
/风格
/头
身体
div id='odiv' class='odiv'/div
/body
/html
脚本语言='javascript '
window.onload=function(){
var odiv=文档。getelementsbytagname(' div ')；
for(var I=0；碘的长度；我)
{
odiv[i].onmouseover=function(){
startOP(这个，100);
}
odiv[i].onmouseout=function(){
startOP(这个，30);
}
odiv[i].timer=null//事先定义
odiv[i].alpha=null//事先定义
//这里发现一个问题，对象的动画属性可以不定义，但是透明度属性必须定义，否则报错
}
}
函数startOP(obj，utarget){
清除间隔(对象。定时器)；//先关闭定时器
obj。timer=setInterval(function(){
定义变量速度=0;
如果（目标)
速度=-10;
}
否则{
速度=10;
}
阿尔法=阿尔法速度；
if(obj.alpha==utarget){
清除间隔(对象。定时器)；
}
obj。风格。filter=' alpha(不透明度：' obj。阿尔法“)”；//基于工业管理学(工业工程)的
obj。风格。不透明度=解析int(obj。alpha)/100；
},30);
}
/脚本
4、多物体动画
说明：多个物体在一起执行的动画效果
！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www。w3。org/TR/XHTML 1/DTD/XHTML 1-过渡。' DTD '
html xmlns=' http://。w3。' org/1999/XHTML '
头
meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /
标题多物体动画/标题
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；填充：0;字体大小：12px}
表{ border-collapse:折叠；边框间距：0;}
字段集，img {border:0}
地址，标题，引用，代码、dfn、em、strong、th、var { font-style:normal；font-weight:normal}
ol，ul {列表样式：无}
标题，th，td{text-align:center}
h1、h2、h3、h4、h5、h6 { font-size:100%；font-weight:normal}
问：之前，问：之后{内容：' ' }
abbr，acronym { border:0}。odiv {位置：相对；}。odiv ul Li {宽度：200 px高度：100像素背景：黄色；边距-底部：20px}
/风格
/头
身体
div id='odiv' class='odiv '
保险商实验所
李/李
李/李
李/李
/ul
/div
/body
/html
脚本语言='javascript '
window.onload=function(){
var olist=文档。getelementsbytagname(' Li ')；
for(var I=0；长度我)
{
奥利斯特[我].onmouseover=function(){
startmov(这个，400);
};
奥利斯特[我].onmouseleave=function(){
startmov(这个，200);
};
奥利斯特[我].计时器=空
}
函数startmov(obj，itarget){
清除间隔(对象。定时器)；//执行动画之前清除动画
obj。timer=setInterval(function(){
定义变量速度=0;
speed=(itarget-obj。offsetwidth)/8；
speed=speed0？Math.ceil(速度):Math.floor(速度);
if(obj.offsetWidth==itarget){
清除间隔(对象。定时器)；
}
否则{
obj。风格。宽度=obj。偏移宽度速度' px '；
}
},30);
}
}
//offsetWidth获取的是元素实际的宽度（包括边框和内边距)
//只要是多物体运动，所有的属性都不能共用
/脚本
5、获取样式动画
说明：这里的获取样式是通过计算出来元素的样式，然后通过这个计算出来的结果来操作元素
！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www。w3。org/TR/XHTML 1/DTD/XHTML 1-过渡。' DTD '
html xmlns=' http://。w3。' org/1999/XHTML '
头
meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /
标题样式动画/标题
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；填充：0;字体大小：12px}
表{ border-collapse:折叠；边框间距：0;}
字段集，img {border:0}
地址，标题，引用，代码、dfn、em、strong、th、var { font-style:normal；font-weight:normal}
ol，ul {列表样式：无}
标题，th，td{text-align:center}
h1、h2、h3、h4、h5、h6 { font-size:100%；font-weight:normal}
问：之前，问：之后{内容：' ' }
abbr，acronym { border:0}。odiv {位置：相对；宽度：200像素高度：200像素边框：2px纯色# 000;背景：红色；字体大小：20px}
/风格
/头
身体
div id='odiv' class='odiv '
hjshfjdfsdfhsdj
/div
/body
/html
脚本语言='javascript '
/*
当前样式：获取计算后的样式，也叫当前样式、最终样式。
优点：可以获取元素的最终样式，包括浏览器的默认值，而不像风格只能获取行间样式，所以更常用到。
注意：不能获取复合样式如背景属性值，只能获取单一样式如背景颜色等。
警报(oabc。当前风格)；
非常遗憾的是，这个好使的东西也不能被各大浏览器完美地支持。准确地说，在我测试的浏览器中，IE8和歌剧11弹出了"对象csstyledeclaration "；FF 12、chrome 14、safari 5则弹出"未定义".
虽然当前样式无法适用于所有浏览器，但是可以根据以上测试的结果来区分开支持、不支持的浏览器，然后再找到兼容的写法。
var oAbc=文档。getelementbyid(' ABC ')；
if(oAbc.currentStyle) {
//IE、Opera
警报('我支持当前样式’)；
}否则{
//FF、chrome、safari
警报('我不支持当前样式’)；
}
其实在消防浏览器中我们可以使用getComputedStyle(obj，false)来达到与工业管理学(工业工程)下当前样式相同的效果。
getComputedStyle(obj，false):在消防新版本中只需要第一个参数，即操作对象，第二个参数写"假"也是大家通用的写法，目的是为了兼容老版本的火狐浏览器。
兼容写法：
var oAbc=文档。getelementbyid(' ABC ')；
if(oAbc.currentStyle) {
//IE、Opera
//alert('我支持当前样式’)；
警报(oabc。当前风格。宽度)；
}否则{
//FF、chrome、safari
//alert('我不支持当前样式’)；
alert(getComputedStyle(oAbc，false).宽度);
}
一个空白页面中身体的id="abc "，测试以上代码，即和歌剧弹出"自动",其它三款浏览器则弹出“* * * * px”。虽然结果不同，但是可以发现铬和旅行队也都和火狐一样，顺利地读取到了属性值。不支持当前样式的三款浏览器(FF、chrome、safari)，都是支持getComputedStyle的。
结果表明：对浏览器是否支持当前样式的判断getComputedStyle，就可以做到兼容各主流浏览器的效果。而且兼容写法并不复杂，你掌握了吗？^_^
支持当前风格：即歌剧
支持getComputedStyle:火狐、Chrome、Safari
注意最后的弹出内容，当前样式返回浏览器的默认值"自动",而getComputedStyle则返回具体的值“**px”。这应该是两者的一个小差异，有兴趣的童鞋可以一起交流研究下。
*/
window.onload=function(){
var odiv=文档。getelementbyid(' odiv ')；
odiv.onmouseover=function(){
startMov(这个);
};
函数startMov(obj){
setInterval(function(){
obj。风格。width=parse int(get style(obj，' width '))1 ' px '；
obj。风格。font size=parse int(get style(obj，' font size '))1 ' px '；
},30);
}
函数getStyle(obj，attr)
{
if(obj.currentStyle){
返回对象。当前样式[属性]；
}
否则{
return getComputedStyle(obj，false)[attr]；
}
}
}
//offsetWidth获取的是元素实际的宽度（包括边框和内边距)
//只要是多物体运动，所有的属性都不能共用
/脚本
6、多物体复杂动画
说明：多物体复杂动画可以控制元素的不同属性变化来实现动画效果
！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www。w3。org/TR/XHTML 1/DTD/XHTML 1-过渡。' DTD '
html xmlns=' http://。w3。' org/1999/XHTML '
头
meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /
标题多物体复杂动画/标题
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；填充：0;字体大小：12px}
表{ border-collapse:折叠；边框间距：0;}
字段集，img {border:0}
地址，标题，引用，代码、dfn、em、strong、th、var { font-style:normal；font-weight:normal}
ol，ul {列表样式：无}
标题，th，td{text-align:center}
h1、h2、h3、h4、h5、h6 { font-size:100%；font-weight:normal}
问：之前，问：之后{内容：' ' }
abbr，acronym { border:0}。odiv {位置：相对；}。odiv ul Li {宽度：200 px高度：100像素背景：黄色；边距-底部：20px边框：2px纯色# 000;}
/风格
/头
身体
div id='odiv' class='odiv '
保险商实验所
li id='li1'/li
li id='li2'/li
/ul
/div
/body
/html
脚本语言='javascript '
window.onload=function(){
var li1=文档。getelementbyid(' li1 ')；
var li2=文档。getelementbyid(' li2 ')；
li1.onmouseover=function(){
startMov(这个，400,'宽度');
};
li1.onmouseout=function(){
startMov(这个，200，’宽度');
};
li2.onmouseover=function(){
startMov(这个，200,'身高');
};
li2.onmouseout=function(){
startMov(这个，100,'身高');
};
函数startMov(obj，itarget，attr){
清除间隔(对象。定时器)；//执行动画之前清除动画
obj。timer=setInterval(function(){
var icur=parseInt(getStyle(obj，attr))；
定义变量速度=0;
速度=(itarget-icur)/8；
speed=speed0？Math.ceil(速度):Math.floor(速度);
if(icur==itarget){
清除间隔(对象。定时器)；
}
否则{
icur速度px’；
}
},30);
}
函数getStyle(obj，attr)
{
if(obj.currentStyle){
返回对象。当前样式[属性]；
}
否则{
return getComputedStyle(obj，false)[attr]；
}
}
}
//offsetWidth获取的是元素实际的宽度（包括边框和内边距)
//只要是多物体运动，所有的属性都不能共用
/脚本
7、多物体复杂动画（带透明度的)
！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www。w3。org/TR/XHTML 1/DTD/XHTML 1-过渡。' DTD '
html xmlns=' http://。w3。' org/1999/XHTML '
头
meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /
标题多物体复杂动画（带透明度的)/标题
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；填充：0;字体大小：12px}
表{ border-collapse:折叠；边框间距：0;}
字段集，img {border:0}
地址，标题，引用，代码、dfn、em、strong、th、var { font-style:normal；font-weight:normal}
ol，ul {列表样式：无}
标题，th，td{text-align:center}
h1、h2、h3、h4、h5、h6 { font-size:100%；font-weight:normal}
问：之前，问：之后{内容：' ' }
abbr，acronym { border:0}。odiv {位置：相对；}。odiv ul Li {宽度：200 px高度：100像素背景：黄色；边距-底部：20px边框：2px纯色# 000;}
# li1 {不透明度：0.3;滤镜：阿尔法(不透明度：30);}
/风格
/头
身体
div id='odiv' class='odiv '
保险商实验所
li id='li1'/li
li id='li2'/li
/ul
/div
/body
/html
脚本语言='javascript '
window.onload=function(){
var li1=文档。getelementbyid(' li1 ')；
var li2=文档。getelementbyid(' li2 ')；
li1.onmouseover=function(){
startMov(这个，100,'不透明度');
};
li1.onmouseout=function(){
startMov(这个，30,'不透明');
};
li2.onmouseover=function(){
startMov(这个，200,'身高');
};
li2.onmouseout=function(){
startMov(这个，100,'身高');
}
li1.timer=null
li2.timer=null
函数startMov(obj，itarget，attr){
清除间隔(对象。定时器)；//执行动画之前清除动画
obj。timer=setInterval(function(){
var icur=0；
if(attr=='opacity'){
icur=数学。round(parse float(get style(obj，attr))* 100)；//转换成整数，并且四舍五入下
//计算机在计算小数的时候往往是不准确的！
}
否则{
icur=parseInt(getStyle(obj，attr))；
}
定义变量速度=0;
速度=(itarget-icur)/8；
speed=speed0？Math.ceil(速度):Math.floor(速度);
if(icur==itarget){
清除间隔(对象。定时器)；
}
否则{
if(attr=='opacity'){
obj.style.filter='alpha(不透明度：'(icur速度)')';
obj.style.opacity=(icur速度)/100;
}
否则{
icur速度px’；
}
}
},30);
}
函数getStyle(obj，attr)
{
if(obj.currentStyle){
返回对象。当前样式[属性]；
}
否则{
return getComputedStyle(obj，false)[attr]；
}
}
}
//offsetWidth获取的是元素实际的宽度（包括边框和内边距)
//只要是多物体运动，所有的属性都不能共用
/脚本
8、链式动画
说明：链式动画就是当前动画执行完成后执行下一个动画效果
！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www。w3。org/TR/XHTML 1/DTD/XHTML 1-过渡。' DTD '
html xmlns=' http://。w3。' org/1999/XHTML '
头
meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /
标题链式动画/标题
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；填充：0;字体大小：12px}
表{ border-collapse:折叠；边框间距：0;}
字段集，img {border:0}
地址，标题，引用，代码、dfn、em、strong、th、var { font-style:normal；font-weight:normal}
ol，ul {列表样式：无}
标题，th，td{text-align:center}
h1、h2、h3、h4、h5、h6 { font-size:100%；font-weight:normal}
问：之前，问：之后{内容：' ' }
abbr，acronym { border:0}。odiv {位置：相对；}。odiv ul Li {宽度：200 px高度：100像素背景：黄色；边距-底部：20px边框：2px纯色# 000;}
# li1 {不透明度：0.3;滤镜：阿尔法(不透明度：30);}
/风格
/头
身体
div id='odiv' class='odiv '
保险商实验所
li id='li1'/li
/ul
/div
/body
/html
脚本语言='javascript '
window.onload=function(){
var li1=文档。getelementbyid(' li1 ')；
li1.onmouseover=function(){
startMov(li1，400，' width '，function(){
startMov(li1，200，' height '，function(){
start mov(1100立不透明度');
});
});
};
li1.onmouseout=function(){
startMov(li1，30，' opacity '，function(){
startMov(li1，100，' height '，function(){
start mov(1100立宽度');
});
});
};
li1.timer=null
函数startMov(obj，itarget，attr，fn){//fn回调函数
清除间隔(对象。定时器)；//执行动画之前清除动画
obj。timer=setInterval(function(){
var icur=0；
if(attr=='opacity'){
icur=数学。round(parse float(get style(obj，attr))* 100)；//转换成整数，并且四舍五入下
//计算机在计算小数的时候往往是不准确的！
}
否则{
icur=parseInt(getStyle(obj，attr))；
}
定义变量速度=0;
速度=(itarget-icur)/8；
speed=speed0？Math.ceil(速度):Math.floor(速度);
if(icur==itarget){
清除间隔(对象。定时器)；
如果(fn){
fn()；
}
}
否则{
if(attr=='opacity'){
obj.style.filter='alpha(不透明度：'(icur速度)')';
obj.style.opacity=(icur速度)/100;
}
否则{
icur速度px’；
}
}
},30);
}
函数getStyle(obj，attr)
{
if(obj.currentStyle){
返回对象。当前样式[属性]；
}
否则{
return getComputedStyle(obj，false)[attr]；
}
}
}
//offsetWidth获取的是元素实际的宽度（包括边框和内边距)
//只要是多物体运动，所有的属性都不能共用
/脚本
9、多物体同时运动动画（支持链式动画)
！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www。w3。org/TR/XHTML 1/DTD/XHTML 1-过渡。' DTD '
html xmlns=' http://。w3。' org/1999/XHTML '
头
meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /
标题多物体同时运动动画/标题
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；填充：0;字体大小：12px}
表{ border-collapse:折叠；边框间距：0;}
字段集，img {border:0}
地址，标题，引用，代码、dfn、em、strong、th、var { font-style:normal；font-weight:normal}
ol，ul {列表样式：无}
标题，th，td{text-align:center}
h1、h2、h3、h4、h5、h6 { font-size:100%；font-weight:normal}
问：之前，问：之后{内容：' ' }
abbr，acronym { border:0}。odiv {位置：相对；}。odiv ul Li {宽度：200 px高度：100像素背景：黄色；边距-底部：20px边框：2px纯色# 000;}
# li1 {不透明度：0.3;滤镜：阿尔法(不透明度：30);}
/风格
/头
身体
div id='odiv' class='odiv '
保险商实验所
li id='li1'/li
/ul
/div
/body
/html
脚本语言='javascript '
window.onload=function(){
var li1=文档。getelementbyid(' li1 ')；
li1.onmouseover=function(){
startMov(li1，{宽度：201,高度：200,不透明度：100 });
};
li1.onmouseout=function(){
startMov(li1，{宽度：200,高度：100,不透明度：30 });
};
li1.timer=null
函数startMov(obj，json，fn){//fn回调函数
清除间隔(对象。定时器)；//执行动画之前清除动画
var flag=true//是否动画都完成了
obj。timer=setInterval(function(){
对于(JSON中的var属性
var icur=0；
if(attr=='opacity'){
icur=数学。round(parse float(get style(obj，attr))* 100)；//转换成整数，并且四舍五入下
//计算机在计算小数的时候往往是不准确的！
}
否则{
icur=parseInt(getStyle(obj，attr))；
}
定义变量速度=0;
速度=(JSON[attr]-icur)/8；
速度=速度
eed>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动画有所帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。