Цель: изменять значение filter:blur() изображения на сайте путем изменения положения ползунка
Хотел бы создать изображение и ползунок рядом с ним который будет отвечать за размытие изображения.
С первой частью задания справился на отлично, однако какой код надо написать в функции blurPic() я не знаю.
<img src="img_avatar.png" id="blurimg" alt="avatar"">
Blur:<input type="range" min="0" max="10" name="blurrange-box" value="5" id="blur" oninput="blurPic()">
Ответы (1 шт):
Автор решения: VOLK
→ Ссылка
<img src="img_avatar.png" id="blurimg" alt="avatar">
Blur:<input type="range" min="0" max="10" name="blurrange-box" value="5"
id="blur" oninput="blurPic(this.value);">
<script type="text/javascript">
function blurPic(value) {
let img = document.getElementById('blurimg');
img.style.filter = 'blur('+ value + 'px)';
}
//ИЛИ
function blurPic() {
let value = document.getElementById('blur').value;
let img = document.getElementById('blurimg');
img.style.filter = 'blur('+ value + 'px)';
}
</script>