javascript - 向45度方向移动

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 轴上以相同的速率滑出。

示例:如果他们向左移动 600 像素，那么它也需要向顶部移动 600 像素(这将使它以 45 度 Angular 飞到左上角。或者，如果您将它向左移动 600 像素，向底部移动 600 像素，它会飞到左下方。希望这对您有所帮助!