该练习的笔记如下：

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. HDU——T 1251 统计难题

    http://acm.hdu.edu.cn/showproblem.php?pid=1251 Time Limit: 4000/2000 MS (Java/Others)    Memory Limi ...

  2. Greenplum中定义数据库对象之创建与管理模式

    创建与管理模式 概述:DB内组织对象的一种逻辑结构.一个DB内能够有多个模式.在未指定模式时默认放置在public中.能够通过"\dn"方式查看数据库中现有模式. testdw=# ...

  3. js实现 导航移入移出效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. flask使用第三方云通讯平台时，出现{'172001':'网络错误'}解决方法

    问题描述:flask使用第三方云通讯平台时,出现{'172001':'网络错误'} 解决方法: 在sms.py文件中添加如下代码 import ssl # 取消证书验证ssl._create_defa ...

  5. （43）JS运动之链式运动框架

    链式运动框架就是一系列的运动分阶段进行,在普通的运动框架上加上一个參数function,这个function表示下一个要运行的动作.详细代码例如以下: <!DOCTYPE HTML> &l ...

  6. Linux下的led驱动程序，ok6410

    本程序採用动态映射的方法控制led.硬件平台为飞凌的ok6410 led.h:定义控制命令 #ifndef _LED_H #define _LED_H #define LED_MAGIC 'M' #d ...

  7. [BZOJ2238]Mst 最小生成树+树链剖分/并查集

    链接 题解 先构建出最小生成树,如果删的是非树边,直接输出答案 否则问题转化为,把该边删掉后剩下两个联通块,两个端点分别在两个块内的最小边权,LCT可以维护 不妨换一种思考方向:考虑一条非树边可以代替 ...

  8. 2.3 Streams API 官网剖析（博主推荐）

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ 2.3 Streams API 2.3 Streams API 在0..0增加了一个 ...

  9. 简约之美jodd--props属性使用

    Prop是一个超级properties:包含了很多jdk缺失的东西:utf-8支持,宏,分区,profiles,全配置等等. 属性存储在一个或者多个*.props文件,而且它是开放的,支持多种类型的资 ...

  10. Android NineGridLayout — 仿微信朋友圈和QQ空间的九宫格图片展示自定义控件

    NineGridLayout 一个仿微信朋友圈和QQ空间的九宫格图片展示自定义控件. GitHub:https://github.com/HMY314/NineGridLayout 一.介绍 1.当只 ...