滚轮事件、拖拽、回调函数 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);

最后

以上就是高挑路灯为你收集整理的滚轮事件、拖拽、回调函数 12的全部内容，希望文章能够帮你解决滚轮事件、拖拽、回调函数 12所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。