底部播放器插件

最新推荐文章于 2018-02-27 21:45:04 发布

-开瑞坦-

最新推荐文章于 2018-02-27 21:45:04 发布

阅读量406

点赞数

分类专栏：前端杂记

本文链接：https://blog.csdn.net/qq_32686869/article/details/79254686

版权

前端杂记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

写了个播放器练手

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.οnlοad=function(){

			document.getElementById("father").οnmοuseοver=function(){
				console.log("onmouseover");
			}
			document.getElementById("father").οnmοuseοut=function(){
				console.log("onmouseout");
			}

		}
		
	</script>
</head>
<body>
	<div id="father">
		<div class="child"></div>
	 </div>
	 
</body>
</html>

所以把以下写法改了一下

以下代码为改前

	document.getElementById("bottom_music").οnmοuseοut=function(e){
		
		if(hidden==0){
			silder_hide();
		}

	}
	document.getElementById("bottom_music").οnmοuseοver=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").οnmοuseοut=function(e){
		hidden_in=1;
		if(hidden==0){
			silder_hide();
		}

	}
	document.getElementById("bottom_music").οnmοuseοver=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;
		}
		
	}

虽然是简单的东西但还是要慢慢练习吧

项目地址 https://github.com/1036875207/music-bottom-bar

-开瑞坦-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
底部播放器插件

写了个播放器练手position: relative; 元素移动后会造成占位解决办法是father position: relative; childs position: absolute;本来是想做成底部鼠标离开后2s自动隐藏，鼠标悬浮播放器自动展开事件触发是用onmouseout 和 onmouseover但是发现会多次触发测试代码如下
复制链接

扫一扫