时间戳

首页 > 解决方案 > 坏：如何将动画添加到我的照片中

javascript - 坏：如何将动画添加到我的照片中

问题描述

好的，所以我目前正在创建页面，但我遇到了问题。当我将鼠标悬停在按钮上时，我想在出现的图像上制作动画（淡入）。主要是我不知道如何将 CSS 代码添加到出现的照片中。下面我向您展示我的代码。我不知道该怎么做。谢谢你的帮助

HTML：

<div class="sekcja2">
    
    
        <div id="PojemnikNaZdjecie" class="FadeIn">
            <img id="myImage" src="naw0.jpg" />
        </div>
        
        
        <div id="PojemnikNaPrzyciski">
            <button class="PrzyciskiObrazka" onmouseover="document.getElementById('myImage').src='naw1a.jpg'">1</button>
            <button class="PrzyciskiObrazka" onmouseover="document.getElementById('myImage').src='naw1b.jpg'">2</button>
            <button class="PrzyciskiObrazka" onmouseover="document.getElementById('myImage').src='naw2a.jpg'">3</button>
            <button class="PrzyciskiObrazka" onmouseover="document.getElementById('myImage').src='naw2b.jpg'">4</button>
            <button class="PrzyciskiObrazka" onmouseover="document.getElementById('myImage').src='naw3a.jpg'">5</button>
            <button class="PrzyciskiObrazka" onmouseover="document.getElementById('myImage').src='naw3b.jpg'">6</button>
        </div>
        
            
</div>

CSS：


.FadeIn {
  animation: fadeIn ease 0.5s;
}

@keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }

标签： javascripthtmlcss

解决方案

我这样做的方法是将图像的不透明度设置为 0，当悬停时它会更改为 1。请注意，您必须创建一个 mouseout / mouseleave 事件以再次将不透明度设置为零，或者类似的东西- 如果你想。这是一些代码示例：

<div>
        <img id="1" class="invisible"
            src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/html/html.png">
        <img id="2" class="invisible"
            src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/javascript/javascript.png">
    </div>
    <button onmouseover="htmlshow()">
        HTML
    </button>

    <button onmouseover="javascriptshow()">
        JAVASCRIPT
    </button>

    <script>
        function htmlshow() {
            document.getElementById('1').style.opacity = 1;
        }

        function javascriptshow() {
            document.getElementById('2').style.opacity = 1;
        }
    </script>

请注意，为了使图像淡入，您必须使用transitionCSS 属性。

我也会在 javascript 中执行此代码，使用事件侦听器和可能的类列表切换/添加方法，有很多方法可以解决这个问题。

我希望这有帮助。如果这不是您想要的，请给我留言。

推荐阅读