弹窗---拖拽、自由落体、碰撞

做了一个弹窗，实现基本的拖拽，碰撞，自由落体等功能。

1、拖拽

三大事件：
onmousedown
onmousemove
onmouseup
思路：
a、鼠标按下，记录当前坐标（clientX,clientY）；
b、在down的事件内写onmousemove事件，移动时将鼠标此时的坐标减下最初down的时候记录的坐标，将这两个值付给拖拽体做left和top。
c、在鼠标down的事件内写onmouseup事件，将omousemove和onmouseup事件清空。

 window.onload = function() {
        var oDiv = document.getElementById('div1');
        var disX = 0;
        var disY = 0;
        oDiv.onmousedown = function(ev) { var ev = ev || window.event;
            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;
                document.onmouseup = null; } }
        //拖拽速度快的时候，跟不上，因为onmousemove有反应时间，将odiv的move和up事件改成document即可

    }

问题

• 拖拽照片时会有浏览器的默认行为，执行return false即可。
• ie8之前的版本，选中元素就有bug，可以在选中元素上设置一个透明隔层。
  setCapture():全局捕获（就是生成了一个透明的层）
  releaseCapture();释放全局捕获（删除了这个层）

2、拖拽改变元素宽高

思路：
按下鼠标记录坐标，移动的过程记录当前坐标，相减即为增加的或者减少的宽高，再加上原来的拖拽体的宽即可。

拖拽改变宽高.gif

 window.onload = function() {
        var oDiv1 = document.getElementById('div1');
        var oDiv2 = document.getElementById('div2');
        var disX = 0;
        var disY = 0;
        var disW = 0;
        var disH = 0;
        
        oDiv2.onmousedown = function(ev) {
            var ev = ev || window.event;
            disX = ev.clientX;
            disY = ev.clientY;
            disW = oDiv1.offsetWidth;
            disH = oDiv1.offsetHeight;
            document.onmousemove = function(ev) {
                var ev = ev || window.event;
                var W = ev.clientX - disX + disW;
                var H = ev.clientY - disY + disH;
                if (W < 100) {
                    W = 100;
                }
                if (H < 100) {
                    H = 100;
                }
                oDiv1.style.width = W + 'px';
                oDiv1.style.height = H + 'px';

            }
            document.onmouseup = function() {
                document.onmousemove = null;
                document.onmouseup = null;

            }
        }

    }

3、碰撞

让弹窗在屏幕内进行碰撞，碰到上下左右的时候返回继续碰撞。
思路：判断left和top值是否到达临界条件，到达后将速度变为相反数即可。

window.onload = function() {
        var oDiv = document.getElementById('div1');
        startMove();
        var iSpeedX = 10;
        var iSpeedY = 10;

        function startMove() {
            setInterval(function() {
                var L = oDiv.offsetLeft + iSpeedX;
                var T = oDiv.offsetTop + iSpeedY;
                if (T > document.documentElement.clientHeight - oDiv.offsetHeight) {
                    T = document.documentElement.clientHeight - oDiv.offsetHeight;
                    iSpeedY *= -1;
                } else if (T < 0) {
                    T = 0;
                    iSpeedY *= -1;
                }

                if (L > document.documentElement.clientWidth - oDiv.offsetWidth) {
                    L = document.documentElement.clientWidth - oDiv.offsetWidth;
                    iSpeedX *= -1;
                } else if (L < 0) {
                    L = 0;
                    iSpeedX *= -1;
                }

                oDiv.style.top = T + 'px';
                oDiv.style.left = L + 'px';
            }, 30);

        }
    }

4、自由落体

思路，设置一个定时器，每次走过定时器的时候速度加3，这样起到加速运动的作用，最后小球落到最底下的时候弹起，并慢慢的停止运动，达到临界状态时将速度变为相反数并乘一个小于1的数（相当于摩擦力），每碰撞一次都有速度的损耗。

Animation.gif

window.onload=function(){
            var oInput=document.getElementById('input1');
            var oDiv=document.getElementById('div1');
            var timer=null;
            var iSpeed=0;
            oInput.onclick=function(){
                startMove()

            }
            function startMove(){
                clearInterval(timer);
                timer=setInterval(function(){
                    iSpeed+=3;
                    var T=oDiv.offsetTop+iSpeed;
                    if(T>document.documentElement.clientHeight-oDiv.offsetHeight){
                        T=document.documentElement.clientHeight-oDiv.offsetHeight;
                        iSpeed*=-1;
                        iSpeed*=0.75;
                    }
                    oDiv.style.top=T+'px';
                    

                },30)
            }
        }

5、拖出去的弹窗

效果：将弹窗快速拖出去，就快速的运动，慢速的拖出去就慢速的运动，怎么达到这个效果呢，通过onmousemove事件的延迟，记录拖出去的最后两次坐标。移动慢的话间隔就小，速度就有，这样就可以让速度和拖拽保持一致。

document.onmousemove = function(ev) {
                var ev = ev || window.event;
                oImg.style.left = ev.clientX - disX + 'px';
                oImg.style.top = ev.clientY - disY + 'px';

                iSpeedX = ev.clientX - prevX;
                iSpeedY = ev.clientY - prevY; //最后一个点

                prevX = ev.clientX;
                prevY = ev.clientY; //倒数第二个点

            }

6、中间打开

效果：刚加载的时候从中间散开
思路：先将宽高设为0，然后在设置定时器将宽高加起来，也同时设置left和top值

中间打开.gif

 function toChange(iTarget) {
            var offsetL = oImg.offsetLeft;
            var offsetT = oImg.offsetTop;
            var timer = setInterval(function() {
                if (oImg.offsetWidth == iTarget) {
                    clearInterval(timer);
                    startMove();
                } else {
                    oImg.style.width = oImg.offsetWidth + 10 + 'px';
                    oImg.style.height = oImg.offsetHeight + 10 + 'px';
                    oImg.style.left = offsetL - oImg.offsetWidth / 2 + 'px';
                    oImg.style.top = offsetT - oImg.offsetHeight / 2 + 'px';

                }

            }, 30)

        }