div位置变化——点击按钮div块前进/后退 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 { width:100px; height:100px; background:red; position:absolute; top:50px; left:30px; }
</style>
</head>

<body>

<input id="btn1" type="button" value="往后" />
<input id="btn2" type="button" value="往前" />
<div id="div1"></div>

<script>
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oDiv = document.getElementById('div1');

oBtn1.onclick = function () {
    
    doMove ( oDiv, -12, 10 );   //封装好的函数

};

oBtn2.onclick = function () {
    
    doMove ( oDiv, 12, 800 );
    
};


function doMove ( obj, dir, target ) {   //obj代表哪个元素移动、dir代表往前往后的速度、target代表目标点的像素大小
    clearInterval( obj.timer );
    
    obj.timer = setInterval(function () {
        
        var speed = parseInt(getStyle( obj, 'left' )) + dir;            // 获取元素距离左侧的像素值加上速度值
        
        if ( speed > target && dir > 0 ) {        // 往前跑，如果跑的距离大于给定的距离并且是正数
            speed = target;    //停止在给定距离不动
        }
        
        if ( speed < target && dir < 0 ) {        // 往后跑，如果跑得距离小于给定距离并且是负数
            speed = target;
        }
        
        obj.style.left = speed + 'px';
        
        if ( speed == target ) {   //当距离等于给定距离清除移动的函数，停止移动
            clearInterval( obj.timer );
        }
        
    }, 30);
}

function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }  //封装的获取元素属性（left）的函数
</script>

</body>
</html>

 改进后，可以上下左右移动，：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 { width:100px; height:100px; background:red; position:absolute; top:50px; left:30px; }
</style>
</head>

<body>

<input id="btn1" type="button" value="往上" />
<input id="btn2" type="button" value="往下" />
<div id="div1"></div>

<script>
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oDiv = document.getElementById('div1');

oBtn1.onclick = function () {
    
    doMove ( oDiv, 'top', 12, 40 );

};

oBtn2.onclick = function () {
    
    doMove ( oDiv, 'top', 12, 500 );
    
};

function doMove ( obj, attr, dir, target ) {  //obj元素、attr上下左右、dir速度、target目标位置
    
    dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir;    //如果位置小于目标距离target速度dir就是正数、否则就是负数。程序控制，不用用户自己控制
    
    clearInterval( obj.timer );
    
    obj.timer = setInterval(function () {
        
        var speed = parseInt(getStyle( obj, attr )) + dir;            // 步长
        
        if ( speed > target && dir > 0 ||  speed < target && dir < 0  ) {   //合并了上个例子的写法
            speed = target;
        }
        
        obj.style[attr] = speed + 'px';
        
        if ( speed == target ) {
            clearInterval( obj.timer );
        }
        
    }, 30);
}

function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }
</script>

</body>
</html>

 再改进后，点击移动先右移再下移

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 { width:100px; height:100px; background:red; position:absolute; top:50px; left:30px; }
</style>
</head>

<body>

<input id="btn1" type="button" value="走" />
<div id="div1"></div>

<script>
var oBtn1 = document.getElementById('btn1');
var oDiv = document.getElementById('div1');

oBtn1.onclick = function () {
    
    doMove ( oDiv, 'left', 12, 900, function () {   //回调函数，右移执行完毕下移的函数
        doMove ( oDiv, 'top', 34, 500 );
    });

};

function doMove ( obj, attr, dir, target, endFn ) {    //endFn是回调函数，可以有也可以没有，下面有判断
    
    dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir;
    
    clearInterval( obj.timer );
    
    obj.timer = setInterval(function () {
        
        var speed = parseInt(getStyle( obj, attr )) + dir;            // 步长
        
        if ( speed > target && dir > 0 ||  speed < target && dir < 0  ) {
            speed = target;
        }
        
        obj.style[attr] = speed + 'px';
        
        if ( speed == target ) {
            clearInterval( obj.timer );
            
            /*
            if ( endFn ) {
                endFn();
            }
            */
            endFn && endFn();   //如果回调函数存在不是undefined，就执行
            
        }
        
    }, 30);
}

function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }
</script>

</body>
</html>

 

posted @ 2017-03-22 13:33  念念念不忘  阅读(648)  评论(0)    收藏  举报