如何突出显示部分图像并模糊其余部分？

Question

我正在寻找一种方法来获得与上述类似的效果，但使用css + javascript。理想情况下，我正在寻找一个给出对象的javascript

{
  top: 30,
  left: 10,
  width: 100
  height: 300
}

会在鼠标进入和离开事件时对图像#document产生影响，因此当鼠标悬停在图像上时，我可以突出显示部分图像。

到目前为止，我有以下内容：

var highlight = function(sel, info) {
  $(sel).mouseenter(function() {
    var w = $(sel).width();
    var h = $(sel).height();
    $(sel + ' .box').css({
      top: info.top + 'px',
      left: info.left + 'px',
      width: info.width + 'px',
      height: info.height + 'px',
      opacity: 1
    });
    $(sel + ' .overlay-a').css({
      top: 0 + 'px',
      left: 0 + 'px',
      right: 0 + 'px',
      bottom: (h - info.top) + 'px',
    });
    $(sel + ' .overlay-b').css({
      top: info.top + 'px',
      left: 0 + 'px',
      right: (w - info.left) + 'px',
      bottom: 0 + 'px'
    });
    $(sel + ' .overlay-c').css({
      top: info.top + 'px',
      left: (info.left + info.width) + 'px',
      right: 0 + 'px',
      bottom: 0 + 'px'
    });
    $(sel + ' .overlay-d').css({
      top: (info.top + info.height) + 'px',
      left: info.left + 'px',
      right: (w - info.left - info.width) + 'px',
      bottom: 0 + 'px'
    });
  }).mouseleave(function() {
    $(sel + ' .box').css({
      top: 0 + 'px',
      left: 0 + 'px',
      width: 0 + 'px',
      height: 0 + 'px',
      opacity: 0
    });
    $(sel + ' .overlay-a, ' + sel + ' .overlay-b, ' + sel + ' .overlay-c, ' + sel + ' .overlay-d').css({
      top: 'auto',
      left: 'auto',
      right: 'auto',
      bottom: 'auto',
    });
  });
}

highlight('#document', {
  top: 10,
  left: 10,
  width: 200,
  height: 200
});

.container {
  position: relative;
  width: 600px;
}
.box {
  position: absolute;
  border: 2px solid black;
  box-sizing: border-box;
  z-index: 2;
}
.container img {
  width: 100%;
  z-index: 1;
}
.overlay {
  position: absolute;
  opacity: 0.5;
  background-color: black;
  z-index: 2;
  top: 0px;
  left: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="document" class="container">
  <img src="http://lorempixel.com/600/400" />
  <div class="overlay overlay-a"></div>
  <div class="overlay overlay-b"></div>
  <div class="overlay overlay-c"></div>
  <div class="overlay overlay-d"></div>
  <div class="box"></div>
</div>

Answer 1

我做了JSfiddle来演示如何实现模糊效果。理想情况下，您想要做的就是将鼠标悬停在图像上，页面的其余部分使用模糊效果。页面的其余部分可以使用

分隔

所以，使用我的代码，你想要的是：

<div class=blur>
Code of other stuff
</div>
<img href="example.jpg">
<div class=blur>
More code...
</div>

要使照片突出，请为照片指定一个高z-index，然后使用一个位置：固定div，其z-index低于所选项目。

Here's some more code我发现它演示了如何做这种模糊效果，虽然比我复杂一点。

如果您还有其他问题，请随时提出。

Answer 2

我想到的第一件事就是使用JS / jQuery将要突出显示的元素的zindex更改为更高（更接近用户）并在jQuery中显示部分透明的叠加.show（）这个）。

所以你会：

[观察者]

• 要突出显示的元素
• 半透明元素
• 主要内容

如果您需要帮助，其他人将不得不帮助您使用实际的JS。