Question

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

我该如何解决这个问题？我想只使用JS，HTML，CSS，没有外部插件。可能吗？现在，我只有以下内容：

<CRLF>

Answer 1

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

Answer 2

在<head>代码 -

中添加此样式

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

如果您不想要移动动画但只是淡入淡出，请从所有定义中删除left标记，只需from opacity:0 to 1为淡入。对于淡出，请转from opacity:1 to 0。

希望这有帮助。

Answer 3

你绝对可以通过CSS实现一些效果。但并非所有（如jQuery-ui＆s;盲人）

大多数影响包括改变：
- 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);
}

要实现像盲人一样的东西，你必须移动一个图像容器＆lt; div＆gt;向左移动，同时以相同的速度移动图像。
- 这是一个简化的盲效果示例 https://jsfiddle.net/warkentien2/Lh10phuv/5/

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

Answer 4

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

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/

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

如何添加淡入，淡出效果

4 个答案: