沿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度方向移動

回答

相關問題