Javascript -- 运动-- 多物体运动 & 任意值运动

* 多物体运动

　　*定时器作为物体的属性

　　*参数的传递：物体、目标值

　　*所有东西都不能公用

　　*属性与运动对象绑定：速度、其它属性值(如透明度等等)

　　*小数的问题：在这里就是getStyle(obj,attr)*100获取opacity的属性并处理，因为在计算机中，0.05*100=5?,0.07*100=7?并不一定得到人类expection result. therehre, cur=Math.round(parseFloat(getStyle(obj, attr))*100);

　　　　*Math.round()是四舍五入==>Math.round(4.999)==>4; Math.round(4.5001)==>5

<!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; font-size:14px;}
</style>
<script>
window.onload=function ()
{
    var oDiv1=document.getElementById('div1');
    oDiv1.onmouseover=function ()
    {
        startMove(this, 'height', 400);
    };
    oDiv1.onmouseout=function ()
    {
        startMove(this, 'height', 200);
    };
    var oDiv2=document.getElementById('div2');
    oDiv2.onmouseover=function ()
    {
        startMove(this, 'width', 400);
    };
    oDiv2.onmouseout=function ()
    {
        startMove(this, 'width', 200);
    };
    var oDiv3=document.getElementById('div3');
    
    oDiv3.onmouseover=function ()
    {
        startMove(this, 'fontSize', 50);
    };
    oDiv3.onmouseout=function ()
    {
        startMove(this, 'fontSize', 14);
    };
    var oDiv4=document.getElementById('div4');
    oDiv4.onmouseover=function ()
    {
        startMove(this, 'borderWidth', 100);
    };
    oDiv4.onmouseout=function ()
    {
        startMove(this, 'borderWidth', 10);
    };
};
function getStyle(obj, name)
{
    if(obj.currentStyle)
    {
        return obj.currentStyle[name];
    }
    else
    {
        return getComputedStyle(obj, false)[name];
    }
}
function startMove(obj, attr, iTarget) //obj是那个element, attr是需要改变的属性, iTarget是这里属性的目标值
{
    clearInterval(obj.timer);
    obj.timer=setInterval(function (){
        var 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
        {
            obj.style[attr]=cur+speed+'px'; //这里只能处理位置，不能处理opacity
        }
    }, 30);
}
</script>
</head>
<body>
<div id="div1">变高</div>
<div id="div2">变宽</div>
<div id="div3">safasfasd</div>
<div id="div4"></div>
</body>
</html>

* 任意值运动

<!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=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';
            }
        }
    }, 30);
}
</script>
</head>
<body>
<div id="div1"></div>
<input type="text" id="txt1" />
</body>
</html>

 

posted on 2016-07-22 15:25  yeatschen  阅读(122)  评论(0)    收藏  举报

导航