Javascript 是否可以在HTML5或css中循环更改不透明度值？_Javascript_Css_Html

Javascript 是否可以在HTML5或css中循环更改不透明度值？

javascript css html

Javascript 是否可以在HTML5或css中循环更改不透明度值？,javascript,css,html,Javascript,Css,Html,这是我目前正在使用的代码。这符合我将两个图像分层的目的。我想做的是，当layer1不透明度在几秒钟内增加到100时，将layer0不透明度降低到0。{然后转到layer1，再转到layer2，依此类推，最后循环回到layer0} 任何帮助都将不胜感激 <head> <style> div.layer0 { width: 371px; height: 345px; background:url(image2.jpg);

这是我目前正在使用的代码。这符合我将两个图像分层的目的。我想做的是，当layer1不透明度在几秒钟内增加到100时，将layer0不透明度降低到0。{然后转到layer1，再转到layer2，依此类推，最后循环回到layer0}

任何帮助都将不胜感激

<head>
  <style>
    div.layer0
    {
      width: 371px;
      height: 345px;
      background:url(image2.jpg);
      opacity:1;
      filter:alpha(opacity=100); /* For IE8 and earlier */
    }

    div.layer1
    {
      width: 371px;
      height: 345px;
      background:url(image3.jpg);
      opacity:0;
      filter:alpha(opacity=0); /* For IE8 and earlier */
    }

  </style>
</head>

<body>
  <div class="layer0">
    <div class="layer1">
    </div>
  </div>
</body>


第0层
{
宽度：371px；
高度：345px；
背景：url（image2.jpg）；
不透明度：1；
过滤器：alpha（不透明度=100）；/*适用于IE8及更早版本*/
}
第1层
{
宽度：371px；
高度：345px；
背景：url（image3.jpg）；
不透明度：0；
过滤器：alpha（不透明度=0）；/*适用于IE8及更早版本*/
}

您可以使用CSS转换。下面的示例逐渐消失。layer0在500毫秒的时间跨度内进进出出：

div.layer0 {
    opacity: 1;
    -webkit-transition:opacity 500ms ease-out;
    -moz-transition:opacity 500ms ease-out;
    -o-transition:opacity 500ms ease-out;
    transition:opacity 500ms ease-out;
}

div.layer0:hover {
    opacity: 0;
}

要在循环中持续执行此操作，需要使用一些javascript将适当的

active

类添加到要显示的图像中。然后使用CSS转换，您可以实现所需的图像之间的淡入淡出效果

我创建了一个JSFIDLE来为您提供一个这样的工作示例：

基本情况如下

您将淡出的一些简单HTML div：

<div class='red square active'></div>
<div class='yellow square'></div>
<div class='green square'></div>
<div class='blue square'></div>

请注意，我的转换将改变div本身的不透明度。您可能需要根据需要对此进行更改

现在使用javascript使其在无休止的循环中工作：

jQuery(function() {
    window.setInterval(function () {
        activeSquare = $('.active');
        nextSquare = activeSquare.next()
        if (nextSquare.length == 0) {
          nextSquare = activeSquare.siblings().first();
        }
        nextSquare.addClass('active');
        activeSquare.removeClass('active');
    }, 3000);
});

相当直接。如果您想查看工作演示，请单击并点击运行按钮。

简短回答：不容易

对于循环，您最好使用javascript。你可以制作一个延迟的关键帧动画，但这不允许你从一开始就循环：jsfiddle.net/G4PTM（firefox/ie10）——你可以用不同的时间制作很多关键帧，你可以让它工作，但是它需要大量的代码，而且不能很好地伸缩（假设您想添加另一层/图像，代码将很快变得无法管理）

使用一些javascript，您可以循环通过div并添加和删除一个类名来触发转换，就像Jon提到的那样

html js+jquery 工作演示

纯JavaScript（不带jQuery）：

动画或过渡？因为动画也可以很好地工作。

div.layer0:hover

中的过渡属性是不必要的。这是如何在div中循环的？过渡真的。基本上我想做的是从原始照片开始，从一个变化淡入另一个变化，然后淡入到开始的图像然后重复。抱歉，我误解了你的问题。我不认为只使用CSS循环div是可能的。你必须使用jQuery…这更接近我需要解决的问题，谢谢！我正在尝试淡出到下一个淡入的图像。我不确定这是否有意义。@eyefundart你可以st跳过其中一个

setTimeout

s，使淡入开始时间与前一个淡出开始时间相同：jsfiddle.net/G4PTM/3非常完美，谢谢：）香草js将是rockstar，但我相信我会以任何方式解决它：D@Eyefoundart为您添加了非jquery版本；）

jQuery(function() {
    window.setInterval(function () {
        activeSquare = $('.active');
        nextSquare = activeSquare.next()
        if (nextSquare.length == 0) {
          nextSquare = activeSquare.siblings().first();
        }
        nextSquare.addClass('active');
        activeSquare.removeClass('active');
    }, 3000);
});

<div class="layer0">
</div>
<div class="layer1">
</div>
<div class="layer2">
</div>

div {
    width: 371px;
    height: 345px;
    opacity: 0;
    position: absolute;
    transition: opacity 2s;
}
div.active {
    opacity: 1;
}
div.layer0 {
    background:url(http://lorempixel.com/373/345);
}
div.layer1 {
    background:url(http://lorempixel.com/372/345);
}
div.layer2 {
    background:url(http://lorempixel.com/374/345);
}

var firstDiv = $(".layer0");
var current;

function loopsie() {
    // if first iteration or reached end, use first div
    if (!current || !current.length) current = firstDiv;
    current.addClass("active");

    setTimeout(function() {
        current.removeClass("active");

        setTimeout(function() {
            current = current.next();
            loopsie(); // recurse
        }, 2000);

    }, 2000);
}

//initialize
loopsie();

var firstDiv = document.querySelector(".layer0"); // IE 8+
var current;

function loopsie() {
    // if first iteration, use first div
    if (!current) current = firstDiv;
    current.classList.add("active"); // IE 10+, shim at https://developer.mozilla.org/en-US/docs/Web/API/Element.classList

    setTimeout(function() {
        current.classList.remove("active");
        // account for text node (if there is whitespace in html)
        if (current.nextSibling && current.nextSibling.nodeName == "DIV") {
            current = current.nextSibling;
        } else if (current.nextSibling && current.nextSibling.nextSibling && current.nextSibling.nextSibling.nodeName == "DIV") {
            current = current.nextSibling.nextSibling;
        } else {
            // reached end
            current = firstDiv;
        }
        loopsie(); // recurse
    }, 2000);

}

//initialize
loopsie();