我需要无限的onclick和transitions'不起作用

I need infinite onclick and transitions doesn't work

本文关键字：transitions 不起作用 onclick 无限      更新时间：2023-09-26

我正在尝试制作一个照片库，但我有两个问题。。。

  1. 在我的javascript"onclick"中，我只能点击1次，我需要能够点击任意次数的

  2. 我的转换不起作用，正如你所看到的，它在没有转换的情况下立即"移动"照片，但我需要这种转换，否则会很难看。

Fiddle：http://jsfiddle.net/0Lg891p0/

<!DOCTYPE html> 
<html lang="cs-CZ"> 
    <head>
        <meta charset="UTF-8"> 
        <meta name="generator" content="Rostislav_Danko">
        <link rel="stylesheet" href="Web.css">
        <title>Rostislav Danko</title>
    </head>
    <body>
        <div id="web">
            <div id="galerie">
                <div id="fotky">
                    <img id="fotka1" src="fotka1.jpg" alt="fotka1" />
                    <img id="fotka2" src="fotka2.jpg" alt="fotka2" />
                    <img id="fotka3" src="fotka3.jpg" alt="fotka3" />
                </div>
                <div id="arrow_left" class="animace1"></div>
                <div id="arrow_right" class="animace2"></div>
                <script>
                    document.querySelector('.animace1').onclick=function() {
                        var d = document.getElementById("fotka1");
                        d.className = d.className + " fly1";
                        var t = document.getElementById("fotka2");
                        t.className = t.className + " fly1";
                        var t = document.getElementById("fotka3");
                        t.className = t.className + " fly1";
                    }
                </script>
                <script>
                    document.querySelector('.animace2').onclick=function() {
                        var d = document.getElementById("fotka1");
                        d.className = d.className + " fly2";
                        var t = document.getElementById("fotka2");
                        t.className = t.className + " fly2";
                        var t = document.getElementById("fotka3");
                        t.className = t.className + " fly2";
                    }
                </script>
            </div>
        </div>
    </body>    
</html>

CSS

#web {
    background-color: #FF0;
    height: 700px;
    width: 1500px;
}
#galerie {
}
#fotky {
}
#fotka1 {
    position: absolute;
    height: 300px;
    width: 300px;
    margin-top: 300px;
    margin-left: 500px;
    border: solid 10px;
    z-index: 1;
    display: block;
    transition: ease-in-out 1s;
}
#fotka1.fly1 {
    position: absolute;
    left: 300px;
    top: 8px;
    transition: ease-in-out 1s;
}
#fotka1.fly2 {
    position: absolute;
    left: -300px;
    top: 8px;
    transition: ease-in-out 1s;
}
#fotka2 {
    position: absolute;
    height: 300px;
    width: 300px;
    margin-top: 300px;
    margin-left: 200px;
    border: solid 10px;
    z-index: 1;
    display: block;
    transition: ease-in-out 1s;
}
#fotka2.fly1 {
    position: absolute;
    left: 300px;
    top: 8px;
    transition: ease-in-out 1s;
}
#fotka2.fly2 {
    position: absolute;
    left: -300px;
    top: 8px;
    transition: ease-in-out 1s;
}
#fotka3 {
    position: absolute;
    height: 300px;
    width: 300px;
    margin-top: 300px;
    margin-left: 800px;
    border: solid 10px;
    z-index: 1;
    display: block;
    transition: ease-in-out 1s;
}
#fotka3.fly1 {
    position: absolute;
    left: 300px;
    top: 8px;
    transition: ease-in-out 1s;
}
#fotka3.fly2 {
    position: absolute;
    left: -300px;
    top: 8px;
    transition: ease-in-out 1s;
}
#arrow_left {
    width: 50px;
    height: 50px;
    background-color: #F00;
    margin-top: 450px;
    margin-left: 470px;
    position: absolute;
    z-index: 10;
}
#arrow_right {
    width: 50px;
    height: 50px;
    background-color: #F00;
    margin-top: 450px;
    margin-left: 800px;
    position: absolute;
    z-index: 10;
}

您的问题之一是不断向元素中添加类，而从不删除旧类，这就是为什么您的单击只起作用一次的原因。在设置新类之前，您需要清除旧类：

<script>
    document.querySelector('.animace1').onclick = function () {
        document.getElementById("fotka1").className = "fly1";
        document.getElementById("fotka2").className = "fly1";
        document.getElementById("fotka3").className = "fly1";
    };
    document.querySelector('.animace2').onclick = function () {
        document.getElementById("fotka1").className = "fly2";
        document.getElementById("fotka2").className = "fly2";
        document.getElementById("fotka3").className = "fly2";
    };
</script>

另一个最初的"突然跳跃"问题是，你有冲突的CSS内容，你可以简化为这样说：

#fotka1 {
    position: absolute;
    height: 300px;
    width: 300px;
    margin-top: 300px;
    margin-left: 500px;
    border: solid 10px;
    z-index: 1;
    display: block;
    top: 8px;
    left: 0px;
    transition: ease-in-out 1s;
}
#fotka1.fly1 {
    left: 300px;
}
#fotka1.fly2 {
    left: -300px;
}

请参阅jsfiddle：http://jsfiddle.net/0Lg891p0/1/

相关文章：