遮罩层-显示/隐藏

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

摘要生成于 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>

<think>我们将使用jQuery实现一个功能:当鼠标悬停在一个元素上时,显示遮罩层;当鼠标离开时,隐藏遮罩层。 假设我们有一个容器(例如一个div),里面包含内容和一个遮罩层(通常是一个覆盖整个容层的半透明层)。 结构示例: <div class="container"> ... 内容 ... <div class="mask"></div> <!-- 遮罩层 --> </div> 样式上,遮罩层默认隐藏(比如display: none; 或者 opacity: 0; 结合transition可以实现渐变效果),然后当鼠标悬停在容器上时,遮罩层显示。 使用jQuery,我们可以监听容器的mouseenter和mouseleave事件,然后对遮罩层进行显示隐藏操作。 下面是一个示例代码,包括HTML结构、CSS样式和jQuery代码。</think>### 使用 jQuery 实现鼠标悬停显示遮罩层 以下是完整的实现方案,包含 HTML 结构、CSS 样式和 jQuery 代码: ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery 遮罩层效果</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> .container { position: relative; width: 300px; height: 200px; overflow: hidden; border: 1px solid #ccc; } .content { width: 100%; height: 100%; background-color: #f0f0f0; display: flex; align-items: center; justify-content: center; } .mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); color: white; display: flex; align-items: center; justify-content: center; opacity: 0; /* 初始完全透明 */ transition: opacity 0.3s ease; /* 添加渐变效果 */ } </style> </head> <body> <div class="container"> <div class="content">悬停区域</div> <div class="mask">遮罩层内容</div> </div> <script> $(document).ready(function() { // 鼠标进入时显示遮罩层 $('.container').hover( function() { $(this).find('.mask').stop().fadeTo(200, 1); // 200ms内渐变到不透明 }, function() { $(this).find('.mask').stop().fadeTo(200, 0); // 200ms内渐变到透明 } ); }); </script> </body> </html> ``` ### 代码解释: 1. **HTML 结构**: - `.container`:作为定位基准的容器 - `.content`:显示主要内容区域 - `.mask`:半透明的遮罩层(初始不可见) 2. **CSS 关键点**: - `position: relative` 容器设为相对定位 - `position: absolute` 遮罩层绝对定位覆盖整个容器 - `opacity: 0` 初始完全透明 - `transition` 添加透明度渐变效果 - `rgba(0,0,0,0.7)` 黑色半透明背景 3. **jQuery 逻辑**: - `hover()` 方法:监听鼠标进入/离开事件 - `fadeTo()` 方法:平滑改变透明度(避免显示/隐藏的突兀变化) - `stop()` 方法:停止当前动画,防止多次触发导致的动画队列堆积 - 参数说明: - 200:动画时长(毫秒) - 1:鼠标进入时透明度变为 1(完全不透明) - 0:鼠标离开时透明度变为 0(完全透明) ### 进阶优化建议: 1. 添加遮罩层内容动画(如文字从下方滑入) 2. 支持移动设备的触摸事件 3. 实现点击遮罩层触发操作 4. 添加多重遮罩层或嵌套效果
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值