js 碰撞+拖拽

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
    body{margin:0;padding:0;}
    div{width:50px;height:50px;background:red;position:absolute;left:0;top:30px;}
</style>
<script>
    window.onload = function(){
        var oBtn = document.getElementsByTagName('input')[0];
        var oDiv = document.getElementsByTagName('div')[0];
        
        oBtn.onclick = function(){
            elasticStartMove(oDiv);
        };
        
    };
    
    var ispeedX = 6;
    var ispeedY = 100;
    function elasticStartMove(obj){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
        
            var t =  obj.offsetTop+ispeedY;
            var l= obj.offsetLeft+ispeedX;
        //    alert("obj.offsetTop:"+obj.offsetTop+"ispeedY:"+ispeedY+"t:"+t);
            if(t >= document.documentElement.clientHeight - obj.offsetHeight){
                ispeedY *= -0.8;/*重力因素,让速度越来越小，高度不会变*/
                t = document.documentElement.clientHeight - obj.offsetHeight;
            }else if(t<=0){
                ispeedY *= -0.8;
                t = 0;
            }
            if(l >= document.documentElement.clientWidth - obj.offsetWidth){
                ispeedX *= -0.8;
                l = document.documentElement.clientWidth - obj.offsetWidth; //避免超出范围碰撞，出现滚动条
            }else if(l<=0){
                ispeedX *= -0.8;
                l = 0
            }
            
            
            obj.style.top = t+'px';
            obj.style.left = l+'px';
            
            
        },30);
        
    }
</script>
</head>

<body>
    <input type='button' value='开始运动'/>
    <div></div>
</body>
</html>
猜你喜欢
