对鼠标悬停的图像部分进行模糊处理答案

【问题标题】：Unblur part of an image where the mouse hovers over对鼠标悬停的图像部分进行模糊处理
【发布时间】：2016-01-30 08:34:31
【问题描述】：

我一直试图让图像看起来模糊，但是当鼠标悬停在上面时，它会清除光标指向的那一点点。很像www.canva.com 网站。

到目前为止，这是我的代码，它不能 100% 工作。我正在使用 HTML、CSS 和 Javascript。不幸的是，我对 javascript 完全陌生！

HTML：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>QuoteWall</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <link rel="stylesheet" type="text/javascript" href="javascript.js">
    </head>
<body>
<div class="pic">
    <svg class="blur" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%">
        <image filter="url(#filter2)" xlink:href="image.png" width="100%" height="100%"></image>
        <filter id="filter2">
            <feGaussianBlur stdDeviation="5" />
        </filter>
        <mask id="mask1">
            <circle cx="-50%" cy="-50%" r="30" fill="white" filter="url(#filter2)" />
        </mask>
        <image xlink:href="image.png" width="100%" height="100%" mask="url(#mask1)"></image>
    </svg>
</div>
</div>
</body>
</html>

CSS：

body {
    margin: 0;
}
.pic {
    text-align: center;
    position: relative;
    height: 250px;
}
.blur {
    height: 100%;
}
.overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
}

Javascript：

   $('.pic').mousemove(function (event) {
    event.preventDefault();
    var upX = event.clientX;
    var upY = event.clientY;
    var mask = $('#mask1 circle')[0];
    mask.setAttribute("cy", (upY - 5) + 'px');
    mask.setAttribute("cx", upX + 'px');
});

任何帮助将不胜感激。谢谢，乔

【问题讨论】：

我不明白。您想在悬停时取消模糊部分图像还是在悬停时取消模糊整个图像？
我想模糊鼠标所在的位置，所以是图像的一部分。与此非常相似：www.canva.com

标签： javascript jquery html css image

【解决方案1】：

这是一个实验性解决方案。每次鼠标悬停时，您都会在 svg 掩码中动态注入一个新的圆形元素，然后延迟隐藏每个圆形。

var svgNS = "http://www.w3.org/2000/svg";

$('.pic').mousemove(function (event) {
    event.preventDefault();
    var upX = event.clientX;
    var upY = event.clientY;
    var mask = $('#mask1')[0];
    
    var circle = document.createElementNS(svgNS,"circle");
    circle.setAttribute("cx", upX);
    circle.setAttribute("cy", upY);
    circle.setAttribute("r", "30");
    circle.setAttribute("fill", "white");
    circle.setAttribute("filter", "url(#filter2)");
    
    mask.appendChild(circle);
    
    setTimeout(function(){ 
        circle.style.opacity = '0';
        setTimeout(function(){ 
            mask.removeChild(circle);
        }, 300);
    }, 300);
});

.pic {
    text-align: center;
    position: relative;
    height: 250px;
}
.blur {
    height: 100%;
}
.overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
}
circle {
   opacity: 1;
   -webkit-transition: opacity 200ms linear;
   transition: opacity 200ms linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="pic">
    <svg class="blur" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%">
        <image filter="url(#filter2)" xlink:href="http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg" width="100%" height="100%"></image>
        <filter id="filter2">
            <feGaussianBlur stdDeviation="5" />
        </filter>
        <mask id="mask1">
            <circle cx="-50%" cy="-50%" r="30" fill="white" filter="url(#filter2)" />
        </mask>
        <image xlink:href="http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg" width="100%" height="100%" mask="url(#mask1)"></image>
    </svg>
</div>

在我给你的脚本之前，你的 HTML 应该和 jQuery 一样。您必须尊重脚本的层次结构。

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>QuoteWall</title>
        <link rel="stylesheet" type="text/css" href="style.css"> //The css I gave you
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> //jQuery here
        <script type="text/javascript" src="javascript.js"></script> //The script I gave you
    </head>
<body>
  <div class="pic">
    <svg class="blur" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%">
      <image filter="url(#filter2)" xlink:href="http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg" width="100%" height="100%"></image>
      <filter id="filter2">
        <feGaussianBlur stdDeviation="5" />
      </filter>
      <mask id="mask1">
        <circle cx="-50%" cy="-50%" r="30" fill="white" filter="url(#filter2)" />
      </mask>
      <image xlink:href="http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg" width="100%" height="100%" mask="url(#mask1)"></image>
    </svg>
  </div>
</body>
</html>

【讨论】：

嗨@smdsgn！这看起来很有趣，我已经尝试过了，它仍然只是一个模糊的图像：/它在stackoverflow的预览中完美地工作！也许这是我将 javascript/Jquery 和 CSS 放入 HMTL 文件的方式？感谢您的回复，这真的很有帮助:))
你可能错过了什么。小心在我给你的脚本之前添加 jQuery。如果您使用新代码创建小提琴，我可以告诉您出了什么问题。
这是一个代码：jsfiddle.net/uhs3d0ex/1 再次感谢 smdsgn
感谢您的提琴！只是想改变图像等！谢谢你的帮助：）
只需更改两个图像元素的 xlink:href。如果此代码对您有帮助，请不要忘记接受答案。

【解决方案2】：

我建议您将 id 提供给正在呈现图像的 div，因此考虑到您的图像 div 的 id 是 divImage ，例如： HTML：

<div id="divImage">
//Your Image inside this div
</div>

所以在你的 JS 中你可以写：

$("#divImage").hover(function(){
//Your Complete on hover function here.
})

我想这应该可行。

【讨论】：

【解决方案3】：

我会用这个How to blur some portion of Image。

有一些模糊蒙版（完全充满模糊）
处理OnMouseMove事件

在鼠标移动过程中，只需清除鼠标实际位置周围蒙版区域的模糊。
在一些周期性事件上，例如OnTimer

模糊蒙版，因此任何已清除的空间都会随着时间的推移而减少。然后在您的图像上应用蒙版模糊（来自链接的 Q/A）并将其绘制到您的查看区域。

【讨论】：