JS运动-自由落体运动

标签：自由落体   拖拽   

模拟物理中的自由落体运动：废话不多说，先看效果！！

图片效果不太好，有些卡，可以把代码考出来自己运行看下效果！！

基本过程：鼠标可拖拽div，当鼠标抬起的时候，div会自由下落，然后弹起下落，直到速度为0运动停止，下落和弹起直至停止的过程是模拟 自由落体运动

完成测试代码：

<div id="box"></div>

<style>
        #box{
            position: absolute;left: 0;top: 0;
            width: 100px;height: 100px;
            background: green;
        }
</style>

<script>
    window.onload = function () {
        var oDiv = document.getElementById('box');
        var disX = 0,
            disY = 0;
        /*拖拽事件*/
        oDiv.onmousedown = function(ev){
            disX = ev.clientX - oDiv.offsetLeft;
            disY = ev.clientY - oDiv.offsetTop;
            document.onmousemove = function (ev) {
                var ev = ev || window.event;
                oDiv.style.left = ev.clientX - disX +'px';
                oDiv.style.top = ev.clientY - disY +'px';
            }
            document.onmouseup = function () {
                document.onmousemove = null;
                startMove(oDiv);
                document.onmouseup = null;
            }
        }
        
        var iSpeed = 0;// 自由落体开始速度为0
        var timer = null;
        function startMove(obj){
            clearInterval(timer);
            var clientH = document.documentElement.clientHeight || document.body.clientHeight;
            var maxT = clientH - obj.offsetHeight; // 当div的top值等于浏览器可视区的高 减去div自身高的时候 说明碰到了可视区的底边

            timer = setInterval(function(){
                iSpeed += 3;// 下落过程速度约来越大
                var T =  obj.offsetTop + iSpeed;
                if(T > maxT){
                    T = maxT;
                    iSpeed *= -1;// 当碰到底边时 弹上来速度为负
                    iSpeed *= 0.75;// 模拟摩擦力
                }
                if(T < 0){
                    T = 0;
                    iSpeed *= -1;
                }
                oDiv.style.top = T +'px';
            },30);
        }

    }

</script>

自由落体要点：

1. 计算物体可下落的做大距离：maxT

2. 开启定时器 通过速度iSpeed的改变 不断改变物体的top值

3. 当物体下落到最大距离时，开始反弹，此时通过iSpeed*0.75 来模拟摩擦力，使物体能停下来

JS运动-自由落体运动

标签：自由落体   拖拽   

原文地址：http://blog.csdn.net/u014205965/article/details/45922471