滚轮事件、拖拽、回调函数 12

day12 js特效动画

1.滚轮事件

• 添加滚轮事件：
  • chrome、ie : onmousewheel
  • ff:添加一定要通过事件绑定方式添加 addEventListener(“DOMMouseScroll”)
• 滚动方向：
  • chrome、ie : ev.wheelDelta 上120 下-120
  • ff: ev.detail 上-3 下 3

var oDiv = document.getElementsByTagName("div")[0];

//1.添加滚轮事件
oDiv.onmousewheel = scroll;
if (oDiv.addEventListener) {
    oDiv.addEventListener("DOMMouseScroll", scroll)
}

//2.声明一个滚动事件发生时调用的函数
function scroll(ev) {
    var oEv = window.event || ev;
    //console.log(oEv.wheelDelta); //chrome ie
    //console.log(oEv.detail);//ff

    var tag = true; //上--true   下--false
    if (oEv.wheelDelta) {
        tag = oEv.wheelDelta > 0 ? true : false
    } else {
        tag = oEv.detail < 0 ? true : false
    }

    if (tag) {
        console.log("上");
    } else {
        console.log("下");
    }
}

2.拖拽

• 按下–onmousedown
• 移动–onmousemove 拖拽
• 松手–onmouseup
• 顺序
  • 添加按下事件
  • 添加移动事件
  • 在移动事件里面移动元素(元素随鼠标的位置移动)
  • 添加抬起事件，停止移动(移动事件取消掉)
  • 问题：鼠标一动就到了元素的左上角
  • 希望：鼠标按那，就在那
  • 解决：移动元素的位置，鼠标按那，就在那

 //1.按下
oDiv.onmousedown = function (ev) {
    var oEv = window.event || ev;
    // var x = 鼠标的位置-元素的位置
    var x = oEv.clientX - oDiv.offsetLeft;
    var y = oEv.clientY - oDiv.offsetTop;

    //2.移动
    document.onmousemove = function (ev) {
        var oEv = window.event || ev;
        //4.获取鼠标位置
        var l = oEv.clientX - x;
        var t = oEv.clientY - y;

        //3.让元素移动
        oDiv.style.left = l + "px";
        oDiv.style.top = t + "px"
    }

    //3.松手
    document.onmouseup = function () {
        //取消移动事件
        document.onmousemove = null;
        if (oDiv.releaseCapture) {
            oDiv.releaseCapture();
        }
    }
    if (oDiv.setCapture) {
        oDiv.setCapture();
    }
    return false; //IE低版本不兼容
}

3.有缓冲运动

1.从当前运动500 （在当前基础上+速度） ---- 》 到目标值

2.来回

3.封装（使用–width，height，left，top） —》opacity

4.透明度

5.任意属性运动

6.抽屉式运动 移入–500 离开–100 抽搐

7.多属性运动

8.不能所有元素到目标点停

4.回调函数

回调函数callback：某个动作或者是某个行为执行完以后调用的函数，是解决异步操作的有效途径

异步：在做某一个操作的时候，其他的操作可以继续执行 定时器

同步：在做某一个操作的时候，其他的操作只能等待 alert for

console.log(1);
setTimeout(function(){ //回调函数
    console.log(2);
},1000);
console.log(3);