在HTML中振荡图像过滤器的值

问题描述

我试图将饱和过滤器的值从1更改为5，然后再更改回1。我猜测getElementById中变量的实现是完全错误的。有什么问题吗？

var up = true;
var value = 1;
var increment = 1;
var ceiling = 5;

function PerformCalc() {
  if (up == true && value <= ceiling) {
    value += increment

    if (value == ceiling) {
      up = false;
    }
  } else {
    up = false
    value -= increment;

    if (value == 1) {
      up = true;
    }
  }

  function changesaturation(value) {
    document.getElementById("s1").style.webkitFilter = "saturate(" value")";
  }

}

setInterval(PerformCalc,100);

<img src="image.jpg" id="s1" width="100%" height="1200px">

解决方法

似乎不需要嵌套函数“ changesaturation”。
另外，可以使用Addition (+)运算符来实现JavaScript中的字符串连接。
除此之外，您的代码似乎可以正常工作。

...
  %>%
   rename_at(vars(matches('^C\\d+')),~ str_c('C',seq_along(.)))

var up = true;
var value = 1;
var increment = 1;
var ceiling = 5;

function PerformCalc() {

  if (up == true && value <= ceiling) {
    value += increment

    if (value == ceiling) {
      up = false;
    }
  } else {
    up = false
    value -= increment;

    if (value == 1) {
      up = true;
    }
  }

  document.getElementById("s1").style.webkitFilter = "saturate(" + value + ")";

}

setInterval(PerformCalc,100);

#s1 {
  width:250px;
}

与Temani Afif mentioned一样，也可以使用CSS animation来达到效果。
这是一个示例：

<img src="https://i.picsum.photos/id/1069/536/354.jpg?hmac=ywdE7hQ_NM4wnxJshRkXBsy-MHlGRylyqlb51WToAQA" id="s1">

@-webkit-keyframes pulseSaturate {
  0% {
    -webkit-filter: saturate(1);
  }
  50% {
    -webkit-filter: saturate(5);
  }
  100% {
    -webkit-filter: saturate(1);
  }
}

@keyframes pulseSaturate {
  0% {
    filter: saturate(1);
  }
  50% {
    filter: saturate(5);
  }
  100% {
    filter: saturate(1);
  }
}

#s1 {
  width: 250px;
  -webkit-animation: pulseSaturate 800ms steps(4,end) infinite;
  animation: pulseSaturate 800ms steps(4,end) infinite;
}

根据shouldiprefix，在撰写本文时，建议使用“ -webkit” vendor prefix。