0

現在、Google 広告にスライダーと 2 つの画像があります

input class="gwd-input-13xh" type="range" min="0" max="50" value="25" id="slider" oninput="getInput(this.value, this.max)">

.img_1 {
  position: absolute;
  width: 180px;
  height: 130px;
  left: 62px;
  top: 1px;
  -webkit-filter: blur(5px);
  opacity: .8;
 }

.img_2 {
  position: absolute;
  width: 180px;
  height: 130px;
  left: 62px;
  top: 1px;
  -webkit-filter: blur(5px);
  opacity: .8;
 }

このスライダーは、スライダー値 (25 より大きい) の右に移動すると、ぼかしが除去され、不透明度が 1 に設定されます。スライダー値 (25 より小さい) の左に移動すると、その逆が発生します。これが私がこれをしなければならない現在のコードです：

function getInput(value, max) {
  var img_1 = document.getElementById("img_1");
  var img_2 = document.getElementById("img_2");
  var sliderPercentage = (value / max).toFixed(2);
  img_1.style.opacity = 1 - sliderPercentage
  setBlur(img_1, (10 * sliderPercentage).toFixed(2));
  img_2.style.opacity = sliderPercentage;
  setBlur(img_2, 10 - (10 * sliderPercentage).toFixed(2));
 }

function setBlur(ele, value) {
  if (ele.style.hasOwnProperty('filter')) {
    ele.setAttribute("style", "-webkit-filter:blur(" + value + "px)")
  }
}

このコードは問題なく動作します。しかし、どんな理由があろうとも、それopacityは変わりません。IDKopacity内で作業するときにが固定されているためGWDです。コードの計算が機能することがわかる場合console.log(img_1.style.opacity = 1 - sliderPercentage)は、不透明度を調整していないだけです。

任意の提案やアイデアをいただければ幸いです。setBlur関数を実行しないと、関数が機能することにも注意してくださいsetOpacity。実行しているときは機能しませんsetBlur。

4

2 に答える 2

1

私はGWDに慣れていませんが、試してみました（いくつかの小さな変更を加えて）：

 $("#slider").change(function(){
    var img_1 = document.getElementById("img_1");
  var img_2 = document.getElementById("img_2");
  var sliderPercentage = ($(this).val() / $(this).attr('max')).toFixed(2);
  img_1.style.opacity = 1 - sliderPercentage

setBlur(img_1, (10 * sliderPercentage).toFixed(2));
  img_2.style.opacity = sliderPercentage;
  setBlur(img_2, 10 - (10 * sliderPercentage).toFixed(2));

});

function setBlur(ele, value) {
  if (ele.style.hasOwnProperty('filter')) {
    ele.setAttribute("style", "-webkit-filter:blur(" + value + "px)")
  }
}

期待どおりに動作すると思います。

次の場所で完全なソリューションを確認してください。

https://jsfiddle.net/1eumfwoh/

于 2016-06-23T16:42:34.367 に答える