堆栈内存溢出
  繁体   English   中英

如何添加淡入淡出效果

[英]How can I add fade in, fade out effects

 原文  2016-05-09 09:20:45  7   3    javascript/ html/ css/ image/ image-gallery

问题描述

我有一个简单的脚本，它可以作为一个简单的 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>

3 个解决方案

解决方案1
 4  2016-05-09 10:02:09

我刚刚创建了一个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
 0  2016-05-30 06:21:47

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

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

希望这可以帮助。

解决方案3
 0  2016-05-30 07:29:41

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

  1. 大多数影响包括改变：

    • opacity: [0-1]
    • display: relative; left: [X]px; top: [Y]px 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);
}

  1. 为了实现像盲目的东西，你必须向左移动图像容器<div>，同时以相同的速度向右移动图像。

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

解决方案4
 0  2016-06-02 10:53:47

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

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/

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何添加动画效果淡入/淡出文本？ 如何添加淡入和淡出 如何将淡入淡出添加到内部 HTML？ 我如何在淡入/淡出数组中添加延迟 如何为Bootstrap的Affix添加“淡出”效果？ 如何淡入和淡出多个元素？ 如何制作具有淡入淡出效果的幻灯片？ 如何在图像点击时使克隆淡入淡出？ 如何使用 JavaScript 实现淡出效果？ 如何在mouseleave上淡出此淡入淡出？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM