js 拖拽碰撞 + 重力运动

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

<!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>
    <title>拖拽 碰撞+重力运动</title>
    <style>
        #div1
        {
            width:100px;
            height:100px;
            background:red;
            position:absolute;
        }
    </style>
    
    <script type="text/javascript">
        window.onload = function(){
            var oDiv = document.getElementById("div1");
            
            var lastX = 0;
            var lastY =0;
            
            oDiv.onmousedown = function(ev){
                
                var en = ev || event;
                
                
                var disX = en.clientX - oDiv.offsetLeft;
                var disY = en.clientY - oDiv.offsetTop;
                
                document.onmousemove = function(ev){
                    var e = ev || event;
                    var l = e.clientX - disX;
                    var t = e.clientY - disY;
                    
                    oDiv.style.left = l +‘px‘;
                    oDiv.style.top = t + ‘px‘;
                    
                    
                    speedX = l - lastX;
                    speedY = t - lastY;
                }
                
                
               document.onmouseup = function(){
                    document.onmousemove = null;
                    document.onmouseup = null;
                    //开始运动
                    move();
                     
               }
               //关闭定时器
               clearInterval(timer);
                
            }
        
        }
        
    
         //碰撞+重力 运动（计算空气阻力）
        var timer = null;
        //横向初速度
        var speedX = 0;
        //竖向初速度速度
        var speedY = 0;
        
        function move(){
            
            clearInterval(timer);
            
            timer = setInterval(function(){
                
                var oDiv = document.getElementById("div1");
                
                //类似重力加速度 : g = 3;
                //竖向加速度:3 
                speedY+=3;
                
                var l = oDiv.offsetLeft + speedX ;
                var t = oDiv.offsetTop + speedY;
                
                if(t >= document.documentElement.clientHeight-oDiv.offsetHeight)
                {
                    //竖向空气阻力
                    speedY*=-0.8;
                    //横向空气阻力
                    speedX*=0.8;
                    //将top设置为(document.documentElement.clientHeight - oDiv.offsetHeight)px
                    t = document.documentElement.clientHeight - oDiv.offsetHeight;
                }
                else if(t<=0)
                {   
                    //竖向空气阻力
                    speedY*=-0.8;
                    //横向空气阻力
                    speedX*=0.8;
                    //将top设置为0px
                    t=0;
                }
                
                if(l>=document.documentElement.clientWidth-oDiv.offsetWidth)
                {  
                    //横向空气阻力
                    speedX*=-0.8;
                    //将left设置为(document.documentElement.clientWidth - oDiv.offsetWidth)px
                    l = document.documentElement.clientWidth - oDiv.offsetWidth;
                }
                else if(l<=0)
                {
                    //横向空气阻力
                    speedX*=-0.8;
                    //将left设置为0px
                    l = 0;
                }
                
                //将横向速度设置为0
                if(Math.abs(speedX)<1)
                {
                    speedX = 0;
                }
                //将竖向速度设置为0
                if(Math.abs(speedY)<1)
                {
                    speedY = 0;
                }
                
                //关闭定时器
                
                //横、竖速度都为空及物体距顶部高度为(可视窗口高度 - 物体高度)
                if(speedX==0 && speedY==0 && t==document.documentElement.clientHeight-oDiv.offsetHeight)
                {
                    clearInterval(timer); 
                }
                else
                {
                    oDiv.style.left = l+‘px‘;
                    oDiv.style.top = t +‘px‘;
                }           
                
            },30);
        }
    </script>
</head>
<body>
  
   <div id="div1">
    </div>
    <span style="width:1px;height:300px;background:black;left:300px"></span>
</body>
</html>