-
最近需要把时间轴修改成自己想要的样子，需要在时间轴的当前时间条上设置一个气泡，但是没有这个api，于是想到一个办法，通过监听 时间条dom元素，获取时间条的位置，然后创建一个元素当做气泡，这个气泡的位置会随着时间条的位置变化而变化；
1、需要用到MutationObserver 来监听时间条dom元素，
2、用DOM.getBoundingClientRect()方法监听dom相对于窗口的位置；
3、根据时间条的位置，给创建的气泡元素设置位置，从而达到给时间条加气泡的效果；
4、为了简化一些，我用了一个div当做时间条，设置一个定时器让它持续移动。可以模拟出来拖动时间条的场景。
上代码：
<!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>observer</title>
<style>
.wrap{
width:400px;
height:400px;
position: relative;
margin-left:200px;
}
.box{
width: 300px;
height:300px;
position: absolute;
top:0;
left:0;
background:cadetblue;
clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 15px)
}
.pop{
position: fixed;
border:1px solid black;
border-radius:4px;
padding: 4px;
box-shadow: 0px 0px 4px 2px black inset;
user-select: none;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box"></div>
</div>
<script>
let box = document.querySelector(".box");
let add = 1;
setInterval(() => {
let left = parseInt(getComputedStyle(box).left);
console.log(left);
if(left > 300 ){
add = -1;
}
if (left < 0){
add = 1;
}
box.style.left = `${left + add}px`
}, 1000);
// 观察者的选项(要观察哪些突变)
var config = { attributes: true, childList: false, subtree: false };// 只监听属性发生变化
// 当观察到突变时执行的回调函数
var callback = function(mutationsList) {
console.log(mutationsList, 'mutationsList');
mutationsList.forEach(function(item,index){
if (item.type == 'childList') {
console.log('有节点发生改变');
} else if (item.type == 'attributes') {
let targetleft = item.target.getBoundingClientRect().left;
console.log(targetleft,'targetleft');
let date = new Date();
changePop(item.target, `
<div>${date.getYear()}年${date.getMonth() + 1}月${date.getDay()}</div>
<span>${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}</span>
`)
} else if (item.type == 'subtree') {
console.log('subtree有变化');
}
});
};
// 创建一个链接到回调函数的观察者实例
var observer = new MutationObserver(callback);
// 开始观察已配置突变的目标节点
observer.observe(box, config);
// 停止观察
//observer.disconnect();
function changePop(parent,innerHTML){
let pop = null;
if(!document.querySelector('.pop')){
pop = document.createElement('div');
pop.classList.add('pop')
document.body.appendChild(pop);
} else {
pop = document.querySelector('.pop');
}
let position = parent.getBoundingClientRect();
pop.style.left = `${position.left}px`;
pop.style.top = `${position.bottom}px`;
pop.innerHTML = innerHTML;
}
</script>
</body>
</html>
效果：气泡位置会跟着时间条的位置变化而变化
-