时间戳

首页 > 解决方案 > 使用 Javascript 反转过滤器“模糊”

javascript - 使用 Javascript 反转过滤器“模糊”

问题描述

简而言之，我有一个按钮，可以模糊我网站上的图像。它触发了这个功能：

function testblur() {imga.style.filter = 'blur(80px)';}

工作得很好。现在我想要第二个按钮来反转模糊效果。我试图通过将过滤器设置回零来实现这一点：

function unblur1() {imga.stlye.filter = 'blur(0px)';}

根本不起作用。重新加载图像并不是一个真正的选项，因为我希望发生过渡效果。有没有办法反转过滤器？或者另一种让模糊动画向后播放的方法？

<Body>
<button onClick="testblur()">blurOn</button>
<button onClick="unblur1()">blurOff</button>
<img id="img1" class="blifterimg" src="blifter/1.jpg" alt="1">
<script>
   var imga = document.getElementById('img1');
   function testblur() {imga.style.filter = 'blur(80px)';}
   function unblur1() {imga.stlye.filter = 'blur(0px)';}
</script>
</Body>

标签： javascriptcss-transitionsblur

解决方案

你有一个错字。它imga.style实际上不是imga.stlye

工作演示：

const imga = document.getElementById('imga')

function testblur() {
  imga.style.filter = 'blur(80px)';
}

function unblur1() {
  imga.style.filter = 'blur(0px)';
}
<button onclick="testblur()">Blur</button><button onclick="unblur1()">Un-Blur</button><br><br>

<img id="imga" src="https://www.w3schools.com/cssref/pineapple.jpg" alt="Pineapple" width="200" height="200">

推荐阅读