使用filter写一个鼠标移开图片时的模糊效果

你可以使用JavaScript（特别是其filter函数）和CSS来实现鼠标移开图片时的模糊效果。但首先，需要明确一点：filter在JavaScript中通常用于数组操作，而在CSS中，filter属性用于对元素应用图形效果，如模糊。

以下是一个简单的示例，展示如何使用JavaScript和CSS实现鼠标移开图片时的模糊效果：

  1. HTML：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Blur Effect</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <img id="myImage" src="your-image-path.jpg" alt="Your Image">
    <script src="script.js"></script>
</body>
</html>
  1. CSS (styles.css)：
#myImage {
    width: 300px; /* 或你想要的任何尺寸 */
    transition: all 0.5s ease; /* 平滑过渡效果 */
}

#myImage.blur {
    filter: blur(5px); /* 模糊效果 */
}
  1. JavaScript (script.js)：
document.addEventListener('DOMContentLoaded', function() {
    var image = document.getElementById('myImage');

    image.addEventListener('mouseout', function() {
        image.classList.add('blur'); // 鼠标移开时添加模糊类
    });

    image.addEventListener('mouseover', function() {
        image.classList.remove('blur'); // 鼠标移回时移除模糊类
    });
});

在这个示例中，当鼠标移开图片时，会添加一个名为blur的CSS类，该类应用了模糊效果。当鼠标移回图片时，该类会被移除，从而取消模糊效果。CSS中的transition属性用于创建平滑的过渡效果。

posted @ 2024-12-26 09:50  王铁柱6  阅读(21)  评论(0)    收藏  举报