如何添加淡入淡出效果

Question

如何添加淡入淡出效果

4

我有一个简单的脚本，它作为一个简单的HTML库工作。然而，我需要给我的画廊添加一些过渡效果，比如淡入淡出，或类似于每部电影结尾的字幕的效果（你知道我指的是什么）。

我该怎么解决这个问题？我想只使用JS，HTML，CSS来实现，不需要外部插件。是否可能？目前，我只有以下的代码：

<head>
<title>Test</title>
    <script>
var images = [      "https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png",
            "https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg",
            "https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png",
            "https://upload.wikimedia.org/wikipedia/commons/e/ee/Example-zh.jpg",
            "https://upload.wikimedia.org/wikipedia/commons/e/e2/P%C5%99%C3%ADklad.jpg",
                "https://upload.wikimedia.org/wikipedia/commons/d/d6/Beispiel.png"
         ];

var links = [       "http://www.example1.com",
            "http://www.example2.com",
            "http://www.example3.com",
            "http://www.example4.com", 
                "http://www.example5.com", 
            "http://www.example6.com",
         ];
var i = 0;
var renew = setInterval(function(){
        if(i==images.length) i=0;
        document.getElementById("img1").src = images[i]; 
    document.getElementById("link1").href = links[i]; 

        if(i+1==images.length) i=-1;
        document.getElementById("img2").src = images[i+1];
    document.getElementById("link2").href = links[i+1];

        if(i+2==images.length) i=-2;
        document.getElementById("img3").src = images[i+2];
    document.getElementById("link3").href = links[i+2];

        i+=3;


},5000);
</script>

</head>

<body>

<div align="center">
<a href="http://www.example1.com" id="link1"><img src="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png" id='img1' > </a> </br></br>
<a href="http://www.example2.com" id="link2"><img src="https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg" id='img2' > </a> </br></br>
<a href="http://www.example3.com" id="link3"><img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png" id='img3' > </a> </br>
</div> 

</body>

- yak

请查看此链接：http://css3.bradshawenterprises.com/cfimg/。 - z1m.in

3个回答

0

你可以用CSS实现一些效果，但不是所有的效果都能实现（比如jQuery-ui的blind）

大多数效果包括以下更改：
- opacity: [0-1]
- display: relative; left: [X]px; top: [Y]px 或 transform: translate([X]px,[Y]px)
- overflow: hidden
- 以及动画：

要么使用CSS：

#img {
  animation: fade-in 2s infinite;
} 

@keyframe fade-in { 
  from {
    left: -200px
  }
  to {
    left: 0 
  }
}`

或 JavaScript：

var img = document.getElementById('img');
for(i = 1; i <= 100; i++){
  (function(step) {
    setTimeout(function() {
      img.style.transform = "translate(-"+(200-step*2)+"px, 0)";
    }, step * 20);
  })(i);
}

要实现类似于百叶窗的效果，您必须将图像容器<div>向左移动，同时以相同的速度向右移动图像。
- 这是一个简化的百叶窗效果示例 https://jsfiddle.net/warkentien2/Lh10phuv/5/

在这里，我已经实现了8个纯JavaScript效果（包括百叶窗，带有说明）
- 淡入 http://codepen.io/warkentien2/pen/pboVXR
- 淡出 http://codepen.io/warkentien2/pen/EyxpVq

- warkentien2

0

你可以试试这个。我没有改动你的代码。

HTML

<div align="center"> 
 <a href="http://www.example1.com" id="link1">
  <img src="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png" id='img1' > 
 </a> 
</br>
</br>
<a href="http://www.example2.com" id="link2">
   <img src="https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg" id='img2' > 
</a>
<br>
<br>
  <a href="http://www.example3.com" id="link3">
 <img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png" id='img3'>

 </a>
  <br>
  </div>

CSS

  <style>
     .animate{transition:all 1s ease; opacity:0;}
  </style>

Js

  <script>
      var images = [          "https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png",
        "https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg",
        "https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png",
        "https://upload.wikimedia.org/wikipedia/commons/e/ee/Example-zh.jpg",
        "https://upload.wikimedia.org/wikipedia/commons/e/e2/P%C5%99%C3%ADklad.jpg",
            "https://upload.wikimedia.org/wikipedia/commons/d/d6/Beispiel.png"
     ];

  var links = [       "http://www.example1.com",
              "http://www.example2.com",
             "http://www.example3.com",
              "http://www.example4.com", 
               "http://www.example5.com", 
               "http://www.example6.com",
             ];
     var i = 0;
    var renew = setInterval(function(){
      if(i==images.length) i=0;
    document.getElementById("img1").src = images[i]; 
        document.getElementById("link1").href = links[i];
            document.getElementById('link1').style.opacity = 0; 
            setTimeout(function(){
                document.getElementById('link1').setAttribute("class", "animate");
                document.getElementsByClassName('animate')[0].style.opacity = 1;
                setTimeout(function(){document.getElementById('link1').removeAttribute("class", "animate")},500)
            },500)


    if(i+1==images.length) i=-1;
    document.getElementById("img2").src = images[i+1];
        document.getElementById("link2").href = links[i+1];
            document.getElementById('link2').style.opacity = 0; 
            setTimeout(function(){
                document.getElementById('link2').setAttribute("class", "animate");
                document.getElementsByClassName('animate')[1].style.opacity = 1;
                setTimeout(function(){document.getElementById('link2').removeAttribute("class", "animate")},500)
            },500)

    if(i+2==images.length) i=-2;
    document.getElementById("img3").src = images[i+2];
        document.getElementById("link3").href = links[i+2];
            document.getElementById('link3').style.opacity = 0;
            setTimeout(function(){
                document.getElementById('link3').setAttribute("class", "animate");
                document.getElementsByClassName('animate')[2].style.opacity = 1;
                setTimeout(function(){document.getElementById('link3').removeAttribute("class", "animate")},500)
            },500)

    i+=3;



     },5000);
 </script>

在此查看实时示例 - https://jsfiddle.net/Rit_Design/9mkvffnk/1/

请记住，代码可以更加智能。

- RIT Design

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- shv22 · Accepted Answer

我刚刚创建了一个JQuery函数并将其添加到您的脚本中。现在，当您单击该按钮时，它会按照其所说的那样执行。这只是一个如何实现此功能的示例。

<html>
<head>
<title>Test</title>
    <script>

var images = [      "https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png",
            "https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg",
            "https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png",
            "https://upload.wikimedia.org/wikipedia/commons/e/ee/Example-zh.jpg",
            "https://upload.wikimedia.org/wikipedia/commons/e/e2/P%C5%99%C3%ADklad.jpg",
                "https://upload.wikimedia.org/wikipedia/commons/d/d6/Beispiel.png"
         ];

var links = [       "http://www.example1.com",
            "http://www.example2.com",
            "http://www.example3.com",
            "http://www.example4.com", 
                "http://www.example5.com", 
            "http://www.example6.com",
         ];
var i = 0;
var renew = setInterval(function(){
        if(i==images.length) i=0;
        document.getElementById("img1").src = images[i]; 
    document.getElementById("link1").href = links[i]; 

        if(i+1==images.length) i=-1;
        document.getElementById("img2").src = images[i+1];
    document.getElementById("link2").href = links[i+1];

        if(i+2==images.length) i=-2;
        document.getElementById("img3").src = images[i+2];
    document.getElementById("link3").href = links[i+2];

        i+=3;


},5000);
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type='text/javascript'>

$(document).ready(function(){
    $(".btn1").click(function(){
        $("#link1").fadeOut()
    });
    $(".btn2").click(function(){
        $("#link1").fadeIn();
    });
});
</script>
</head>
<body>

</script>
</head>

<body>

<div align="center">
<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>
<a href="http://www.example1.com" id="link1"><img src="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png" id='img1' > </a> </br></br>
<a href="http://www.example2.com" id="link2"><img src="https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg" id='img2' > </a> </br></br>
<a href="http://www.example3.com" id="link3"><img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png" id='img3' > </a> </br>
</div> 

</body>


</html>