该练习的笔记如下：

1.  var cur=0;  //先声明一个变量。

2.  parseInt会舍掉小数，而opacity值恰恰是小数，所以对于opacity，必须用parseFloat。

cur=parseFloat(getStyle(obj, attr))*100;

3.

a.  '+ var +' 字符串中引入变量的格式。

b. 透明度兼容性问题，需要2种分别赋值。

if(attr=='opacity')

          {

            obj.style.filter='alpha(opacity:'+(cur+speed)+')';

            obj.style.opacity=(cur+speed)/100;

          }

4.  Math.round(); 四舍五入，舍去小数。 可解决parseFloat之后数值有很多小数位的问题。

5. 运动函数中，opacity的目标值是100，不是1。 （可直接记成和css里的相反。）

startMove(this, 'opacity', 100);

要根据后面的运用场景来看，这个值不是用来给式样赋值的。而是后面运动函数里使用的。

疑点：

这里字符串变量连接没有括号？ 需要搞清楚、熟记字符串连接规则的部分。

obj.style[attr]=cur+speed+'px';
<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>无标题文档</title>

  <style>

    div {width:200px; height:200px; margin:20px; float:left; background:yellow; border:10px solid black; filter:alpha(opacity:30); opacity:0.3;}

  </style>

  <script>

    window.onload=function ()

    {

      var oDiv1=document.getElementById('div1');

      oDiv1.onmouseover=function ()

      {

        startMove(this, 'opacity', 100);

      };

      oDiv1.onmouseout=function ()

      {

        startMove(this, 'opacity', 30);

      };

    };

    function getStyle(obj, name)

    {

      if(obj.currentStyle)

      {

        return obj.currentStyle[name];

      }

      else

      {

        return getComputedStyle(obj, false)[name];

      }

    }

    function startMove(obj, attr, iTarget)

    {

      clearInterval(obj.timer);

      obj.timer=setInterval(function (){

        var cur=0;  //先声明一个变量

        if(attr=='opacity')

        {

          //cur=parseFloat(getStyle(obj, attr))*100;   //parseInt会舍掉小数，而opacity值恰恰是小数，所以必须用parseFloat。
          cur=Math.round(parseFloat(getStyle(obj, attr))*100);  // Math.round();  四舍五入，舍去小数。
        }

        else

        {

          cur=parseInt(getStyle(obj, attr));

        }

        var speed=(iTarget-cur)/6;

        speed=speed>0?Math.ceil(speed):Math.floor(speed);

        if(cur==iTarget)

        {

          clearInterval(obj.timer);

        }

        else

        {

          if(attr=='opacity')

          {

            obj.style.filter='alpha(opacity:'+(cur+speed)+')'; // '+ var +'  字符串中引入变量的格式。

            obj.style.opacity=(cur+speed)/100;   //透明度兼容性问题需要2种分别赋值。

          }

          else

          {

            obj.style[attr]=cur+speed+'px'; //这里的字符串连接方式？

          }

        }

      }, 30);

    }

  </script>

</head>

<body>

<div id="div1"></div>

</body>

</html>

JS学习笔记 - 透明度运动框的更多相关文章

  1. WebGL three.js学习笔记 使用粒子系统模拟时空隧道（虫洞）

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

  2. WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法

    WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...

  3. WebGL three.js学习笔记 加载外部模型以及Tween.js动画

    WebGL three.js学习笔记 加载外部模型以及Tween.js动画 本文的程序实现了加载外部stl格式的模型,以及学习了如何把加载的模型变为一个粒子系统,并使用Tween.js对该粒子系统进行 ...

  4. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  5. Vue.js学习笔记（2）vue-router

    vue中vue-router的使用:

  6. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

  7. WebGL three.js学习笔记 创建three.js代码的基本框架

    WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...

  8. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  9. 2019-4-29 js学习笔记

    js学习笔记一:js数据类型   1:基本数据类型       number类型(整数,小数)      String类型          boolean类型        NaN类型其实是一个nu ...

随机推荐

  1. 如何在 Highcharts 图中当所占百分比为 0 时不显示0%

    解决办法其实很简单,将enabled属性改为false即可: dataLabels: { enabled: false } 完成之后的显示如下

  2. 洛谷 P2913 [USACO08OCT]车轮旋转Wheel Rotation

    P2913 [USACO08OCT]车轮旋转Wheel Rotation 题目描述 Farmer John has an old-time thresher (wheat harvester) tha ...

  3. log4j小结

    核心包: org.apache.log4j 三大组件 Loggers 日志操作 Appenders 日志的展现形式 Layouts 日志的展现格式 日志等级 TRACE DEBUG INFO WARN ...

  4. KETTLE使用javascript步骤过滤特殊字符

    KETTLE使用javascript步骤过滤特殊字符 使用kettle在抽取大量excel数据时.总是遇到excel中有一些特殊字符,导致ExecuteSQL script步骤运行失败,本文记录一些方 ...

  5. unity 获取物体尺寸

     unity3d中获得物体的size 以size的x方向为例 1:gameObject.renderer.bounds.size.x;//这个值的结果真实反应出有MeshRenderer这个组件的 ...

  6. Gym 100952 A. Who is the winner?

    A. Who is the winner? time limit per test 1 second memory limit per test 64 megabytes input standard ...

  7. react-native React Native version mismatch

    android/app/build.gradle     file: dependencies { compile fileTree(dir: "libs", include: [ ...

  8. JavaScript翻译成Java

    这两天公司有一个需求,将一段加密的JavaScript代码转换为JAVA版. JavaScript中的某一段代码: 前期查看了整个JavaScript代码,发现代码中,方法里面嵌套方法,各种不合规的变 ...

  9. python django的单元测试

    # TestCase 基类的使用 django.test.TestCase # 测试依赖于数据库访问,创建或查询模型 unittest.TestCase #没有与数据库交互 避免刷新数据库的成本

  10. springboot整合Beetl、BeetlSql实现ajax分页

    Beetl是Bee Template Language的缩写,它绝不是简单的另外一种模板引擎,而是新一代的模板引擎,它功能强大,性能良好,超过当前流行的模板引擎.而且还易学易用. BeetSql是一个 ...