JS运动特效之任意值添加运动的方法分析

更新时间：2018年01月24日 11:35:25 作者：关耳佳

这篇文章主要介绍了JS运动特效之任意值添加运动的方法,结合实例形式分析了javascript针对多物体运动通过参数控制不同运动效果的实现方法,需要的朋友可以参考下

本文实例讲述了JS运动特效之任意值添加运动的方法。分享给大家供大家参考，具体如下：

<script>
    window.onload = function(){
      var liTags = document.getElementsByTagName('li');
      for(var i=0;i<liTags.length;i++){
         liTags[i].timer = null;// 给每个li都添加一个timer
         liTags[i].onmouseover = function () {
          startMove(this,400);
         }
         liTags[i].onmouseout = function () {
          startMove(this,200);
         }
      }
    }
    function getStyle(obj,attr){
      return getComputedStyle ? getComputedStyle(obj,false)[attr] : obj.currentStyle[attr];
    }
    function startMove(obj,iTarget) {
      clearInterval(obj.timer);
      obj.timer = setInterval(function () {
        var objWidth = parseInt(getStyle(obj,'width'));//因为是通过[]调用属性，所以width必须加单引号
        // var iSpeed = (iTarget -obj.offsetWidth)/10;
        // 因为objWidth存放的就是当前对象的宽，所以直接写objWidth而不是obj.objWidth
        var iSpeed = (iTarget -objWidth)/10;
          iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
        if(objWidth == iTarget){
          clearInterval(obj.timer);
        }else{
          obj.style.width = objWidth+iSpeed+'px';
        }
      },30);
    }
</script>

如果此时需求有变化，让第2个li鼠标移入，高度变化，第三个li鼠标依然边框，第四个li鼠标移入背景变化。一种办法就是复制几分startMove函数，分别把之前width变化改成height，borderWidht，和opacity透明度变化；但是这样显然浪费，可以把他们合并成一个函数，把变化的属性作为参数传进去就好了.

1. function startMove(obj,attr,iTarget) 函数里新增attr参数
2. 调用参数的方式：由obj.style.属性名变成 obj.style[属性名]
3. 需要分别为每个li添加事件

<script>
    window.onload = function(){
      var liTags = document.getElementsByTagName('li');
      for(var i=0;i<liTags.length;i++){
        liTags[i].timer = null;// 给每个li都添加一个timer
        liTags[0].onmouseover = function () {
          startMove(this,'width',400);
        }
        liTags[0].onmouseout = function () {
          startMove(this,'width',200);
        }
        liTags[1].onmouseover = function () {
          startMove(this,'height',100);
        }
        liTags[1].onmouseout = function () {
          startMove(this,'height',50);
        }
        liTags[2].onmouseover = function () {
          startMove(this,'borderWidth',10);
        }
        liTags[2].onmouseout = function () {
          startMove(this,'borderWidth',2);
        }
        liTags[3].onmouseover = function () {
          startMove(this,'padding',10);
        }
        liTags[3].onmouseout = function () {
          startMove(this,'padding',0);
        }
      }
    }
    function getStyle(obj,attr){
      return getComputedStyle ? getComputedStyle(obj,false)[attr] : obj.currentStyle[attr];
    }
    function startMove(obj,attr,iTarget) {//attr：把变化的属性最为参数传入
      clearInterval(obj.timer);
      obj.timer = setInterval(function () {
        var objAttr = parseInt(getStyle(obj,attr));
        var iSpeed = (iTarget -objAttr)/10;
        iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
        if(objAttr == iTarget){
          clearInterval(obj.timer);
        }else{
          //obj.style.width = objWidth+iSpeed+'px';
          obj.style[attr] = objAttr+iSpeed+'px';// 需要又.属性名的形式改成[]
        }
      },30);
    }
</script>

运行一下发现，改变宽，高，border都妥妥的，但是最后一个改变“透明度”没反应，是什么问题那？？

首先opacity的值0.3一个小数，parseInt(getStyle(obj,attr)之后便变成0，还有最大的一个问题就是最后属性值设置的时候：obj.style[attr] = objAttr+iSpeed+'px'; 显然opacity并没有px这个单位，所以需要对运动框架做进一步处理

需要判断一下，当接受的参数是“透明度”的时候，需要单独处理一下，把上面出问题的两个地方做一下处理

var objAttr = 0;
if(attr == "opacity"){
   // 由于计算机对 小数的处理有问题，这里用Math.round处理一下
   // objAttr = parseFloat(getStyle(obj,attr)*100);
  //objAttr = parseInt(parseFloat(getStyle(obj,attr))*100);
  objAttr = Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
   objAttr = parseInt(getStyle(obj,attr));
}

如果不做处理直接 objAttr = parseFloat(getStyle(obj,attr)*100); 由于计算机不能很精确的处理小数，会导致一些问题

用parseInt这种方法：objAttr = parseInt(parseFloat(getStyle(obj,attr))*100); 也可以处理小数，但是经过测试在鼠标移出的时候，与原来状态有一点偏差

可以看出，当鼠标移出去的时候，opacity应该回到1，可结果却是0.94 ；所以个人推荐用Math.round四舍五入函数来处理这里的小数问题

做一下判断，下面也同样做判断

if(attr == "opacity"){
  obj.style.filter = 'alpha(opacity:'+(objAttr+iSpeed)+')';
  obj.style.opacity = (objAttr+iSpeed)/100;
}else{
  //obj.style.width = objWidth+iSpeed+'px';
  obj.style[attr] = objAttr+iSpeed+'px';// 需要又.属性名的形式改成[]
}

完整代码：

HTML部分

<body>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
</body>

css部分：

<style>
    ul{list-style: none;}
    ul li{
      margin: 10px;
      width: 200px;height: 50px;
      border: 2px solid #c00;
      background: lightblue;
    }
</style>

js部分

<script>
    window.onload = function(){
      var liTags = document.getElementsByTagName('li');
      for(var i=0;i<liTags.length;i++){
        liTags[i].timer = null;// 给每个li都添加一个timer
        liTags[0].onmouseover = function () {
          startMove(this,'width',400);
        }
        liTags[0].onmouseout = function () {
          startMove(this,'width',200);
        }
        liTags[1].onmouseover = function () {
          startMove(this,'height',100);
        }
        liTags[1].onmouseout = function () {
          startMove(this,'height',50);
        }
        liTags[2].onmouseover = function () {
          startMove(this,'borderWidth',10);
        }
        liTags[2].onmouseout = function () {
          startMove(this,'borderWidth',2);
        }
        liTags[3].onmouseover = function () {
          startMove(this,'opacity',30);
        }
        liTags[3].onmouseout = function () {
          startMove(this,'opacity',100);
        }
      }
    }
    function getStyle(obj,attr){
      return getComputedStyle ? getComputedStyle(obj,false)[attr] : obj.currentStyle[attr];
    }
    function startMove(obj,attr,iTarget) {//attr：把变化的属性最为参数传入
      clearInterval(obj.timer);
      obj.timer = setInterval(function () {
        var objAttr = 0;
        if(attr == "opacity"){
          // 由于计算机对 小数的处理有问题，这里用parseFloat转一下
          objAttr = Math.round(parseFloat(getStyle(obj,attr))*100);
        }else{
           objAttr = parseInt(getStyle(obj,attr));
        }
        var iSpeed = (iTarget -objAttr)/10;
        iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
        if(objAttr == iTarget){
          clearInterval(obj.timer);
        }else{
          if(attr == "opacity"){
            obj.style.filter = 'alpha(opacity:'+(objAttr+iSpeed)+')';
            obj.style.opacity = (objAttr+iSpeed)/100;
          }else{
            //obj.style.width = objWidth+iSpeed+'px';
            obj.style[attr] = objAttr+iSpeed+'px';
          }
        }
      },30);
    }
</script>

最后结果演示：

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript运动效果与技巧汇总》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

JS
运动

javascript中内置对象Math的介绍及用法案例
Math对象是一个内置对象,具有数学常数和函数的属性和方法,不是一个函数对象,下面这篇文章主要给大家介绍了关于javascript中内置对象Math的介绍及用法案例的相关资料,需要的朋友可以参考下
2022-03-03
微信小程序如何获取网络状态
这篇文章主要介绍了微信小程序如何获取网络状态,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-07-07
js 剪切、复制、粘贴功能实现
Navigator.clipboard API可以用来访问系统剪贴板，可以实现【剪切、复制、粘贴】功能。该 API 被设计用来取代使用 document.execCommand() 的剪贴板访问方式，不兼容 IE
2023-05-05
深入浅析JS中的严格模式
严格模式就是使JS编码更加规范化的模式,消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为。下面通过代码相结合的形式给大家介绍js中的严格模式，感兴趣的朋友一起看看吧
2018-06-06
jQuery与原生JavaScript选择HTML元素集合用法对比分析
这篇文章主要介绍了jQuery与原生JavaScript选择HTML元素集合用法,结合实例形式对比分析了jquery与原生JavaScript选择页面HTML相关操作方法、注意事项及运行效率,需要的朋友可以参考下
2019-11-11
js获取html文件的思路及示例
html文件如何获取，有很多朋友对此表示疑问，在本文将为大家介绍下使用js的或许方法，感兴趣的朋友可以参考下，希望对大家有所帮助
2013-09-09
去除链接虚线全面分析总结
去除链接虚线全面分析总结...
2006-08-08
JS 获取页面尺寸的方法详解
通过 JS 获取页面相关的尺寸是比较常见的操作,尤其是在动态计算页面布局时,今天我们就来学习一下几个获取页面尺寸的基本方法,需要的朋友可以参考下
2023-09-09
js中的replace方法使用介绍
replace() 方法用于将字符串用一些字符替换另一些字符，如果用正则表达式替换时， regexp 具有全局标志 g，下面有个不错的示例，感兴趣的朋友可以参考下
2013-10-10
前端根据链接生成二维码的方案及相关常用API
这篇文章主要介绍了qrcode插件的使用方法,包括ES6/ES7示例、常用API及Vue示例,同时还讨论了二维码的优点和缺点,文中通过代码介绍的非常详细,需要的朋友可以参考下
2025-01-01

JS运动特效之任意值添加运动的方法分析

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具