Question

我试图让我的所有三张图像在不同的45度方向上飞离屏幕。现在我让所有人从屏幕左侧飞出，但正如我所说，我希望他们能够在45度方向飞行。我已经包含了我到目前为止的css，html和javascript。我相信解决方案是javascript中的一个简单修复，但是，我并不是那么精通编写javascript来解决它。如果有人可以请帮助我，将不胜感激。提前谢谢......

HTML：

<button onclick="slideIn('img6','img5','img2');">slide in</button>
<button onclick="slideOut('img5','img6','img2');">slide out</button>

CSS：

#img2{
    position:absolute;
    top:50%;
    left:50%;
    width:300px;
    height:119px;
    margin-top:250px;
    margin-left:-200px;
}
#img5{
    position:absolute;
    top:50%;
    left:50%;
    height:170px;
    width:333px;
    margin-top:130px;
    margin-left:72px;
}
#img6{
    position:absolute;
    top:50%;
    left:50%;
    height:184px;
    width:414px;
    margin-top:290px;
    margin-left:100px;
}

使用Javascript：

<script>
        function slideIn(skate,blanket,clothes){
            var elem = document.getElementById(skate);
            var elem1 = document.getElementById(blanket);
            var elem2 = document.getElementById(clothes);
                elem.style.transition = "left 0.5s ease-in 0s";
                elem.style.position="absolute";
                elem.style.top = "50%";
                elem.style.left = "50%";
                elem.style.marginLeft = "100px";
                elem.style.marginTop = "290px";


                elem1.style.transition = "left 0.5s ease-in 0s";
                elem1.style.position="absolute";
                elem1.style.top = "50%";
                elem1.style.left = "50%";
                elem1.style.marginLeft = "72px";
                elem1.style.marginTop = "130px";

                elem2.style.transition = "left 0.5s ease-in 0s";
                elem2.style.position="absolute";
                elem2.style.top = "50%";
                elem2.style.left = "50%";
                elem2.style.marginLeft = "-200px";
                elem2.style.marginTop = "250px";

}


        function slideOut(skate,blanket,clothes){
            var elem = document.getElementById(skate);
            var elem1 = document.getElementById(blanket);
            var elem2 = document.getElementById(clothes);

                elem.style.transition = "left 0.5s ease-out 0s";
                elem.style.left = "-600px";

                elem1.style.transition = "left 0.5s ease-out 0s";
                elem1.style.left = "-1200px";

                elem2.style.transition = "left 0.5s ease-out 0s";
                elem2.style.left = "-1200px";


}
        </script>

Answer 1

您需要在y轴和x轴上以相同的速率使用slideOut元素。

示例：如果它们向左移动600px，那么它也需要向顶部600px移动（这将使它以45度角向左上方飞行。或者，如果你向左移动600px并向底部移动600px，它会飞到左下方。希望这有帮助！

向45度方向移动

1 个答案: