如何使用for循环更改图像的不透明度以创建渐变照明效果

How do I change the opacity of an image using a for loop to create a gradual lighting up effect?

本文关键字：创建 渐变 照明 不透明度 for 何使用 循环 图像      更新时间：2024-01-12

我已经创建了一个Css类，它定义了我的图像的不透明度，但我需要在JavaScript中访问它，并在for循环中更改它，然后将新的不透明度传递回一个变量，并重复这个过程，直到我得到我想要的100%的不透明度。

我需要这是由onmouseover事件处理程序触发的。有人能给我看一些代码，让我知道它是怎么做的吗？

外部样式表中的css：

.test{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

// assuming jQuery
$('.test').bind({
 mouseover: function() {
  $(this).animate({opacity:1},500,function(){
    // something to do when done
  });
 }
});

使用直接的javascript，您将想要获得元素：

var element = this;// for example or var element = document.getElementById('some-id');
var opacity = element.style.opacity;
function updateOpacity() {
  opacity = opacity+=0.2;
  if(opacity >= 1) {
    // done
    opacity = 1;
  } else {
    element.style.opacity = opacity; // this updates the opacity
    setTimeout(function(){updateOpacity();}, 50); // 50 is the delay, 50milliseconds
  }
}

评论中的快速注释：

setTimeout（）调用可以通过以下方式使用：

  1. 如果没有要通过的参数，请使用此

    setTimeout（updateOpacity，50）；

  2. 如果你正在使用遗留代码，你可能会发现这一点，它很有效，但请参阅下面的

    setTimeout（"updateOpcity（）；"，50）；

  3. 如果需要将参数传递给回调函数，请优先使用this而不是2。

    setTimeout（function（）{updateOpcity（）；}，50）；

使用jQuery可以使用

$('.test').fadeTo( 500, 1.0 ); //fade to 100% opaque in 500 ms

参考编号：http://api.jquery.com/fadeTo/

用于鼠标悬停：

$('.test').mouseover(function(){
  $(this).fadeTo( 500, 1.0 );
});
相关文章：