个人中心
gpt4 book ai didi

javascript - 如何模糊除列表项之外的整个主体？

转载 作者：行者123 更新时间：2023-12-01 01:30:49 25 4
gpt4 key购买 nike

我想创建一种效果，使整个 body 变得模糊或变暗，只有特定的列表项显得清晰。但是，当我将 z-index 设置为列表项时，它不起作用。当我设置整个无序列表的 z-index 时，它可以工作，但所有列表项都显示清晰(我不想要)。

让我向您展示我的 html 代码:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ashish Toppo</title>
    <link href="https://fonts.googleapis.com/css?family=Oxanium&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
</head>
<body >
    <!-- the html for the top bar starts here -->
    <div class="top_bar" id="topBar">
        <div class="logo_name" id="logoName">Ashish Toppo</div>
        <ul class="menu">
            <li class="menu_items currently_active_menuItem" id="home">home</li>
            <li class="menu_items" id="about">about</li>
            <li class="menu_items" id="education">education</li>
        </ul>
    </div>
    <!-- the html for the top bar ends here -->

    <!-- the html for the intro starts here -->
    <div class="intro" id="intro">
        <div class="profile_pic" id="profilePic">
            <img id="profileImg" src="images/ashish-toppo-green.jpg" width="100%" height="100%" alt="a picture of mine">
        </div>
        <div class="intro_box" id="introBox">
                <!-- some introduction text here -->
                <center id="aboutPointer">To know more about me, go to the about section!</center>
        </div>

    </div>
    <!-- the html for the intro ends here -->


<script src="js/uiversal.js"></script>
<script src="js/index.js"></script>
</body>
</html>

现在，通用 javaScript 文件:

/* this is a reusable js file universal to all web pages */
/* Ashish Toppo */
"use strict";
function get(id_or_class){
    var obj = {
        element: ( document.getElementById(id_or_class) ) ? document.getElementById(id_or_class) :
                 ( document.getElementsByClassName(id_or_class) ) ? document.getElementsByClassName(id_or_class) : 
                 ( document.querySelector(id_or_class) ) ? document.querySelector(id_or_class) : 
                 console.error("The provided HTML element could not be found"),
        html: () => { return obj.element; },
        changeText: (text) => { obj.html().innerHTML = text; },
        appendText: (text) => { 
            let appendOn = obj.html().innerHTML;
            obj.html().innerHTML = appendOn + text;
        },
        previousDisplayMode: "block",
        hide: () => {
            obj.previousDisplayMode = obj.html().style.display;
            obj.html().style.display = "none"; 
        },
        show: () => { 
            obj.html().style.display = obj.previousDisplayMode;
        },
        on: (event, callBack) => {
            obj.html().addEventListener(event, callBack);
        },
        previousZIndex: 1,
        focusOn: () => {
            let blur = document.createElement("div");
            blur.className = "theDivThatBlurs";
            blur.style.width ="100vw";
            blur.style.height ="100vh";
            blur.style.display ="block";
            blur.style.position ="fixed";
            blur.style.top ="0";
            blur.style.left ="0";
            blur.style.zIndex ="9";
            blur.style.backgroundColor ="rgba(0, 0, 0, 0.9)";
            blur.innerHTML = "";
            document.body.appendChild(blur);

            obj.html().style.zIndex = "100";
        }
    }
    return obj;
}

index.js 文件如下:

/* my css wasn't working as i wanted, so i had to fix it using js */
"use strict";
(function(d){
    const active = d.getElementsByClassName("currently_active_menuItem");
    active[0].style.textDecoration = "none";
})(document);

var about = get("about");

var aboutPointer = get("aboutPointer");
aboutPointer.on("click", function(){
    console.log("the about pointer has been clicked");
    focus(about);
});


function focus(theElement){
    console.log("the focus is working");
    theElement.focusOn();
}

最佳答案

可以使用box-shadow属性来实现调光效果。快速又简单:)

只需以编程方式切换一个类，它就应该适用于您拥有的任何元素。

代码

function focusAndDim() {
  document.getElementById("maindiv").classList.toggle("visible");
  // if you want to get more fancy ;) 
  document.getElementsByTagName("body")[0].classList.toggle("blur");
}
.visible {
  box-shadow: 0 0 0 10000px #ccc;
  /* this code below make everything else hidden */
  /* box-shadow: 0 0 0 10000px #fff;  */
  position: relative;
}

.btn {
  height: 20px;
  line-height: 1.4;
  border: 2px solid #999;
  padding: 12px 24px;
  margin-bottom: 10px;
  border-radius: 2px;
  cursor: pointer;
}

body {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
}

body.blur div {
  filter: blur(2px);
}

body.blur div.visible {
  filter: blur(0);
}
<div class="btn" onclick="focusAndDim()" id="maindiv">Click Me</div>

<div>Other elements</div>

关于javascript - 如何模糊除列表项之外的整个主体？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60631868/

25 4 0
文章推荐： javascript - 如何将数据库的行号放入变量中
文章推荐： asp.net-mvc - 如何使用 Moq 模拟存储库 Single(Expression> predicate) 方法
文章推荐： javascript - 嵌套 for 循环从嵌套数组创建节/div
文章推荐： r - 在带有因子变量的 stat_bin 中使用密度
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com