Question

我试图让它成为＆＃34; C22RJC＆＃34;将下降＆＃34; SOPOET＆＃34;会上升。我希望他们在中间见面并拼出单词＆＃34; CS202Project＆＃34;我不知道如何让文本在中间相遇并拼出单词。

到目前为止，这是我的代码：

<!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>

Answer 1

请试试这个

  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

Answer 2

我还添加了一个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>

移动图像块

2 个答案: