核心提示：写了个播放器练手position: relative; 元素移动后会造成占位解决办法是father position: relative; childs position: absolute;本来是想...
写了个播放器练手
position: relative; 元素移动后会造成占位
解决办法是
father position: relative; childs position: absolute;
本来是想做成底部鼠标离开后2s自动隐藏，鼠标悬浮 播放器自动展开
事件触发是用onmouseout 和onmouseover
但是发现会多次触发
测试代码如下
鼠标进入 child 后会先触发一个onmouseout 再触发onmouseover
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#father{
width: 100%;
height: 100px;
background-color: #2A58E7;
display: flex;
}
.child{
position: relative;
margin: 0 auto;
width: 20%;
height: 100px;
background-color: #F612CF;
}
</style>
<script type="text/javascript">
window.onload=function(){
document.getElementById("father").onmouseover=function(){
console.log("onmouseover");
}
document.getElementById("father").onmouseout=function(){
console.log("onmouseout");
}
}
</script>
</head>
<body>
<p id="father">
<p class="child"></p>
</p>
</body>
</html>
所以把以下写法改了一下
以下代码为改前
document.getElementById("bottom_music").onmouseout=function(e){
if(hidden==0){
silder_hide();
}
}
document.getElementById("bottom_music").onmouseover=function(e){
if(hidden==1){
silder_show();
}
}
function silder_hide(){
setTimeout(function(){
document.getElementById("bottom_music").style.transform="translate(0px,50px)";
hidden=1;
},2000);
}
function silder_show(){
var oDom=document.getElementById("bottom_music").style.transform;
//alert(oDom.length);
if(oDom.length>0){
document.getElementById("bottom_music").style.transform="";
hidden=0;
}
}
以下代码为修改后 加了个变量判断
document.getElementById("bottom_music").onmouseout=function(e){
hidden_in=1;
if(hidden==0){
silder_hide();
}
}
document.getElementById("bottom_music").onmouseover=function(e){
hidden_in=0;
if(hidden==1){
silder_show();
}
}
function silder_hide(){
setTimeout(function(){
if(hidden_in==1){
document.getElementById("bottom_music").style.transform="translate(0px,50px)";
hidden=1;
}
},2000);
}
function silder_show(){
var oDom=document.getElementById("bottom_music").style.transform;
//alert(oDom.length);
if(oDom.length>0){
document.getElementById("bottom_music").style.transform="";
hidden=0;
}
}
