将鼠标悬停在图像上的部分 [英] Unblur part of an image where the mouse hovers over
本文介绍了将鼠标悬停在图像上的部分的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我一直试图让图片模糊不清，但当鼠标悬停在它上面时，它会清除光标所指向的那一点。与 www.canva.com 网站非常相似。
I've been trying to have an image which appears blurred but when the mouse hovers over, it clears that tiny bit where the cursor points. Much alike the www.canva.com website.
这里是我的代码，到目前为止，它不工作100％。我使用HTML，CSS和Javascript。不幸的是，我完全是新的javascript！
Here is my code so far, it's not working 100%. I'm using HTML, CSS and Javascript. Unfortunately, I'm completely new to 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：
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');
});
任何帮助将不胜感激。
感谢，
Joe
Any help would be appreciated. Thanks, Joe
推荐答案
这是一个实验性解决方案。
This is an experimental solution. You dynamically inject a new circle element in your svg mask each mouseover then you hide each circle with a delay.
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>
就像这样用jQuery之前我给你的脚本。您必须尊重脚本的层次结构。
Your HTML should be like this with jQuery before the script I gave you. You have to respect the hierarchy of your scripts.
<!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>
这篇关于将鼠标悬停在图像上的部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
