全局捕获
.添加全局捕获(ie):如果元素设置全局捕获，会监听
整个页面上对应的事件的发生，只要一发生事件，截取
触发
elem.setCapture();
elem.releaseCapture(); //释放全局捕获
抽屉式导航
多属性运动
最后封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div></div>
<script src="./ujiuye.js"></script>
<script>
//1.获取元素
var oDiv = document.getElementsByTagName("div");
// var timer;
//2.点击
oDiv[0].onclick = function () {
bufferMove(oDiv[0], { "width": 500, "height": 101,"opacity":0.5 }, 10);
}
function bufferMove(elem, props, time) { //运动元素:elem,运动属性:attr,目标值：target 时间：time
//解决：在当前定时器开始之前，把之前的定时清除掉
clearInterval(elem.timer);
elem.timer = setInterval(function () {
/*
问题：没到目标点就不动了
原因：如果同时运动多个值，只要有一个属性到达目标点就会停止
解决：所有属性都到了目标点才能停
假设：所有的都到了目标点 tag = true;
验证：一个一个判断，但凡有一个没到目标点，说明假设不成 tag = false
结论：tag
*/
//a.假设：所有的都到了目标点 tag = true;
var tag = true;
for (var attr in props) {
//2.获取当前值
if (attr == "opacity") {
var cur = parseInt(getStyle(elem, attr) * 100);
//如果目标值*过一次了就不乘了 //0-1 0.1 * 100 = 10
props[attr] = props[attr] > 1 ? props[attr] : props[attr] * 100;
} else {
var cur = parseInt(getStyle(elem, attr));
}
//3.计算速度 = （目标值-当前值）/时间
var speed = (props[attr] - cur) / time;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//b.验证：一个一个判断，但凡有一个没到目标点，说明假设不成 tag = false
if (cur != props[attr]) {
tag = false;
}
//1.设置div的位置
if (attr == "opacity") {
elem.style[attr] = (cur + speed) / 100;
} else {
elem.style[attr] = cur + speed + "px";
}
}
//结论：tag ==true ,说明都到了目标点，停止定时器
if(tag){
clearInterval(elem.timer);
}
}, 30);
}
</script>
</body>
</html>
扫一扫
157
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
