Javascript动画效果（2）

2024-12-01 06:23:27

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

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

html代码：
<div id="div1">hello</div>
css代码：
body,div{ margin: 0px; padding: 0px; }
div{ width: 200px; height: 200px; background: red; border: 1px solid #000;}
Javascript代码：

window.onload = function(){
  startMove();
}
function startMove(){
  setInterval(function(){
    var oDiv = document.getElementById('div1');
    oDiv.style.width = oDiv.offsetWidth-1+'px';
  },30)
}

/*此时的效果为宽度不断增加
 * 加上border: 2px solid #000;之后，不断增大
 * 原因：当前的宽为202，减一后为201，大于200
 * 改变：oDiv.offsetWidth-2
 * 结果：宽永远为200px
 * 改变：字行内样式中加宽为200px<div id="div1" style="width: 200px;"></div>
 * 结果：改变border的值，可以得到宽度减小的效果
 * 思考：使用getStyle函数
 */

在这里，我们感觉是offsetWidth上存在问题，我们引入getStyle函数（其中的判断分别为兼容ie和firefox），

function getStyle(obj,attr){
  if(obj.currentStyle){//ie
  return obj.currentStyle[attr];
}
  else{//firefox
    return getComputedStyle(obj,false)[attr];
  }
}

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

oDiv.style.width = parseInt(getStyle(oDiv,'width'))-1+'px';

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

css中：
div{ font-size: 12px;color: #fff;}
Javascript中：
oDiv.style.fontSize = parseInt(getStyle(oDiv,'fontSize'))+1+'px';
此时的效果为宽度不断减小，字体不断增大。（前面主要是学习getStyle的用法）

在这里，我们再回到多物体动画上，我们将之前代码中的的obj.offsetWidth改为parseInt(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: 0px;
        padding: 0px;
      }
      ul,li{
        list-style: none;
      }
      ul li{
        width: 200px;
        height: 100px;
        background: yellow;
        margin-bottom: 20px;
        border: 4px solid #000;
      }
    </style>
    <script type="text/javascript">
      window.onload = function(){
        var aLi = document.getElementsByTagName('li');
        for(var i = 0; i< aLi.length; i++){
          aLi[i].timer = null;
          aLi[i].onmouseover = function(){
            startMove(this,400);
          }
          aLi[i].onmouseout = function(){
            startMove(this,200);
          }
        }
      }
      function startMove(obj,iTarget){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
          var icur = parseInt(getStyle(obj,'width'));
          //将parseInt(getStyle(obj,'width'))赋值给变量icur
          var speed = (iTarget - icur)/10;
          speed = speed>0?Math.ceil(speed):Math.floor(speed);
          if(iTarget == icur){
            clearInterval(obj.timer);
          }
          else{
            //obj.style.width = icur+speed+'px';
            obj.style['width'] = icur+speed+'px';
          }
        },30)
      }
      function getStyle(obj,attr){
        if(obj.currentStyle){
          return obj.currentStyle[attr];
        }
        else
        {
          return getComputedStyle(obj,false)[attr];
        }
      }
    </script>
  </head>
  <body>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </body>
</html>

到这里，单一动画效果实现了，如果我们想要第一个li改变宽度，第二个li改变高度，这里我们应该怎样呢？

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

实现：

window.onload = function(){
  var Li1 = document.getElementById('li1');
  var Li2 = document.getElementById('li2');
  Li1.onmouseover = function(){
    startMove(this,400);
  }
  Li1.onmouseout = function(){
    startMove(this,100)
  }
  Li2.onmouseover = function(){
    startMove1(this,400);
  }
  Li2.onmouseout = function(){
    startMove1(this,200)
  }
}

function startMove(obj,iTarget){
  clearInterval(obj.timer);
  obj.timer = setInterval(function(){
    var icur = parseInt(getStyle(obj,'height'));
    var speed = (iTarget - icur)/10;
    speed = speed>0?Math.ceil(speed):Math.floor(speed);
    if(iTarget == icur){
      clearInterval(obj.timer);
    }
    else{
      obj.style['height'] = icur+speed+'px';
    }
  },30)
}

function startMove1(obj,iTarget){
  clearInterval(obj.timer);
  obj.timer = setInterval(function(){
    var icur = parseInt(getStyle(obj,'width'));
    var speed = (iTarget - icur)/10;
    speed = speed>0?Math.ceil(speed):Math.floor(speed);
    if(iTarget == icur){
      clearInterval(obj.timer);
    }
    else{
      obj.style['width'] = icur+speed+'px';
    }
  },30)
}

function getStyle(obj,attr){
  if(obj.currentStyle){//ie
    return obj.currentStyle[attr];
  }
  else
  {
    return getComputedStyle(obj,false)[attr];
  }
}

这里的效果是：鼠标在第一个时，改变高度；在第二个时，改变宽度。并且我们发现前面的代码中有很多重复的，我们依然根据以前的方法，将不同的部分取出来，用参数的方法传进去同样达到我们想要的效果，（这里不同的是width和height，我们用一个参数attr来传进去），代码如下：

window.onload = function(){
  var Li1 = document.getElementById('li1');
  var Li2 = document.getElementById('li2');
  Li1.onmouseover = function(){
    startMove(this,'height',400);
  }
  Li1.onmouseout = function(){
    startMove(this,'height',100)
  }
  Li2.onmouseover = function(){
    startMove(this,'width',400);
  }
  Li2.onmouseout = function(){
    startMove(this,'width',200)
  }
}

function startMove(obj,attr,iTarget){
  clearInterval(obj.timer);
  obj.timer = setInterval(function(){
    var icur = parseInt(getStyle(obj,attr));
    var speed = (iTarget - icur)/10;
    speed = speed>0?Math.ceil(speed):Math.floor(speed);
    if(iTarget == icur){
      clearInterval(obj.timer);
    }
    else{
      obj.style[attr] = icur+speed+'px';
    }
  },30)
}

在这里，我们试着给透明度也来进行变化，

css中：
ul li{ filter:alpha(opacity:30);opacity:0.3;}

Javascript中：

window.onload = function(){
  var Li1 = document.getElementById('li1');
  var Li2 = document.getElementById('li2');
  Li1.onmouseover = function(){
    startMove(this,'opacity',100);
  }
  Li1.onmouseout = function(){
    startMove(this,'opacity',30)
  }
}

奇怪的是，居然没有我们想要的结果

原因：假设1：宽度一般为整型，而opacity的值为0-1；假设2：opacity是没有单位的

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

var icur = 0;
if(attr == 'opacity'){
  icur = parseFloat(getStyle(obj,attr))*100;
}else{
  icur = parseInt(getStyle(obj,attr));
}

修改2：再增加一个判断

if(iTarget == icur){
  clearInterval(obj.timer);
}
else{
if(attr = 'opacity'){
  obj.style.filter = 'alpha(opacity:'+(icur+speed)+')';
  obj.style.opacity = (icur+speed)/100;
}
else{
obj.style[attr] = icur+speed+'px';
}
}

修改后我们在浏览器下，仍能发现问题，就是opacity的值比1大了一点点

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

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

var icur = 0;
if(attr == 'opacity'){
  icur = Math.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: 0px;
        padding: 0px;
      }
      ul,li{
        list-style: none;
      }
      ul li{
        width: 200px;
        height: 100px;
        background: yellow;
        margin-bottom: 20px;
        border: 4px solid #000;
        filter:alpha(opacity:30);
        opacity:0.3;
      }
    </style>
    <script type="text/javascript">
      window.onload = function(){
        var Li1 = document.getElementById('li1');
        var Li2 = document.getElementById('li2');
        Li1.onmouseover = function(){
          startMove(this,'opacity',100);
        }
        Li1.onmouseout = function(){
          startMove(this,'opacity',30)
        }
      }

      function startMove(obj,attr,iTarget){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
          var icur = 0;
          if(attr == 'opacity'){
            icur = Math.round(parseFloat(getStyle(obj,attr))*100);
          }else{
            icur = parseInt(getStyle(obj,attr));
          }
          var speed = (iTarget - icur)/10;
          speed = speed>0?Math.ceil(speed):Math.floor(speed);
          if(iTarget == icur){
            clearInterval(obj.timer);
          }
          else{
            if(attr = 'opacity'){
              obj.style.filter = 'alpha(opacity:'+(icur+speed)+')';
              obj.style.opacity = (icur+speed)/100;
            }
            else{
              obj.style[attr] = icur+speed+'px';
            }
          }
        },30)
      }   

      function getStyle(obj,attr){
        if(obj.currentStyle){
          return obj.currentStyle[attr];
        }
        else
        {
          return getComputedStyle(obj,false)[attr];
        }
      }
    </script>
  </head>
  <body>
    <ul>
      <li id="li1"></li>
    </ul>
  </body>
</html>

这样，我们就可以对我们的运动进行任意值的变化了。

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

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

九种原生js动画效果

在做页面中,多数情况下都会遇到页面上做动画效果,我们大部分做动画的时候都是使用框架来做(比如jquery),这里我介绍下如何让通过原生的js来实现像框架一样的动画效果! 1.匀速动画效果说明:匀速动画就是动画的效果从开始到结束每次执行的速度都是一致的 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit
JS动画效果代码3

慢慢来,这次实现了向任意方向扩展! 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> &l
原生javascript实现匀速运动动画效果

本文向大家介绍一个javascript实现的动画.点击开始按钮div会往右移动,点击停止后,div停止移动,再点击则继续移动.请看下面代码: <html> <head> <meta charset="gb2312"> <head> <title>javascript实现的简单动画</title> <style type="text/css"> #mydiv { width:50px;
在AngularJS应用中实现一些动画效果的代码

在Angular当中,CSS和JavaScript之间唯一的区别就是它们的定义.没有什么区别妨碍到被定义的动画被使用.首先,我们需要加载ngAnimate模块到我们应用的root模块当中. angular.module('coursesApp', ['ngAnimate']); 而所有将被处理的JavaScript动画事件依然保持不变.以下是一个直接支持的动画列表和它们对应的不同行为: 指令事件集 ng-view ng-include ng-switch ng-if enter leave n
使用ngView配合AngularJS应用实现动画效果的方法

AngularJS 提供了一个很棒的方式来创建单页app.正是由于这个原因,使得我们的站点看起来更像是一个原生的手机程序.为了使它看起来更像是原生的程序,我们可以使用 ngAnimate module 为它添加过渡和动画效果. 这个模块可以使我们创建漂亮的程序.今天,我们将要看一下如何为 ng-view 添加动画效果. 我们要构建什么我们假设我们有一个单页面的程序,并且想为这个页面添加动画效果.点击某一个链接会将一个试图滑出,同时将另一个试图滑入. 我们将会使用: 使用 ngRoute 来为我
JavaScript实战之带收放动画效果的导航菜单

虽然有很多插件可用,但为了共同提高,我做了一系列JavaScript实战系列的实例,分享给大家,前辈们若有好的建议,请务必指出,免得误人子弟啊! 今天是第一战:带收放动画效果的菜单,效果如下图:(样式有点丑(-^-)) ( 由于在写本文时,用的编辑器不同,暂时添加不了演示效果,这里有:最终完整代码和演示 ) 动画效果:鼠标hover改变所有目标的背景和字体颜色,鼠标移动到'首页导航',显示下面的分组菜单,分组菜单有子菜单,点击可缩放,带动画过度效果!而且,可以随便添加和删除导航菜单和子菜单,不
javascript制作loading动画效果 loading效果

复制代码代码如下: /*ajax提交的延时等待效果*/ var AjaxLoding = new Object(); //wraperid : 显示loding图片的容器元素//ms:表示loding图标显示的时长,毫秒//envent:表示出发事件的事件源对象,用于获得出发事件的对象//callback:表示动画结束后执行的回掉方法//stop()方法表示在回掉方法执行成功后执行的隐藏动画的操作AjaxLoding.load = function(lodingid,ms,event,left
JavaScript仿flash遮罩动画效果

本文实例为大家分享了JavaScript仿flash遮罩动画的具体实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>仿flash遮罩动画</title> <meta name="keywords" content=""> <meta name="
原生js仿jquery animate动画效果

jquery animate动画效果: 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画</title> <style> *{margin:0;padding:0;} .box{width: 400px;height: 300px;background: #000;margin:40
图片的左右移动，js动画效果实现代码

图片的左右移动,动画效果的实现 =(xk+xp)/2) { if (smer == 1) step--; else step++; } else { if (smer == 1) step++; else step--; } if (x >= xk) { x = xk; smer = -1; } if (x [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

Javascript动画效果（2）

相关推荐

随机推荐