首页
所有分类
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 相关文章推荐
在线游戏大家来找茬II
Sep 30 Javascript
JavaScript 版本自动生成文章摘要
Jul 23 Javascript
javascript引导程序
Oct 26 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
Jul 27 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
Jan 22 Javascript
详解微信小程序 页面跳转 传递参数
Dec 08 Javascript
使用travis-ci如何持续部署node.js应用详解
Jul 30 Javascript
React-router v4 路由配置方法小结
Aug 08 Javascript
React Native时间转换格式工具类分享
Oct 24 Javascript
Angular 作用域scope的具体使用
Dec 11 Javascript
vue cli使用融云实现聊天功能的实例代码
Apr 19 Javascript
使用Karma做vue组件单元测试的实现
Jan 16 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
IC-R9500(1) S-2000(1) 小喇叭(1) 小喇叭开始广播了(1) 温控(1) 脏读(2) 微信(2) Lifecycle(1) 增删查改(1) Spring(9)
You might like
Memcache 在PHP中的使用技巧
2010/02/08 PHP
YII Framework框架教程之国际化实现方法
2016/03/14 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
PHP利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
javascript实现 在光标处插入指定内容
2007/05/25 Javascript
通过JS 获取Mouse Position(鼠标坐标)的代码
2009/09/21 Javascript
jQuery 使用手册(三)
2009/09/23 Javascript
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
javascript 获取iframe里页面中元素值的方法
2014/02/17 Javascript
ext前台接收action传过来的json数据示例
2014/06/17 Javascript
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
教你在heroku云平台上部署Node.js应用
2014/07/30 Javascript
浅谈JavaScript中Date(日期对象),Math对象
2015/02/05 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
js操作数据库实现注册和登陆的简单实例
2016/05/26 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
Nodejs进阶：express+session实现简易登录身份认证
2017/04/24 NodeJs
使用typescript开发angular模块并发布npm包
2018/04/19 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
layui实现多图片上传并限制上传的图片数量
2019/09/26 Javascript
Element-UI+Vue模式使用总结
2020/01/02 Javascript
vue 中this.$set 动态绑定数据的案例讲解
2021/01/29 Vue.js
利用标准库fractions模块让Python支持分数类型的方法详解
2017/08/11 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
详解Anconda环境下载python包的教程（图形界面+命令行＋pycharm安装）
2019/11/11 Python
python剪切视频与合并视频的实现
2020/03/03 Python
CSS3中的5个有趣的新技术
2009/04/02 HTML / CSS
为什么UNION ALL比UNION快
2016/03/17 面试题
通信专业个人自我鉴定
2013/10/21 职场文书
《画》教学反思
2014/04/14 职场文书
工作推荐信范文
2014/05/10 职场文书
优秀电子工程系毕业生求职信
2014/05/24 职场文书
作文评语集锦
2014/12/25 职场文书
浅谈Python从全局与局部变量到装饰器的相关知识
2021/06/21 Python
springboot读取nacos配置文件
2022/05/20 Java/Android