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=utf-8" />
<title>无标题文档</title>
<style>
    body{margin:0;padding:0;}
    div{width:100px;height:100px;background:red;position:absolute;left:0;top:30px;}
</style>
<script>
    var ispeedX = 0;
    var ispeedY = 0;
    window.onload = function(){
        var oBtn = document.getElementsByTagName('input')[0];
        var oDiv = document.getElementsByTagName('div')[0];
        
        oBtn.onclick = function(){
            elasticStartMove(oDiv);
        };
        var lastX = 0; /*拖的快就快碰撞，拖的慢就慢碰撞*/
        var lastY = 0;
        oDiv.onmousedown = function(ev){
            var ev = ev || event;
            var disX = ev.clientX-this.offsetLeft;
            var disY = ev.clientY-this.offsetTop;
            
            document.onmouseover = function(ev){
                var oEvent = ev || event;
                var l = oEvent.clientX-disX;
                var t = oEvent.clientY-disY;
                ispeedX = l-lastX;
                ispeedY = t-lastY;
                lastX = l;
                lastY = t;
                oDiv.style.left = l+'px';
                oDiv.style.top = t+'px';
                
            };
            
            document.onmouseup = function(){
                document.onmouseover = document.onmouseup = null;
                elasticStartMove(oDiv);
            };
        };
    };
    
  
    function elasticStartMove(obj){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
            ispeedY += 3; /*受重力因素，越来越快，加上重力摩擦会变得越来越小*/
            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;/*重力因素,让速度越来越小，高度不会变*/
                   ispeedX *= 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
            }
            /*如果isped为小数，会往回跑，300.3-300 299.5->299*/
            if(Math.abs(ispeedX) <1){ 
                ispeedX = 0;
            }
            if(Math.abs(ispeedY) <1){
                ispeedY = 0;
            }
            if(ispeedX ==0 && ispeedY == 0 && t == document.documentElement.clientHeight - obj.offsetHeight ){
                 clearInterval(obj.timer);
                 
            }else{
                obj.style.top = t+'px';
                obj.style.left = l+'px'; 
    
            }
            
        },30);
        
    }
</script>
</head>

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

 

posted on 2018-05-11 10:04  朝颜陌  阅读(550)  评论(0)    收藏  举报

导航