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


Posted in Javascript onJanuary 24, 2018

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

回顾一下上个例子JS实现多物体运动的方法:

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); 由于计算机不能很精确的处理小数,会导致一些问题

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

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

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

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

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

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

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>

最后结果演示:

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

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

Javascript 相关文章推荐
在textarea文本域中显示HTML代码的方法
Mar 06 Javascript
jQuery 1.2.x 升? 1.3.x 注意事项
May 06 Javascript
javascript document.compatMode兼容性
Feb 23 Javascript
jQuery为iframe的body添加click事件的实现代码
Apr 07 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
Apr 22 Javascript
javascript数组详解
Oct 22 Javascript
浅谈jQuery中的checkbox问题
Aug 10 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
Feb 12 Javascript
Angular获取手机验证码实现移动端登录注册功能
May 17 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
Jul 11 Javascript
Vue最新防抖方案(必看篇)
Oct 30 Javascript
Vue+Openlayers自定义轨迹动画
Sep 24 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
Jan 24 #Javascript
详解node child_process模块学习笔记
Jan 24 #Javascript
浅谈Node.js 子进程与应用场景
Jan 24 #Javascript
除Console.log()外更多的Javascript调试命令
Jan 24 #Javascript
深入理解node.js http模块
Jan 24 #Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 #Javascript
基于node打包可执行文件工具_Pkg使用心得分享
Jan 24 #Javascript
You might like
php中防止伪造跨站请求的小招式
2011/09/02 PHP
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
php读取富文本的时p标签会出现红线是怎么回事
2014/05/13 PHP
php中使用array_filter()函数过滤空数组的实现代码
2014/08/19 PHP
制作特殊字的脚本
2006/06/26 Javascript
JavaScript 核心参考教程 内置对象
2009/10/13 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
JavaScript中property和attribute的区别详细介绍
2015/03/03 Javascript
Node.js中的流(Stream)介绍
2015/03/30 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
2016/01/04 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
jQuery中的基本选择器用法学习教程
2016/04/14 Javascript
jQuery基于扩展简单实现倒计时功能的方法
2016/05/14 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
2016/06/21 Javascript
jQuery动态生成表格及右键菜单功能示例
2017/01/13 Javascript
vue用addRoutes实现动态路由的示例
2017/09/15 Javascript
jquery ajax异步提交表单数据的方法
2017/10/27 jQuery
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
Vue 自定义指令功能完整实例
2019/09/17 Javascript
js验证密码强度解析
2020/03/18 Javascript
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
Js利用正则表达式去除字符串的中括号
2020/11/23 Javascript
浅谈scrapy 的基本命令介绍
2017/06/13 Python
用pyqt5 给按钮设置图标和css样式的方法
2019/06/24 Python
python web框架中实现原生分页
2019/09/08 Python
Flask框架搭建虚拟环境的步骤分析
2019/12/21 Python
python批量生成身份证号到Excel的两种方法实例
2021/01/14 Python
canvas中普通动效与粒子动效的实现代码示例
2019/01/03 HTML / CSS
跟单文员岗位职责
2014/01/03 职场文书
幼儿园运动会入场词
2014/02/10 职场文书
cf搞笑广告词
2014/03/14 职场文书
技术比武方案
2014/05/19 职场文书
群众路线批评与自我批评发言稿
2014/10/16 职场文书
导游词之海南天涯海角
2019/12/05 职场文书