JavaScript（十二）常见js特效

一、拖拽效果

1.拖拽效果的思路

1）鼠标按下，不能松开
2）鼠标在页面中移动，物体随着鼠标移动
3）鼠标松开（抬起），停止移动

var o = document.getElementsByTagName('div')[0];
        //鼠标按下事件
        o.onmousedown = function (e) {
            e = e || window.event;
            //计算鼠标相对于div的位置
            var disLeft = e.clientX - this.offsetLeft;//
            var disTop = e.clientY - this.offsetTop;//

            //鼠标移动
            o.onmousemove = function (e) {
                e = e || window.event;
                //修改物体的位置
                // console.log(e.clientX,e.clientY);//鼠标位置
                //鼠标的位置-鼠标相对于物体位置
                this.style.left = e.clientX - disLeft+ "px";
                this.style.top = e.clientY - disTop + 'px';
            };

            //鼠标抬起
            o.onmouseup = function () {
                o.onmouseup = null;//取消事件
                o.onmousemove = null;//取消事件
            };
        };

问题一：
若拖拽速度过快，当鼠标离开div时依然没有松开，而是在页面中松开，会发现，当输入再次进入div，即使没有按下鼠标，依然会触发移动事件。
解决：
将鼠标移动事件和鼠标抬起事件添加给document
问题二：
若被拖拽的目标是文字或者是图片，由于文字和图片默认情况下就是可以拖拽(浏览器的默认的行为)。应该使用拦截浏览器的默认行为的做法来解决。但是，发现return false只能在标准浏览器中拦截默认行为，不能再低版本IE上生效。在低版本IE上可以使用全局捕获来解决。但是，只有IE浏览器能够识别全局捕获
全局捕获，setCapture()方法来添加全局捕获。只要元素添加了全局捕获，就会监听对应事件，不管页面中哪个元素触发了对应的事件，都会被截获，由添加全局捕获的元素来执行。
注意： 使用完毕全局捕获之后，需要及时释放releaseCapture()
代码如下：

var bs = document.querySelectorAll('button');

        bs[0].onclick = function () {
            console.log(1);
        };
        bs[1].onclick = function () {
            console.log(2);
        };
        bs[0].setCapture();//按钮1进行全局捕获

使用全局捕获，修改拖拽代码如下：

 var o = document.getElementsByTagName('div')[0];

        //鼠标按下事件
        o.onmousedown = function (e) {
            e = e || window.event;
            //计算鼠标相对于div的位置
            var disLeft = e.clientX - this.offsetLeft;//
            var disTop = e.clientY - this.offsetTop;//

            // this.setCapture();//全局捕获
            if (this.setCapture) {        //注意：只有IE识别全局捕获
                this.setCapture();//全局捕获
            }
            //鼠标移动
            document.onmousemove = function (e) {
                e = e || window.event;
                //修改物体的位置
                // console.log(e.clientX,e.clientY);//鼠标位置
                //鼠标的位置-鼠标相对于物体位置
                o.style.left = e.clientX - disLeft + "px";
                o.style.top = e.clientY - disTop + 'px';
                return false;//拦截浏览器的默认行为
            };
            //鼠标抬起
            document.onmouseup = function () {
                document.onmouseup = null;//取消事件
                document.onmousemove = null;//取消事件
                if (o.releaseCapture) {    //释放全局捕获
                    o.releaseCapture();
                }
            };
        };

二、拖拽效果边界问题

最左边：left 0
最上面 top 0
左右边：left =可视区域宽度-自身宽度
最下边：top=可视区域的高度-自身高度

三、碰撞检测

四、常见的运动

1.匀速运动
2.减速运动
3.多物体运动
4.透明度改变(淡入淡出)

五、回调函数

回调函数：在满足一定的条件之后，会自动被执行的函数
Callbak