该练习的笔记如下：

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. [Python] Generates permutations

    >>> import itertools >>> for p in itertools.permutations('ABCD'): ... print(p) ('A ...

  2. 杭电5137How Many Maos Does the Guanxi Worth

    How Many Maos Does the Guanxi Worth Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 512000/5 ...

  3. RvmTranslator6.0

    RvmTranslator6.0 eryar@163.com 1. Introduction RvmTranslator can translate the RVM file exported by ...

  4. eclipse中编码的设置

    Windows-------->prefenerce------>General-------->Workspace

  5. Spark MLlib聚类KMeans

    算法说明 聚类(Cluster analysis)有时也被翻译为簇类,其核心任务是:将一组目标object划分为若干个簇,每个簇之间的object尽可能相似,簇与簇之间的object尽可能相异.聚类算 ...

  6. [论文笔记] CUDA Cuts: Fast Graph Cuts on the GPU

    Paper:V. Vineet, P. J. Narayanan. CUDA cuts: Fast graph cuts on the GPU. In Proc. CVPR Workshop, 200 ...

  7. Ajax往后台传参数，无参数，一个参数，多个参数，一个对象等

    原文:http://www.cnblogs.com/chenwolong/p/Get.html //无参数请求-简单示例 $(document).ready(function () { $.ajax( ...

  8. Kinect 开发 —— 手势识别（上）

    像点击(clicks)是GUI平台的核心,轻点(taps)是触摸平台的核心那样,手势(gestures)是Kinect应用程序的核心 关于手势的定义的中心在于手势能够用来交流,手势的意义在于讲述而不是 ...

  9. Ansible学习记录二：命令

    0.ansible 命令参数详解: [root@localhost ~]# ansible Usage: ansible <host-pattern> [options] Options: ...

  10. ManagementObjectSearcher 对象获取串口列表

    首先,需引用using System.Management; 可先建个枚举类,如下 #region WIN32 API /// <summary> /// 枚举win32 api /// ...