一、拖拽效果
分析思路:
- 鼠标需要按下 mousedown
- 鼠标移动过程中,物体随着鼠标的移动而移动 mousemove
- 鼠标抬起时,物体停止移动 mouseup
注意:
1.鼠标按下事件添加给物体,鼠标移动和抬起都应该添加页面
2.鼠标相对于物体的位置
var o = document.getElementById('box');//物体
//鼠标按下事件
o.onmousedown = function (e) {
e = e || window.event;
//获取鼠标相对于物体位置
var disX = e.clientX - o.offsetLeft,
disY = e.clientY - o.offsetTop;
//鼠标移动事件
document.onmousemove = function (e) {
e = e || window.event;//事件对象
console.log(e.clientX, e.clientY);//鼠标位置
//修改物体的位置
o.style.left = e.clientX -disX + 'px';
o.style.top = e.clientY -disY + 'px';
};
//鼠标抬起事件
document.onmouseup = function () {
document.onmousemove = null;//取消鼠标移动事件
console.log('哈哈哈');
};
};
拖拽遇到的问题:
1.如果拖拽的地方有文字并且在拖拽div的时候,文字是被选中的状态,浏览器会认为是拖拽文字。
2.当被拖拽的目标是图片时,拖拽效果也不正确。默认情况下,图片是可以被拖动。
总结:拖拽效果与浏览器的默认行为产生冲突。
阻止浏览器的默认行为:return false即可。但是,这种做法低版本IE浏览器不支持。想解决这个问题(取消低版本IE浏览器的拖拽默认行为),需要使用全局捕获。
全局捕获(低版本IE支持):
为节点对象添加捕获之后,会捕获页面中的所有的事件(其它元素触发的时候,也会被该节点捕获)
- setCapture() 添加捕获
- releaseCapture() 释放捕获
var o = document.getElementById('box');//物体
//鼠标按下事件
o.onmousedown = function (e) {
e = e || window.event;
//获取鼠标相对于物体位置
var disX = e.clientX - o.offsetLeft,
disY = e.clientY - o.offsetTop;
//添加全局捕获
if (o.setCapture) {
o.setCapture();
}
//鼠标移动事件
document.onmousemove = function (e) {
e = e || window.event;//事件对象
console.log(e.clientX, e.clientY);//鼠标位置
//修改物体的位置
o.style.left = e.clientX - disX + 'px';
o.style.top = e.clientY - disY + 'px';
};
//鼠标抬起事件
document.onmouseup = function () {
document.onmousemove = null;//取消鼠标移动事件
if (o.releaseCapture) o.releaseCapture();//释放全局捕获
};
return false;
};
限制拖拽的范围:
经常会要求拖拽效果不超超一定的边界,所以在物体 移动过程中应该根据物体和范围直接的关系,做一些判断才可以。
碰撞检测:
思路:找安全范围,反之就是碰撞
将被碰撞的物体的四个边计算出来,命名为L1,T1,R1和B1,同时计算物体的四个边:L2和T2、R2、B2.
R2 < L1 || B2 < T1 || L2 > R1 || T2 > B1 这四个条件有一个成立,则就是安全区域
var o = document.getElementById('box');//物体
var box = document.getElementById('box1');//被碰撞物体
//鼠标按下事件
o.onmousedown = function (e) {
e = e || window.event;
//获取鼠标相对于物体位置
var disX = e.clientX - o.offsetLeft,
disY = e.clientY - o.offsetTop;
var maxLeft = document.documentElement.clientWidth - o.offsetWidth;//屏幕宽度-物体宽度
var maxTop = document.documentElement.clientHeight - o.offsetHeight;//屏幕高度-物体高度
//计算被碰撞物体的四个边界值
var L1 = box.offsetLeft, //左
T1 = box.offsetTop, //上
R1 = L1 + box.offsetWidth, //右
B1 = T1 + box.offsetHeight; //下
//添加全局捕获
if (o.setCapture) {
o.setCapture();
}
//鼠标移动事件
document.onmousemove = function (e) {
e = e || window.event;//事件对象
// console.log(e.clientX, e.clientY);//鼠标位置
var x = e.clientX - disX;//物体left值
var y = e.clientY - disY;//物体的top值
//判断运动的范围
if (x <= 0) { //左边界
x = 0;
} else if (x >= maxLeft) {
x = maxLeft;
}
if (y <= 0) {
y = 0;
} else if (y >= maxTop) {
y = maxTop;
}
//判断碰撞边界
var L2 = o.offsetLeft;
var T2 = o.offsetTop;
var R2 = L2 + o.offsetWidth;
var B2 = T2 + o.offsetHeight;
//进入碰撞区域
if (!(R2 < L1 || B2 < T1 || L2 > R1 || T2 > B1)) {
box.style.background="orange";
}else{
box.style.background="blue";
}
//修改物体的位置
o.style.left = x + 'px';
o.style.top = y + 'px';
};
//鼠标抬起事件
document.onmouseup = function () {
document.onmousemove = null;//取消鼠标移动事件
if (o.releaseCapture) o.releaseCapture();//释放全局捕获
};
return false;
};
二、js的运动
1.匀速运动(平滑运动)
2.减速运动(缓冲运动)
<div id="box"> </div>
<script>
var o = document.getElementById('box');
//(目标的左边距-(物体的左边距+物体宽度))/缩放比例
o.onclick = function () {
var t = setInterval(function () {
//计算速度 减速运动 速度一直在减小
var speed = Math.ceil((1000 - o.offsetLeft - o.offsetWidth) / 100);
o.style.left = o.offsetLeft + speed + 'px';//851+0.49
if (o.offsetLeft == 900) {
clearInterval(t);
}
console.log(1);
}, 10);
};
</script>
3.淡入淡出
4.运动的封装
三、回调函数
回调函数:某个动作做完或某件事情执行完以后调用的函数
回调函数经常出现函数参数位置。