Отмените фильтр размытия с помощью Javascript - PullRequest
Новая
       102

Отмените фильтр размытия с помощью Javascript

0 голосов
/ 28 мая 2020

Короче говоря, у меня есть кнопка, которая размывает изображение на моем веб-сайте. Он запускает эту функцию:

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>

Ответы [ 2 ]

1 голос
/ 28 мая 2020

У вас опечатка. Его 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">
0 голосов
/ 28 мая 2020

Если я правильно понял, вы хотите добавить дополнительную кнопку, которая возвращает изображение go в нормальное состояние после размытия. Вы можете сделать это, изменив вторую функцию на imga.style.filter = 'none';

EX: 

<!DOCTYPE html>
<html>
<body>

<button onclick="myFunction()">Try it</button><br><br>
<button onclick="myFunctionTwo()">Reverse it</button><br><br>

<img id="myImg" src="img.jpg">
<script>
function myFunction() {
  document.getElementById("myImg").style.filter = "blur(80px)";
}
function myFunctionTwo() {
  document.getElementById("myImg").style.filter = "none";
}
</script>

</body>
</html>
...