该练习的笔记如下：

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. vue踩坑- 报错npm ERR! cb() never called!

    在vue项目中引入饿了么elementUI组件的步骤之中,出现以下的错误: D:\my-project-first>npm i element-ui -S Unhandled rejection ...

  2. hdu 5073 Galaxy（2014 鞍山现场赛）

    Galaxy                                                                   Time Limit: 2000/1000 MS (J ...

  3. [Python] for.. not in.. Remove Deduplication

    Write a function, remove_duplicates that takes a list as its argument and returns a new list contain ...

  4. POJ 2133 暴搜

    题意: 思路: 按照题意暴搜 注意 如果目标串==给的串 答案是2 //By SiriurRen #include <cstdio> #include <cstring> #i ...

  5. HDU 4678 Mine SG博弈

    http://acm.hdu.edu.cn/showproblem.php?pid=4678 自己太蠢...没学SG...还是浩神指点我SG精髓以后才A的这题...(第一题SG 这里子游戏之间没有影响 ...

  6. JS错误记录 - 右侧悬浮框 - 缓冲运动

    本次练习错误总结: 1.  正确: startMove( document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop); ...

  7. 【Django】AJAX

    目录 JSON 序列化 stringify 反序列化 parse JSON与XML对比 AJAX简介 AJAX常见应用场景 jQuery实现AJAX JS实现AJAX AJAX请求设置csrf_tok ...

  8. 阅读笔记—MVC

    MVC设计模式 Model 1 体系结构 在Model 1 体系结构中,每一个请求的目标都是JSP页面.JSP页面负责完成请求所需要的而所有任务,其中包括验证客户.使用JavaBeans访问数据库及管 ...

  9. 【Educational Codeforces Round 36 D】 Almost Acyclic Graph

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 找到任意一个环. 然后枚举删掉其中的某一条边即可. (因为肯定要删掉这个环的,那么方法自然就是删掉其中的某一条边 (其它环,如果都包 ...

  10. erlang虚拟机代码运行原理

    erlang是开源的,非常多人都研究过源码.可是.从erlang代码到c代码.这是个不小的跨度.并且代码也比較复杂. 所以这里,我利用一些时间,整理下erlang代码的运行过程.从erlang代码编译 ...