如何使所有元素变得更具特色 [英] How to darken all elements apart from specific one

问题描述

我正在建立一个谷歌Chrome扩展，我正在做一些工作在右边（在我的朋友的故事），其实我正在寻找一个特定的朋友的故事，其名称出现在输入元素点击后按钮。
我需要暗淡/变暗所有其他出现在图片黑色边框中的元素，除了正确的元素，直到他按下X按钮

I'm building a google chrome extension , I'm doing some work on the right side (in my friend stories), in fact, I'm searching for a specific friend stories whose name appears in the input element after clicking the button. I need to dim/darken all other elements which appear in the black border in the picture except for the right element while searching until he presses X button

I不知道如何到达所有其他元素，除了一个！ ：（

I've no idea how to reach all other elements except from one !! :(

图片：

推荐答案

我找到了我的codez！在屏幕上放一个画布，并删除所选元素周围的部分。 openOverlay（elem）其中 elem 是要突出显示的元素。

I found my codez! Puts a canvas on the screen and cuts out the part around the selected element. Just call openOverlay(elem) where elem is the element you want to highlight.

var padding = 5;  //Space around canvas
var animDelay = 250;  //Delay used in CSS animation and transition for canvas.highlight

var divs = document.getElementsByTagName("div");

for (var i = 0; i < divs.length; i++) {
  divs[i].addEventListener("click", function() {
    openOverlay(this);
  }, true);
}

function openOverlay(elem) {
  var loc = elem.getBoundingClientRect();
  var canvas = document.createElement("canvas");
  canvas.className = "highlight";
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  var ctx = canvas.getContext("2d");
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.clearRect(loc.left - padding, loc.top - padding, loc.width + padding * 2, loc.height + padding * 2);
  document.body.appendChild(canvas);
  window.overlayCanvas = canvas;
  canvas.onclick = closeOverlay;
}

function closeOverlay() {
  delete window.overlayCanvas;
  this.style.opacity = 0;
  var self = this;
  setTimeout(function() {
    self.parentNode.removeChild(self);
  }, animDelay);
}

//Press X to close?
window.addEventListener("keypress", function(e) {
  //120 is X
  if (e.which === 120 && window.overlayCanvas) closeOverlay.call(overlayCanvas);
}, false);

/* necessary part */
canvas.highlight {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  opacity: 0.5;
  -webkit-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
  -webkit-animation: canvasFade 250ms ease;
  animation: canvasFade 250ms ease;
}
@-webkit-keyframes canvasFade {
  from { opacity: 0; }
  to { opacity: 0.5; }
}
@keyframes canvasFade {
  from { opacity: 0; }
  to { opacity: 0.5; }
}

/* junk styling */
div {
  margin: 10px;
  width: 100px;
  height: 100px;
  display: inline-block;
  background: green;
  cursor: pointer;
}
div.funky {
  padding: 3px 8px;
  margin-top: 5.2px;
  border-bottom: 10px solid red;
}

<div>One</div>
<div>One</div>
<div class="funky">One</div>
<div>One</div>

这篇关于如何使所有元素变得更具特色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！