Bottom player plug-in

Wrote a player to practice

position: relative; when an element is moved, it will cause occupation

The solution is

father  position: relative;   childs   position: absolute;


It was originally intended to make the bottom mouse automatically hide after 2 seconds, and the mouse suspension player automatically expand

Event triggered with onmouseout and onmouseover

But the discovery will trigger many times

The test code is as follows

When the mouse enters the child, it will trigger an onmouseout and then 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>
	<div id="father">
		<div class="child"></div>
	 </div>
	 
</body>
</html>

So I changed the following way of writing

The following code is before modification

	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;
		}
		
	}
The following code adds a variable judgment after modification

	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;
		}
		
	}



Tags: Javascript

Posted on Wed, 15 Apr 2020 09:51:38 -0700 by pherrick