我一直试图让图像看起来模糊,但是当鼠标悬停在上面时,它会清除光标指向的那一点点。非常相似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');
});
如有任何帮助,我们将不胜感激。 谢谢, 乔
最佳答案
这是一个实验性解决方案。每次鼠标悬停时,您都会在 svg 蒙版中动态注入(inject)一个新的圆形元素,然后延迟隐藏每个圆形。
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>
关于javascript - 对鼠标悬停的图像部分进行取消模糊处理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35099681/