任意值运动函数，可适用于任何运动。 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>任意值运动函数</title>
<style>
#div1{width: 200px; height: 200px; background: red; border: 1px solid black;}
#div2{width: 200px; height: 200px; background: yellow; border: 1px solid black; filter:alpha(opacity:30); opacity: 0.3;}
</style>
<script>
window.onload = function(){
    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')
            {    
                //出问题的计算组合之一：0.07*100 = 7.000000001
                //parseFloat取浮点数 Math.round();四舍五入，把小数的部分去掉。
                //兼容低版本IE和火狐
                cur = Math.round(parseFloat(getStyle(obj,attr))*100);
            }
            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) +')';
                    obj.style.opacity = (cur+speed)/100;

                    document.getElementById('txt1').value = obj.style.opacity;
                }
                else
                {
                    obj.style[attr] = cur + speed + 'px';
                    document.getElementById('txt2').value = cur;
                }
            }
        },30);
    }
    var oDiv = document.getElementById('div1');
    var oDiv2 = document.getElementById('div2');
    oDiv.onmouseover = function()
    {
        startMove(this,'width',600);
    }
    oDiv.onmouseout = function()
    {
        startMove(this,'width',200);
    }

    oDiv2.onmouseover = function()
    {
        startMove(this,'opacity',100);
    }
    oDiv2.onmouseout = function()
    {
        startMove(this,'opacity',30);
    }
}
</script>
</head>
<body>
<div id = "div1"></div>
<div id = "div2"></div>
<input id = "txt1" type = "text" value = '' />
<input id = "txt2" type = "text" value = '' />
</body>
</html>

 

posted @ 2017-01-18 16:52  萤子  阅读(257)  评论(0)    收藏  举报