遮罩层-显示/隐藏

最新推荐文章于 2024-08-27 17:31:59 发布

原创最新推荐文章于 2024-08-27 17:31:59 发布 · 置顶 · 478 阅读

0 ·

CC 4.0 BY-SA版权

js 同时被 3 个专栏收录

29 篇文章

订阅专栏

js样式

20 篇文章

订阅专栏

html

20 篇文章

订阅专栏

本文介绍了一个冥想音乐网页的设计方案，包括遮罩层显示、使用说明、音乐播放器及返回按钮等功能，为用户提供沉浸式的冥想体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近用到了遮罩层，备份一下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>冥想音乐</title>
	<script type="text/javascript" src="../js/jquery-1.7.2.js" ></script>
	<script type="text/javascript">
		//页面加载执行
		window.onload=function(){ 
			$("#m_mask").show();//显示遮罩层
			closebt.onclick=function(){ //点击确定，隐藏遮罩层。
				$("#m_mask").hide();
				$("#i_show").show();
			} 
		}
		
	</script>
</head>
<body>
	<!--遮罩层显示-->
	<div id="m_mask" align="center" style="top:0%; left:0%; padding:16px; border:3px solid orange; background-color:wheat;position:absolute;z-index:1002; overflow:auto; width: 100%; height: 100%;display: block;"> 
		<p style="font-size: 26px;flood-color: black;" align="center">使用说明： </p>
		<br />
		<p>1：平躺在垫子上，或者以舒适的坐姿坐在垫子上。</p>
		<p>2：打开音乐，轻轻的闭上眼镜，放慢呼吸。 </p>
		<p>3：将意识关注在呼吸之上，深长的吸气，缓慢的呼气。</p>
		<p>4：每天冥想10到15分钟。</p>
		<a href="javascript:void(0)" id="closebt" style="flood-color: blue;" >确定 </a>
	</div>
	<div id="i_show" style="display: none;">
	<!--图片显示    -->
		<div align="center">
			<img src="../img/music-img/1.gif"  width="100%" height="outo"/>
		</div>
	<!--播放器显示-->	
		<div style="height: 50PX;"></div>
		<div align="center" style="max-width: 100%;height: auto; display: block; background-size: contain;">
			<audio src="../music/1.mp3" id="audioDom" controls="controls" >
			</audio>
		</div>
	<!--返回按钮显示-->	
		<div style="height: 50PX;"></div>
		<div align="center"> 
			<a href="javascript:;" onClick="javascript:history.back(-1);">
				<img height="80" width="80"  src="../img/tubiao/1.png" border="0" title="返回上一页">
			</a>
		</div>
	</div>
</body>
</html>