Javascript动画效果(2)

在前一篇文章中，我谈到了简单的Javascript动画效果。本文主要介绍我在修改之前的代码时发现的一些问题和解决方法。

在前面的多对象宽度更改示例中，我们添加了代码：border: 4px solid # 000我们发现鼠标移出后，宽度不是200px，那么这是怎么发生的呢？让我们用一个新的例子来分析它

Html代码：div id='div1'hello/divcss代码：body，div { margin: 0pxpadding: 0px} div { width: 200px高度： 200 px；背景：红色；border: 1px固体# 000；}Javascript代码：

window . onload=function(){ startMove()；}函数startMove(){ setInterval(function(){ var oDiv=document . getelementbyid(' div 1 ')；odiv . style . width=odiv . offsetwidth-1 ' px '；}，30)}/*此时的效果是增加宽度*加上边框： 2px实心# 000；之后不断增加*原因：当前宽度为202，一次缩小后为201，大于200 *变化：odiv . offset with-2 *结果：宽度始终为200px *变化：线条样式中的宽度加宽为200px div ID=' div 1 '样式=' width3360 200px'/div *结果：改变边框的值可以减少宽度*思考：使用getStyle函数*/这里我们觉得offsetWidth有问题，所以引入getStyle函数(判断分别兼容ie和firefox)。

函数getStyle(obj，attr){ if(obj . currentstyle){//ie返回obj . currentstyle[attr]；} else{//firefox返回getComputedStyle(obj，false)[attr]；}}然后我们给出odiv . style . width=odiv . offset with-1 ' px '；按如下方式修改代码：

oDiv . style . width=parsent(getStyle(oDiv，' width ')-1 ' px '；

我们得到的是递减效应。我们继续修改代码

在CSS:div { font-size : 12px；color: # fff} in } JavaScript:odiv . style . font size=par sent(getstyle(odiv，' font size '))1 ' px '；此时的效果是宽度在减小，字体在增大。(之前主要学习了getStyle的用法)

在这里，让我们回到多对象动画。在前面的代码中，我们将obj.offsetWidth更改为parsent(getStyle(obj，' Width ')。下面我们通过图片来看看它们之间的区别：

我们可以发现parseInt(getStyle(obj，' width ')出现了很多次，我们可以把parseInt(getStyle(obj，' width ')赋给变量icur，然后得到更好的结果。此时的代码如下：

！DOCTYPE html html head meta charset=' UTF-8 ' title/title style type=' text/CSS ' body，ul，Li { margin : 0pxpadding : 0px } ul，Li { list-style : none；} ul li {宽度： 200像素高度： 100像素；背景：黄色；边距-底部： 20pxborder: 4px固体# 000;}/style脚本类型=' text/JavaScript '窗口。onload=function(){ var AlI=document。getelementsbytagname(' Li ')；for(var I=0；I AlI . len thi){ AlI[I].定时器=nullaLi[i].onmouseover=function(){ startMove(this，400)；} aLi[i].onmouseout=function(){ startMove(this，200)；} } }函数startMove(obj，itar get){ clearInterval(obj。计时器)；物体。timer=setInterval(function(){ var icur=parsent(getStyle(obj，' width '))))；//将解析器(GetStyle(obj，‘width’)赋值给变量icur var speed=(itar get-icur)/10；速度=速度0?Math.ceil(速度):路径。地板(速度);if(iTarget==icur){ clearInterval(obj。计时器)；} else {//obj。风格。宽度=icur速度' px '；obj.style['width']=icur速度px '；} },30) }函数getStyle(obj，attr){ if(obj。currentstyle){ return obj。current style[attr]；} else { return getComputedStyle(obj，false)[attr]；} }/脚本/标题/正文ul Li/Li Li/Li Li/ul/正文/html到这里，单一动画效果实现了，如果我们想要第一个里改变宽度，第二个里改变高度，这里我们应该怎样呢？

思路：在里里面加入id，分情况实现，代码：li id='li1'/li li id='li2'/li

实现：

窗户。onload=function(){ var Li1=document。getelementbyid(' Li1 ')；var Li2=文档。getelementbyid(' Li2 ')；li1。onmouseover=function(){ startMove(this，400)；} Li1。onmouseout=function(){ startMove(this，100)} Li2。onmouseover=function(){ startMove 1(this，400)；} li2。onmouseout=function(){ start move 1(this，200) }} function startMove(obj，itar get){ clearInterval(obj。计时器)；物体。timer=setInterval(function(){ var icur=parsent(getStyle(obj，' height '))))；var speed=(iTarget-icur)/10；速度=速度0?Math.ceil(速度):路径。地板(速度);if(iTarget==icur){ clearInterval(obj。计时器)；} else { obj。style[' height ']=icur速度' px '；} },30)}函数startMove1(obj，itar get){ clearInterval(obj。计时器)；物体。timer=setInterval(function(){ var icur=parsent(getStyle(obj，' width '))))；var speed=(iTarget-icur)/10；速度=速度0?Math.ceil(速度):路径。地板(速度);if(iTarget==icur){ clearInterval(obj。计时器)；} else { obj。style[' width ']=icur速度' px '；} },30)}函数getStyle(obj，attr){ if(obj。currentstyle){//ie return obj。current style[attr]；} else { return getComputedStyle(obj，false)[attr]；}}这里的效果是：鼠标在第一个时，改变高度；在第二个时，改变宽度。并且我们发现前面的代码中有很多重复的，我们依然根据以前的方法，将不同的部分取出来，用参数的方法传进去同样达到我们想要的效果，(这里不同的是宽度和高度，我们用一个参数属性来传进去),代码如下：

窗户。onload=function(){ var Li1=document。getelementbyid(' Li1 ')；var Li2=文档。getelementbyid(' Li2 ')；li1。onmouseover=function(){ startMove(这个，‘高度’，400)；} Li1。onmouseout=function(){ start move(this，' height '，100)} Li2。onmouseover=function(){ start move(this，' width '，400)；} li2。onmouseout=function(){ start move(this，' width '，200) }} function startMove(obj，attr，itar get){ clearInterval(obj。计时器)；物体。timer=setInterval(function(){ var icur=parsent(getStyle(obj，attr))；var speed=(iTarget-icur)/10；速度=速度0?Math.ceil(速度):路径。地板(速度);if(iTarget==icur){ clearInterval(obj。计时器)；} else { obj。style[attr]=icur速度' px '；} },30)}在这里，我们试着给透明度也来进行变化，

钢性铸铁中：ul Li { filter : alpha(opa city 336030)；opacity:0.3 }

爪哇岛描述语言中：

窗户。onload=function(){ var Li1=document。getelementbyid(' Li1 ')；var Li2=文档。getelementbyid(' Li2 ')；li1。onmouseover=function(){ startMove(this，)不透明度',100);} li1。onmouseout=function(){ startMove(this，)不透明度',30) }}奇怪的是，居然没有我们想要的结果

原因：假设1:宽度一般为整型，而不透明的值为0-1;假设2:不透明度是没有单位的

修改1:增加一个判断，当传入的值为不透明的时候，我们执行parseFloat，代码如下：

var icur=0；if(attr=='不透明度){ icur=parseFloat(getStyle(obj，attr))* 100；} else { icur=ParSeint(GetStyle(obj，attr))；}修改2:再增加一个判断

if(iTarget==icur){ clearInterval(obj。计时器)；}else{if(attr='不透明度){ obj。风格。filter=' alpha(opa city 3360 '(icur speed)')'；obj.style.opacity=(icur速度)/100;} else { obj。style[attr]=icur速度' px '；}}修改后我们在浏览器下，仍能发现问题，就是不透明的值比一大了一点点

原因分析：计算机的运算并不是那么准确，会出现误差，

修改：我们在前面增加一个数学。回合，对小数部分进行四舍五入，代码如下

var icur=0；if(attr=='不透明度'){ icur=数学。round(parseFloat(getStyle(obj，attr))* 100)；} else { icur=ParSeint(GetStyle(obj，attr))；}这样，我们的效果就基本完成了，全部代码如下：

！DOCTYPE html html head meta charset=' UTF-8 ' title/title style type=' text/CSS ' body，ul，Li { margin : 0pxpadding : 0px } ul，Li { list-style : none；} ul li {宽度： 200像素高度： 100像素；背景：黄色；边距-底部： 20pxborder: 4px固体# 000;滤镜： alpha(opa city 336030)；opa city 33600.3 }/style脚本类型=' text/JavaScript '窗口。onload=function(){ var Li1=document。getelementbyid(' Li1 ')；var Li2=文档。getelementbyid(' Li2 ')；li1。onmouseover=function(){ startMove(this，)不透明度',100);} li1。onmouseout=function(){ start move(this，' opacity '，30) } } function startMove(obj，attr，itar get){ clearInterval(obj。计时器)；物体。timer=SetInterval(function(){ var icur=0；if(attr=='不透明度'){ icur=数学。round(parseFloat(getStyle(obj，attr))* 100)；} else { icur=ParSeint(GetStyle(obj，attr))；} var speed=(itar get-icur)/10；速度=速度0?Math.ceil(速度):路径。地板(速度);if(iTarget==icur){ clearInterval(obj。计时器)；} else{ if(attr='不透明度){ obj。风格。filter=' alpha(opa city 3360 '(icur speed)')'；obj.style.opacity=(icur速度)/100;} else { obj。style[attr]=icur速度' px '；} } },30) }函数getStyle(obj，attr){ if(obj。currentstyle){ return obj。current style[attr]；} else { return getComputedStyle(obj，false)[attr]；} }/脚本/标题正文ul Li id=' li1 '/Li/ul/正文/html这样，我们就可以对我们的运动进行任意值的变化了。

其实，在不是不觉间，就已经将一个简单的动画进行了封装，得到一个简单的爪哇岛描述语言动画库了。后面，我们将继续对我们爪哇岛描述语言库进行补充。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。