首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Javascript动画效果（2）

Posted in Javascript onOctober 11, 2016

在前面的文章中讲了简单的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'))，在这里我们通过图片看一下他们间的不同：

Javascript动画效果（2）

 我们可以发现，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库进行补充。

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

Javascript动画效果（2）

- Author -

foodoir

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
深入理解JavaScript系列(12) 变量对象（Variable Object）
Jan 16 Javascript
node.js中的fs.open方法使用说明
Dec 17 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
Jul 27 Javascript
JavaScript笔记之数据属性和存储器属性
Mar 31 Javascript
JavaScript 继承详解（六）
Oct 11 Javascript
自己封装的一个原生JS拖动方法(推荐)
Nov 22 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
Oct 09 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
Nov 06 Javascript
详解如何使用router-link对象方式传递参数？
May 02 Javascript
vue实现分页栏效果
Jun 28 Javascript
js贪心算法 钱币找零问题代码实例
Sep 11 Javascript
微信小程序页面渲染实现方法
Nov 06 Javascript
Javascript动画效果（1）
Oct 11 #Javascript
原生Javascript和jQuery做轮播图简单例子
Oct 11 #Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
Oct 11 #Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
Oct 11 #Javascript
Node.js的文件权限及读写flag详解
Oct 11 #Javascript
最原始的jQuery注册验证方式
Oct 11 #Javascript
js正则表达式注册页面表单验证
Oct 11 #Javascript
B+树(2) 优化(1) muduo(1) TcpServer(1) instantclient(1) ICF-5900W(2) pt-archiver(1) 忘记密码(1) 存储过程(3) 增删改查(2)
You might like
php5 pdo新改动加载注意事项
2008/09/11 PHP
精美漂亮的php分页类代码
2013/04/02 PHP
php中explode函数用法分析
2014/11/15 PHP
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
CodeIgniter记录错误日志的方法全面总结
2016/05/17 PHP
jquery 防止表单重复提交代码
2010/01/21 Javascript
Vue数据驱动模拟实现5
2017/01/13 Javascript
JS事件循环机制event loop宏任务微任务原理解析
2020/08/04 Javascript
[36:37]2014 DOTA2华西杯精英邀请赛5 24 VG VS iG
2014/05/25 DOTA
[01:11]steam端dota2实名认证操作流程视频
2021/03/11 DOTA
详解Python中time()方法的使用的教程
2015/05/22 Python
Python入门_条件控制(详解)
2017/05/16 Python
Django 忘记管理员或忘记管理员密码 重设登录密码的方法
2018/05/30 Python
Python之csv文件从MySQL数据库导入导出的方法
2018/06/21 Python
pycharm运行和调试不显示结果的解决方法
2018/11/30 Python
详解Appium+Python之生成html测试报告
2019/01/04 Python
python 多线程重启方法
2019/02/18 Python
Python Web版语音合成实例详解
2019/07/16 Python
django使用django-apscheduler 实现定时任务的例子
2019/07/20 Python
浅谈Tensorflow 动态双向RNN的输出问题
2020/01/20 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
详解查看Python解释器路径的两种方式
2020/10/15 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
戴森台湾线上商城：Dyson Taiwan
2018/05/21 全球购物
牵手50新加坡：专为黄金岁月的单身人士而设的交友网站
2020/08/16 全球购物
几道PHP的面试题
2012/05/19 面试题
初三物理教学反思
2014/01/21 职场文书
幼儿园教师教学反思
2014/02/06 职场文书
艺术教育实施方案
2014/05/03 职场文书
商铺消防安全责任书
2014/07/29 职场文书
党支部遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
中层领导干部群众路线对照检查材料思想汇报
2014/10/02 职场文书
全民创业工作总结
2015/08/13 职场文书
致创业您：正能量激励人心句子（48条）
2019/08/15 职场文书
angular4实现带搜索的下拉框
2022/03/25 Javascript