我试图让它成为" 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>
答案 0 :(得分:0)
请试试这个
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>
答案 1 :(得分:0)
我还添加了一个JSFiddle,你要问的是什么。总而言之,我在您的代码中看到了许多过时的实践。我建议看看我的方法与你原来的方法有什么不同。但是,这些细微差别使得更容易阅读的功能更加平滑(在开发中工作时很重要)。我可以把这两个功能合二为一,但我相信你可以自己做。我只想做一些容易阅读的内容。
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>