JS-运动基础（一）

浏览数：26 / 时间：2015年06月09日

<title>无标题文档</title>
<style>
#div1{width:200px;height:200px; background:red; position:absolute; left:0px; top:50px;}
</style>
<script>
var timer=null;
function startMove()
{
    var oDiv=document.getElementById(‘div1‘);
    clearInterval(timer);   //为避免同时开启多个定时器
    timer=setInterval(function (){
                                var speed=10;
                                if(oDiv.offsetLeft>300)
                                {
                                    clearInterval(timer);
                                }
                                else   //if...else避免在到达终点位置后按开始按钮再次执行else里面的语句而使物体运动
                                {
                                    oDiv.style.left=oDiv.offsetLeft+speed+‘px‘;
                                }
            },30);
}
</script>
</head>

<body>
<input id="btn1" type="button" value="开始运动" onclick="startMove()"/>
<div id="div1">
</div>
</body>

技术分享

运动框架及应用

运动框架

1.在开始运动时，关闭已有定时器

2.把运动和停止隔开（if/else）

运动框架实例分享

1.”分享到“侧边栏

通过目标点，计算速度值

<title>无标题文档</title>
<style>
#div1{width:150px; height:200px; background:green; position:absolute; left:-150px;}
#div1 span{position:absolute; width:20px; height:60px; line-height:20px; background:blue; right:-20px;top:70px;}
</style>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById(‘div1‘);
    oDiv.onmouseover=function ()
    {
        startMove();
    }
    oDiv.onmouseout=function ()
    {
        startMove2();
    }
};
var timer=null;

function startMove()
{
    var oDiv=document.getElementById(‘div1‘);
    
    clearInterval(timer);
    timer=setInterval(function (){
                                if(oDiv.offsetLeft==0)
                                {
                                    clearInterval(timer);
                                }
                                else
                                {
                                    oDiv.style.left=oDiv.offsetLeft+10+‘px‘;
                                }
                    },30);
}
function startMove2()
{
    var oDiv=document.getElementById(‘div1‘);
    
    clearInterval(timer);
    timer=setInterval(function (){
                                if(oDiv.offsetLeft==-150)
                                {
                                    clearInterval(timer);
                                }
                                else
                                {
                                    oDiv.style.left=oDiv.offsetLeft-10+‘px‘;
                                }
                    },30);
}
</script>
</head>

<body>
<div id="div1">
     <span>分享到</span>
</div>
</body>

改进1

window.onload=function ()
{
    var oDiv=document.getElementById(‘div1‘);
    oDiv.onmouseover=function ()
    {
        startMove(10,0);
    }
    oDiv.onmouseout=function ()
    {
        startMove(-10,-150);
    }
};
var timer=null;

function startMove(speed,iTarget)
{
    var oDiv=document.getElementById(‘div1‘);
    
    clearInterval(timer);
    timer=setInterval(function (){
                                if(oDiv.offsetLeft==iTarget)
                                {
                                    clearInterval(timer);
                                }
                                else
                                {
                                    oDiv.style.left=oDiv.offsetLeft+speed+‘px‘;
                                }
                    },30);
}

</script>

改进2

window.onload=function ()
{
    var oDiv=document.getElementById(‘div1‘);
    oDiv.onmouseover=function ()
    {
        startMove(0);
    }
    oDiv.onmouseout=function ()
    {
        startMove(-150);
    }
};
var timer=null;

function startMove(iTarget)
{
    var oDiv=document.getElementById(‘div1‘);
    
    clearInterval(timer);
    timer=setInterval(function (){
                                var speed=0;
                                
                                if(oDiv.offsetLeft>iTarget)
                                {
                                    speed=-10;
                                }
                                else
                                {
                                    speed=10;
                                }
                                
                                if(oDiv.offsetLeft==iTarget)
                                {
                                    clearInterval(timer);
                                }
                                else
                                {
                                    oDiv.style.left=oDiv.offsetLeft+speed+‘px‘;
                                }
                    },30);
}

</script>

技术分享