HTML网页特效点击按钮全屏变灰_html怎么把按钮变大资源-CSDN文库

共1个文件

html：1个

5星 · 超过95%的资源需积分: 49 80 浏览量 2008-09-12 12:02:41 上传评论 1 收藏 2KB RAR 举报

在网页设计中，有时我们需要实现特定的交互效果来提升用户体验，比如点击按钮后整个页面变灰，这样的功能常用于加载等待、禁用界面或者聚焦某个特定元素时。本知识点主要探讨如何利用HTML和CSS实现“点击按钮全屏变灰”的特效。我们需要一个基础的HTML结构，包括一个按钮元素和一个全屏的遮罩层。在`<body>`标签内，创建一个按钮`<button>`和一个透明的全屏`<div>`，并赋予它们相应的ID以便于后续的CSS和JavaScript操作： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML 网页特效 - 点击按钮全屏变灰</title> <style> /* CSS 部分 */ #mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); z-index: 999; display: none; /* 初始状态下不显示遮罩层 */ } #button { position: relative; z-index: 1000; /* 按钮样式可按需自定义 */ } </style> </head> <body> <button id="button">点击我，全屏变灰</button> <div id="mask"></div>  <script> document.getElementById('button').addEventListener('click', function() { var mask = document.getElementById('mask'); mask.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; // 设置遮罩层颜色为半透明黑色 mask.style.display = 'block'; // 显示遮罩层 }); </script> </body> </html> ``` 在CSS部分，我们定义了一个全屏的遮罩层`#mask`，初始状态是透明且不可见（`display: none`）。按钮`#button`的`z-index`设置得比遮罩层高，确保它始终位于遮罩层之上。在JavaScript部分，我们给按钮添加了一个点击事件监听器。当用户点击按钮时，会改变遮罩层的背景颜色为半透明黑色，并将其显示出来，从而达到全屏变灰的效果。这里使用了`addEventListener`方法绑定点击事件，`style.backgroundColor`和`style.display`分别用于改变遮罩层的颜色和可见性。为了实现更丰富的交互，可以添加一个反向的事件，比如再次点击按钮或按下ESC键时恢复原状： ```javascript document.getElementById('mask').addEventListener('click', function() { this.style.display = 'none'; }); document.addEventListener('keydown', function(event) { if (event.key === 'Escape') { document.getElementById('mask').style.display = 'none'; } }); ``` 这样，当用户点击遮罩层或按下ESC键，页面将恢复原状，提供更好的用户体验。以上就是实现“点击按钮全屏变灰”特效的基本步骤，你可以根据实际需求调整CSS样式和JavaScript逻辑，例如调整遮罩层的透明度、添加过渡动画等，以适应不同场景下的应用。这个特效在网页加载、表单提交、视频播放等场景下非常实用，能有效引导用户的注意力并提高用户体验。

展开

资源详情

资源评论

资源推荐

收起资源包目录

页面变灰.rar （1个子文件）

页面变灰.html 1KB

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title> http://hi.csdn.net/YoungEngineer/profile </title>

<script >
function disableBodyArea(f){
    document.getElementById('topCoverDiv').style.display = f? '':'none';
    var allSelects=document.getElementsByTagName("select");
    for(var i=0;i<allSelects.length;i++) {
        allSelects[i].disabled=f;
    }
}
</script> 

</head>

<body style="margin:0;">
<div id="topCoverDiv" style="display:none;float:left;z-index:100;position:absolute;top:expression(this.offsetParent.scrollTop);left:expression(this.offsetParent.scrollLeft);width:100%;height:100%;filter:alpha(opacity=90);background-color:#888888;" oncontextmenu="return false;"><div style="z-index:101;position:absolute;top:200px;left:200px;width:200px;height:200px;background-color:#FFFFFF;"><input type=button value="取消页面灰掉" onclick="disableBodyArea(false);" /><a href="http://user.qzone.qq.com/493547845/blog/">失落天堂</a></div></div>

<input type=button value="点击将页面灰掉" onclick="disableBodyArea(true);"> 

</body>
</html>