该练习的笔记如下：

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. 多线程模式之Master-Worker

    一. 介绍 需要使用Master-Worker的场景:主线程开了多个子进程(Worker进程)去执行任务时,主线程希望能收集到每个子进程的执行结果. 所以,Master-Worker模式基本上就是: ...

  2. ORACLE遞歸查詢

    ORACLE支持常規的用CTE遞歸的方式實現遞歸查詢,也有自己特有的查詢方式,ORACLE文檔中叫層次數據查詢. 這裏通過一個簡單的样例來介紹這兩種查詢方式. 數據準備: CREATE TABLE T ...

  3. 矩阵乘法2（codevs3147）

    题目描写叙述 Description 给出两个n*n的矩阵.m次询问它们的积中给定子矩阵的数值和. 输入描写叙述 Input Description 第一行两个正整数n,m. 接下来n行,每行n个非负 ...

  4. 正确地在QML应用中使用fontsize

    我们知道我们有时须要显示text文本.可是,在QML应用中.我们应该怎样选择font的大小呢?在今天的这篇文章中,我们将展示在Ubuntu平台中的不同文字的大小.我们能够通过FontUtils来帮我们 ...

  5. Python: PS 滤镜-- Fish lens

    本文实现 PS 滤镜中的一种几何变换– Fish lens, 对图像做扭曲,感觉就像通过一个凸镜或者凹镜在观察图像一样. import numpy as np from skimage import ...

  6. netstat -p 显示 -

    http://4735839.blog.51cto.com/4725839/1418945 https://yq.aliyun.com/articles/63060

  7. 洛谷 P2360 地下城主

    P2360 地下城主 题目描述 你参加了一项秘密任务,在任务过程中你被困在了一个3D的地下监狱里面,任务是计时的,你现在需要在最短的时间里面从地牢里面逃出来继续你的任务.地牢由若干层组成,每一层的形状 ...

  8. mk-编译信息的意义

    今天第一次看Android.mk文件,内容如下 # Copyright 2007-2008 The Android Open Source Project 2 3 LOCAL_PATH:= $(cal ...

  9. 1.3 Quick Start中 Step 3: Create a topic官网剖析（博主推荐）

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Step 3: Create a topic Step 3: 创建一个主题(topi ...

  10. 【问题】VUE 同一页面路由参数变化，数据不刷新

    依赖路由的params参数获取写在created生命周期里面,因为相同路由二次甚至多次加载的关系 没有达到监听,退出页面再进入另一个页面并不会运行created组件生命周期,导致数据还是第一次进入的数 ...