JS实现哀悼
实现网页哀悼效果的方法
在网页上实现哀悼效果通常指将页面整体调整为黑白或灰色调，以示哀悼。以下是几种常见的实现方式：
CSS滤镜实现
通过CSS的filter属性可以快速将整个页面转为灰度。将以下代码添加到网站的全局CSS或<head>标签中：
html {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}JavaScript动态切换 通过JavaScript可以动态添加或移除哀悼效果：
function setMourningMode(enable) {
if (enable) {
document.documentElement.classList.add('mourning-mode');
} else {
document.documentElement.classList.remove('mourning-mode');
}
}
// 调用示例
setMourningMode(true); // 开启哀悼模式配合CSS：
.mourning-mode {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}兼容性处理 对于不支持CSS滤镜的旧浏览器，可以使用备用方案：
/* 备用方案：通过覆盖半透明黑色层 */
.mourning-mode::before {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 9999;
pointer-events: none;
}特定元素处理 如果只需要对特定元素应用哀悼效果：
.mourning-element {
filter: grayscale(100%);
opacity: 0.8;
}性能优化 全页面滤镜可能影响性能，特别是对大型网站。可以考虑：
- 只对主要内容区域应用滤镜
- 使用
will-change: filter优化 - 避免在动画元素上使用
注意事项
- 测试不同浏览器的兼容性
- 考虑用户偏好，提供关闭选项
- 确保文字内容仍保持可读性
- 避免影响网站功能和交互
