DOM实现元素拖拽，滚轮事件和特效动画缓冲运动处理

目录

元素拖拽实现（点击拖动可视屏幕任意位置）

DOM滚轮事件处理

滚轮事件绑定

滚轮事件方向

 滚轮事件兼容

 滚轮缩放图片案例实现

特效动画

  缓冲运动

    单向缓冲运动

反复缓冲运动

简单的封装

透明度处理

多属性运动

多属性目标值问题

---

元素拖拽实现（点击拖动可视屏幕任意位置）

/* 
    拖拽  
    onmousedown  按下
    onmousemove  鼠标移动是在按下的基础之上
    onmouseup   抬起
*/

var div = document.getElementById("div");

// 绑定事件
// 鼠标按下
div.onmousedown = function (ev) {
    // 事件对象兼容处理
    ev = ev || window.event;

    // 阻止默认行为  拖拽元素内容有文字（选中） 或 图片 会被拖拽  
    ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;

    // IE8及以下利用阻止默认行为 阻止不了

    // 事件锁定  将当前事件和元素锁定到一起  IE独有的
    if (div.setCapture) {
        div.setCapture();
    }

    // 鼠标距离拖拽元素的距离
    var x = ev.clientX - div.offsetLeft;
    var y = ev.clientY - div.offsetTop;


    // 鼠标移动
    // 鼠标移动过快会离开当前拖拽元素，但是一定不会离开document
    document.onmousemove = function (ev) {
        // 事件对象兼容处理
        ev = ev || window.event;

        // 获取拖拽的位置 left和top
        var left = ev.clientX - x;
        var top = ev.clientY - y;

        // 边界判断
        var minLeft = 0,
            maxLeft = document.documentElement.clientWidth - div.offsetWidth;
        var minTop = 0,
            maxTop = document.documentElement.clientHeight - div.offsetHeight;

        if (left <= minLeft) {
            left = minLeft;
        } else if (left >= maxLeft) {
            left = maxLeft;
        }

        if (top <= minTop) {
            top = minTop;
        } else if (top >= maxTop) {
            top = maxTop;
        }

        // 设置位置
        div.style.left = left + 'px';
        div.style.top = top + 'px';

    }
}

// 鼠标抬起
div.onmouseup = function () {
    // 解除事件锁定   IE独有的
    if(div.releaseCapture){
        div.releaseCapture();
    }
    // 移除鼠标移动事件
    document.onmousemove = null;
}

DOM滚轮事件处理

滚轮事件绑定

 // 除了FirFox(火狐)以外其它的浏览器既可以是使用DOM0也可以使用DOM2去绑定
        // onmousewheel   
        // 滚轮事件触发  滚动条会滚动是属于默认行为
        document.onmousewheel = function(ev){
            ev = ev || window.event;
            // 给文档绑定滚轮事件不能够阻止默认行为  就报错了
            // ev.preventDefault?ev.preventDefault():ev.returnValue = false;
            console.log("哈哈");
        }
var div = document.getElementsByTagName("div")[0];

// 除了FirFox(火狐)以外其它的浏览器既可以是使用DOM0也可以使用DOM2去绑定
div.onmousewheel = scroll;
// 火狐提供了独有的滚轮事件DOMMouseScroll (火狐浏览器只能使用DOM2绑定)
div.addEventListener("DOMMouseScroll", scroll);


function scroll(ev) {
    ev = ev || window.event;
    ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
    console.log("哈哈");
}

滚轮事件方向

 // 获取元素
        var div = document.getElementsByTagName("div")[0];


        // 绑定事件
        // 除了FirFox(火狐)以外其它的浏览器既可以是使用DOM0也可以使用DOM2去绑定
        div.onmousewheel = scroll;
        // 火狐提供了独有的滚轮事件DOMMouseScroll (火狐浏览器只能使用DOM2绑定)
        div.addEventListener("DOMMouseScroll", scroll);


        function scroll(ev) {
            // 事件对象兼容处理
            ev = ev || window.event;
            // 阻止滚动条滚动的默认行为
            ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;

            // 判断滚轮的方向
            // 火狐以外其它浏览器，火狐下没有这个属性
            // console.log(ev.wheelDelta);  //IE前：正数  120