沿45度方向移动

我试图让所有三个图像以不同的45度方向飞离屏幕。现在我把他们全部从屏幕上飞到左边，但正如我所说的，我希望他们能够以45度的方向飞行。我已经包含了CSS，HTML和我迄今为止所使用的JavaScript。我相信解决方案是在JavaScript中的一个简单的修复，但是，我不是很精通编写JavaScript来弄清楚。如果有人可以请帮助我，这将不胜感激。在此先感谢...沿45度方向移动

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>

来源

2014-01-09 Dewayne Phillips

查看css3转换和/或使用插件（如果你不反对使用jQuery）http://ricostacruz.com/jquery.transit/ –

我同意下面发布的答案与css3转换（特别是css转换）一样好，我强烈建议查看以下链接学习：http://css3.bradshawenterprises.com/transitions/ – bboysupaman

我不想，这是体积较小，我相信答案与style.transition =“有关，这里是我相信答案的地方呃是“; –

你需要具备的要素滑出式在在同样的速度y和x轴。

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

来源

2014-01-09 20:19:06 bboysupaman

好吧，所以我尝试了它，它做了一些时髦。也许，我没有正确写出它。有什么不同的写法吗？这是我写的：elem.style.transition =“左0.5s缓出0s”; \t \t \t elem.style.left =“-600px”; \t \t \t elem.style.top =“600px”; –

你可以包括一个jsfiddle吗？ – bboysupaman

如果我能看到整件事情，这只会有所帮助。 =） – bboysupaman

沿45度方向移动

回答

相关问题