Javascript动画效果(2)

前端之家收集整理的这篇文章主要介绍了Javascript动画效果(2)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在前面的文章中讲了简单的Javascript动画效果,这篇文章主要介绍我在改变之前代码时发现的一些问题及解决方法

在前面的多物体宽度变化的例子中,我们给其增加代码:border: 4px solid #000;我们发现,鼠标移出后,宽度不是200px了,那么究竟是如何产生这种情况的呢?下面我们通过一个新的例子来分析

HTML代码 css代码代码:

/*此时的效果为宽度不断增加

  • 加上border: 2px solid #000;之后,不断增大
  • 原因:当前的宽为202,减一后为201,大于200
  • 改变:oDiv.offsetWidth-2
  • 结果:宽永远为200px
  • 改变:字行内样式中加宽为200px<div id="div1" style="width: 200px;">
  • 结果:改变border的值,可以得到宽度减小的效果
  • 思考:使用getStyle函数
    */
  • 在这里,我们感觉是offsetWidth上存在问题,我们引入getStyle函数(其中的判断分别为兼容ie和firefox),

    然后我们对oDiv.style.width = oDiv.offsetWidth-1+'px';代码进行修改代码如下:

    在这里,得到的就是不断减小的效果。我们继续对代码进行修改

    css中: 效果为宽度不断减小,字体不断增大。(前面主要是学习getStyle的用法

    在这里,我们再回到多物体动画上,我们将之前代码中的的obj.offsetWidth改为parseInt(getStyle(obj,'width')),在这里我们通过图片看一下他们间的不同:

    我们可以发现,parseInt(getStyle(obj,'width'))出现了多次,我们可以将将parseInt(getStyle(obj,'width'))赋值给变量icur,这时我们得到的效果就比较好了,此时的代码如下:

    <Meta charset="UTF-8">

    猜你在找的JavaScript相关文章