JS学习笔记 - 透明度运动框

该练习的笔记如下：

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>