js运动-改变透明度(单物体）

除了通过改变物体的 宽，高，letf,top位置或者是运动方向来实现物体运动效果之外，改变物体的透明度，也是运动特效

<script>
    window.onload = function () {
        var oDiv = document.getElementById('div1');
        oDiv.onmousemove = function () {
            startMove(100);
        }
        oDiv.onmouseout = function () {
            startMove(30);
        }
}
var timer = null;
function startMove(iTarget) {
        clearInterval(timer);
        var oDiv = document.getElementById('div1');
        timer = setInterval(function(){
           if(oDiv.offsetAlpha == iTarget){
               ....
           }
 
        },30);
}
</script>

但是在js中只有offsetLeft/Top ,offsetWidth/Height,这四个方法，并没有offsetAlpha这个方法。

问：那么我们怎么来 获取当前物体的透明度那？？

我们可以自己定义一个变量 var alpha  = 30;通过判断这个变量 是否和目标值是否相等，来继续我们下一步的操作;

 var alpha = 30; // 自定义一个变量

当alpha 等目标值得时候，清楚定时器，否则就改变透明度的值alpha

if(alpha == iTarget){
     clearInterval(timer);
}else{
     alpha += iSpeed;
     oDiv.style.opacity = alpha/100;
     oDiv.style.filter = 'alpha(opacity:'+alpha+')';
}

完整的代码如下：

<div id="div1"></div>

<style>
        #div1{
            width: 100px;height: 100px;
            background: green;
            opacity:0.3;
            filter:alpha(opacity:30);/*兼容低版本IE*/

        }
</style>

<script>
    window.onload = function () {
        var oDiv = document.getElementById('div1');
        oDiv.onmousemove = function () {
            startMove(100);
        }
        oDiv.onmouseout = function () {
            startMove(30);
        }
    }
    var timer = null;
    var alpha = 30;
    function startMove(iTarget) {
        clearInterval(timer);
        var oDiv = document.getElementById('div1');
        var iSpeed = 0;
        timer = setInterval(function(){

            if(alpha>iTarget){
                iSpeed = -10;
            }else{
                iSpeed = 10;
            }
            if(alpha == iTarget){
                clearInterval(timer);
            }else{
                alpha += iSpeed;
                oDiv.style.opacity = alpha/100;
                oDiv.style.filter = 'alpha(opacity:'+alpha+')';
            }
        },30);
    }
</script>