移動圖像塊

我正在努力讓「C22RJC」會下降，「SOPOET」會上升。我想讓他們在中間相遇並且拼出「CS202Project」這個詞，我不知道如何讓這些文字在中間相遇並且拼出單詞。移動圖像塊

這裏是我到目前爲止的代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <script> 
    var TopPost = 0; 
    var BottPost = 79; 
    var Move = new Array(80); 

    for(var i = 0; i < 80; ++i) { 
     Move[i] = TopPost; 
     TopPost += 5; 

    for(var i = 80; i < 80; --i) { 
     Move[i] = BottPost; 
     BottPost -= 5; 

    function TopSec(){ 
     document.getElementById("top") = Move[TopPost] + "px"; 
    } 

    function BottSec(){ 
     document.getElementById("bottom") = Move[BottPost] + "px"; 
    } 
    function startMov(){ 
    setInterval("TopSec()", 1000); 
    setInterval("BottSec()", 1000); 
    } 
    </script> 
</head> 
<body> 
<span id="top"> 
    <center> 
     <image src="Images/C.jpeg" height="50"> 
     <image src="Images/2.jpeg" height="50"> 
     <image src="Images/2.jpeg" height="50"> 
     <image src="Images/R.jpeg" height="50"> 
     <image src="Images/J.jpeg" height="50"> 
     <image src="Images/CC.jpeg" height="50"> 
    </center> 
</span> 
<span id="bottom" style="position: fixed; bottom: 0; width: 100%"> 
    <center> 
     <image src="Images/S.jpeg" height="50"> 
     <image src="Images/0.jpeg" height="50"> 
     <image src="Images/P.jpeg" height="50"> 
     <image src="Images/O.jpeg" height="50"> 
     <image src="Images/E.jpeg" height="50"> 
     <image src="Images/T.jpeg" height="50"> 
    </center> 
</span> 
<span id="year"> 
    <image src="Images/2015.jpeg" height="50"> 
</span> 
</body> 
</html>

來源

2015-06-01 Timothy Wong

我可能會問你爲什麼不使用CSS來做到這一點？ – JosephMCasey

我被要求使用javascript –

你的老師是否告訴你使用'

'標籤？是否在範圍之外的html正文中包含所有內容？ – Anthony

請試試這個

var TopPost = 0; 
 
    var BottPost = 0; 
 
    var tt; 
 
    var bb 
 
    var w = window.innerWidth; 
 
    var h = window.innerHeight; 
 

 

 
    function TopSec(){ 
 
     TopPost+=5; 
 
     document.getElementById("top").style.top = TopPost + "%"; 
 
     
 
     if(TopPost >= 50){ 
 
      clearInterval(tt); 
 
      clearInterval(bb); 
 
      document.getElementById("top").style.top = "50%"; 
 
      document.getElementById("bottom").style.bottom = "50%"; 
 
     } 
 
    } 
 

 
    function BottSec(){ 
 
     BottPost+=5; 
 
     document.getElementById("bottom").style.bottom = BottPost + "%"; 
 
    } 
 

 
    function startMov(){ 
 

 
     tt = setInterval("TopSec()", 100); 
 
     bb = setInterval("BottSec()", 100); 
 
    }

<span id="top" style="position: fixed; top: 0; width: 200px"> 
 
     <image src="Images/C.jpeg" height="50"> 
 
     <image src="Images/2.jpeg" height="50"> 
 
     <image src="Images/2.jpeg" height="50"> 
 
     <image src="Images/R.jpeg" height="50"> 
 
     <image src="Images/J.jpeg" height="50"> 
 
     <image src="Images/CC.jpeg" height="50"> 
 
</span> 
 

 
<span id="bottom" style="position: fixed; bottom: 0; width: 200px"> 
 
     <image src="Images/S.jpeg" height="50"> 
 
     <image src="Images/0.jpeg" height="50"> 
 
     <image src="Images/P.jpeg" height="50"> 
 
     <image src="Images/O.jpeg" height="50"> 
 
     <image src="Images/E.jpeg" height="50"> 
 
     <image src="Images/T.jpeg" height="50">  
 
</span> 
 
<span id="year"> 
 
    <image src="Images/2015.jpeg" height="50"> 
 
</span> 
 
<br> 
 
<br> 
 
<br> 
 
<button onclick="startMov()">Start</button>

working code in jsfiddle

來源

2015-06-01 19:21:08

我還添加了一個的jsfiddle你問。總而言之，我在代碼中看到了很多過時的做法。我建議看看我的方法與您的原始方法略有差異。但是，這些細微的差異使得功能更加平滑，易於閱讀（在開發中工作時很重要）。我可以將這兩個功能合併爲一個，但我相信你可以自己做到這一點。我只是想讓一些容易閱讀的東西。

http://jsfiddle.net/a9wf6g35/

var topElem = document.getElementById('top'), 
 
    botElem = document.getElementById('bottom'), 
 
    top = parseInt(topElem.style.top, 0) || 0, 
 
    bot = parseInt(botElem.style.bottom, 0) || 0, 
 
    step = 1; 
 

 
function animateTop() { 
 
    if (top <= 100) { 
 
     requestAnimationFrame(animateTop); 
 
     topElem.style.top = top + '%'; 
 
     top += step; 
 
    } 
 
} 
 
animateTop(); 
 

 
function animateBot() { 
 
    if(bot <= 100) { 
 
     requestAnimationFrame(animateBot); 
 
     botElem.style.bottom = bot + '%'; 
 
     bot += step; 
 
    } 
 
} 
 
animateBot();

*{margin:0;padding:0;} 
 
#bottom{position:absolute;bottom:0;} 
 
#top{position:absolute;top:0;}

<section> 
 
<div id="top"> 
 
    <span> 
 
     <image src="http://placehold.it/50&text=C"/> 
 
     <image src="http://placehold.it/50&text=2"/> 
 
     <image src="http://placehold.it/50&text=2"/> 
 
     <image src="http://placehold.it/50&text=R"/> 
 
     <image src="http://placehold.it/50&text=J"/> 
 
     <image src="http://placehold.it/50&text=CC"/> 
 
    </span> 
 
</div> 
 
<div id="bottom"> 
 
    <span> 
 
     <image src="http://placehold.it/50&text=S"/> 
 
     <image src="http://placehold.it/50&text=O"/> 
 
     <image src="http://placehold.it/50&text=P"/> 
 
     <image src="http://placehold.it/50&text=O"/> 
 
     <image src="http://placehold.it/50&text=E"/> 
 
     <image src="http://placehold.it/50&text=T"/> 
 
    </span> 
 
</div> 
 
<div id="year"> 
 
    <image src="http://placehold.it/50&text=2015"/> 
 
</div> 
 
</section>

來源

2015-06-01 19:47:31 JosephMCasey

回答

相關問題