如何添加渐变、渐变效果

I have a simple script which works as a simple html gallery. However, I need to add some transition effects to my gallery, something like fade in, fade out, or the effect of something similar to the subtitles at the end of every movie (you know what I mean).

我有一个简单的脚本，作为一个简单的html图库。但是，我需要在我的图库中添加一些过渡效果，比如淡入、淡出，或者类似于每部电影结尾字幕的效果(你知道我的意思)。

How can I solve this? I would like to make it using only JS, HTML, CSS, without external plugins. Is it possible? For now on, I have only something like this below:

我怎么解决这个问题?我想让它只使用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>

4 个解决方案

#1

I just created a JQuery function and added it to your script. Now when you click on that button it will do as it says. It is just as an example how to do that

我刚刚创建了一个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>

#2

Add this style inside the <head> tag -

在标记-中添加此样式

<style>
img {
  position: relative;
  -webkit-animation: animateleft 4.9s;
  animation: animateleft 4.9s;
  animation-iteration-count:infinite;
}

@-webkit-keyframes animateleft {
  from {
    left: -300px;
    opacity: 0
  }
  to {
    left: 300px;
    opacity: 1
  }
}

@keyframes animateleft {
  from {
    left: -300px;
    opacity: 0
  }
  to {
    left: 300px;
    opacity: 1
  }
}
</style>

If you don't want the movement animation but just fade in and out, remove the left tag from all the definitions, go from just opacity:0 to 1 for fade in. For fade out, go from opacity:1 to 0.

如果您不想要移动动画，只想要淡入淡出，请从所有定义中删除左标签，从不透明度:0到1表示淡入。对于淡出，从不透明度:1到0。

Hope this helps.

希望这个有帮助。

#3

You can definitely achieve some effects with CSS. But not all (like jQuery-ui's blind)

你肯定可以用CSS实现一些效果。但不是所有的(就像jQuery-ui的blind)

most effects consist of changing:

大多数影响包括改变:
- opacity: [0-1]
- 不透明度(0 - 1):
- display: relative; left: [X]px; top: [Y]px or transform: translate([X]px,[Y]px)
- 显示:相对;左:[X]px;top: [Y]px or transform: translate(X) px，[Y]px
- overflow: hidden
- 隐藏溢出:
- and an animation:
- 和一个动画:

either CSS:

CSS:

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

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

or JavaScript:

或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);
}

to achieve something like blind, you must move an image-container <div> left, while moving the image right at the same speed.

要实现像blind这样的功能，您必须将image-container

向左移动，同时以相同的速度向右移动图像。
- Here's a simplified blind effect example https://jsfiddle.net/warkentien2/Lh10phuv/5/
- 这里有一个简化的盲效果示例https://jsfiddle.net/warkentien2/Lh10phuv/5/

Here I've implemented 8 pure JavaScript effects (including blind, with instructions)
- fade in http://codepen.io/warkentien2/pen/pboVXR
- fade out http://codepen.io/warkentien2/pen/EyxpVq

在这里，我已经实现了8个纯JavaScript效果(包括盲的)——在http://codepen中消失。io/warkentien2/pen/pboVXR -淡出http://codepen.io/warkentien2/pen/EyxpVq。

#4

You can try this one. I have not changed your code at all.

你可以试试这个。我根本没有修改你的代码。

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>

  <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>

Check live example here - https://jsfiddle.net/Rit_Design/9mkvffnk/1/

在这里检查live示例——https://jsfiddle.net/Rit_Design/9mkvffnk/1/

Remember the code can be much more smarter.

记住，代码可以更智能。

#1