javascript - 取消模糊鼠标悬停在图像上的部分-6ren

javascript - 取消模糊鼠标悬停在图像上的部分

转载作者：太空宇宙更新时间：2023-11-04 15:00:26

25

4

我一直在尝试使图像看起来模糊，但是当鼠标悬停在上方时，它会清除光标指向的那一点点。很像 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/

25

4

0

文章推荐： c++ - 防止对象立即被销毁

文章推荐： java - InventoryItem.java 使用未经检查或不安全的操作

文章推荐： java - 跨多个文件创建对象 (Java)

文章推荐： c++ - 当我们在现实生活中需要将二进制转换为十六进制时

linux - (取消/取消)在 bash 中压缩一个字符串？
是否可以使用标准输入/标准输出在 bash 中压缩/解压缩字符串？我试过了，但显然不支持它？ hey=$(echo "hello world" | gzip -cf) echo $hey # ret
javascript - 取消/取消 IE7 输入搜索上的 JavaScript 操作
我的任务是让一个企业网站适用于 IE7，它必须“足够好”，因此我禁用了任何导致问题的花哨/非必要功能。其中之一是正在使用的搜索栏，需要进行哪些搜索，我猜测幕后某个地方有某种 JavaScript 用
取消 getchar()
我有一个执行大量处理的小程序。您可以通过按回车键打印进度。我实现它的方法是在主线程中完成处理，同时我有一个 pthread 不断循环 getchar() 以等待输入键。问题是当我完成处理时。发生这
android - CoroutineScope 取消
我完全理解 suspendCoroutine 与 suspendCancellableCoroutine 在我的示例中的工作方式。但我想知道为什么 println("I finished") (第 1
qt - QFileDialog 取消
我是 QT 的新手。目前在我的项目中我实现了 QFileDialog . 在我的用例中:每当用户选择一个文本文件时，它都会执行 functionA .但是，我发现如果在文件对话框中单击取消，funct
excel - 取消 GetSaveAsFilename
我有代码，仅在用户选择“另存为”时运行。为此并获取我正在使用的文件的新名称 Application.GetSaveAsFilename功能。我遇到的问题是类型不匹配，同时检查用户是否在他没有这样做时
iphone - 取消 UILocalNotification
我的 UILocalNotification 有问题。我正在用我的方法安排通知。 - (void) sendNewNoteLocalReminder:(NSDate *)date alrt:(NS
javascript - 取消 XMLHttpRequest？
祝你有美好的一天我有一个网站，其中有很多“工具提示”。这些工具提示是在将鼠标悬停在文本的特定部分上时创建的。工具提示是一个 div block ，它显示在网站上所有其他内容的顶部，并且当光标从文本移
Java TimerTask 取消
我遇到以下问题。每隔 2 秒，程序就会进入 if 语句。在这个 if 语句中，我想要一个计时器，它会在 15 秒后给我一条消息。计时器应延迟 1 秒运行。但是当我用计时器“等待”时，if 语句将再执行
java - FutureTask 取消()
基本上我有以下代码片段， (let [task (FutureTask. fn) thr (Thread. task)] (.start thr) ;;wait for signa
iphone - 取消 ASIHTTPRequest
取消正在进行的 ASIHttpRequest 请求的正确位置在哪里？这就是我取消的方式，但是当我时它继续崩溃在不让请求完成的情况下从一个 View Controller 转移到另一个 View Co
c# - BackgroundWorker 取消
我在我的 winforms 应用程序中使用 BackgroundWorker 来执行另一个类中发生的长时间运行的任务(执行数据库操作)。由于所有工作都是在另一个类中完成的，因此取消并不那么简单。我在另
android - 取消/关闭图标上的通知
我正在使用 OneSignal 向我的用户显示通知。通知工作正常，但我注意到，如果我在通知栏中“滑动”取消通知，则通知将永远保留，这是一张显示应用程序图标上的通知的图像，我想在应用程序已打开: 我看到
android - 取消 AsyncTask
正在运行的 AsyncTask 的 .cancel(boolean) 方法如何工作？这是文档: Attempts to cancel execution of this task. This atte
ios - (取消)激活约束如何在内部工作？
我注意到，当我激活约束时，我会立即在该行代码处收到一条警告，指出不能同时满足约束。我假设布局是在“UI 更新周期”之类的稍后时间点计算的，而不是每次约束都被(取消)激活。因此，在(取消)激活约束的代
ios - 取消 NSThread
这是我创建线程的方式: readFromWebThread = [[NSThread alloc] initWithTarget:self selector:@selector(loadThread:
ios - 取消 UILocalNotification
我目前正在尝试取消与我的数据模型中的对象关联的特定 UILocalNotifications。为此，每个数据对象都有一个唯一标识符，即 NSUUID。创建 UILocalNotification:
javascript确认(取消)返回false时仍然提交表单
当我提交并单击“确定”时，它会继续，但当我按“取消”时，它仍然会提交。我尝试使用此代码，但提交和取消按钮仍然执行相同的操作。 model.saveForm = function() { var
javascript - 取消 setTimeout()
我有一个警报弹出窗口，当发生特定操作时会出现该弹出窗口。 5 秒后，使用 setTimeout() 隐藏警报弹出窗口。我遇到的问题是，如果我多次触发弹出窗口，有时后续的弹出窗口会出现但立即消失。我相
javascript - 取消/停止超时功能
我有一些 javascipt (jQuery)，其中单击按钮时会淡入 #myDiv，然后使用超时函数在 5 秒后再次淡出。它工作正常，但如果用户在超时内的 fadeOut 函数运行之前再次单击该按钮，

首页

博学

6Ren·AI

商城

javascript - 取消模糊鼠标悬停在图像上的部分