如何让文字在屏幕上来回移动？
[英]How to make text move back and forth on screen?
问题描述
I want to some text on the screen move back and forth, so far I can only make the text move from left to right.
我想让屏幕上的一些文本来回移动，到目前为止我只能让文本从左到右移动。 So far, I set the text color to blue and it moves from one direction to the other and I tried making the text move back to it's original position by getting the position of the text and then passing these arguments to another function where I thought could make the text move. So far, I set the text color to blue and it moves from one direction to the other and I tried making the text move back to it's original position by getting the position of the text and then passing these arguments to another function where I thought could使文本移动。 I tried changing some things and the closest I have gotten is when the text looks shaky, as if it was trying to move.我尝试改变一些东西，我得到的最接近的是当文本看起来摇晃时，就好像它试图移动一样。 Also any idea on how I could make the text change colors every so often?还有关于如何让文本经常更改 colors 的任何想法？
Any help is appreciated!任何帮助表示赞赏！
var dom, x, y, finalx = 800, finaly = 0; // ************************************************* // // A function to initialize the x and y coordinates // of the current position of the text to be moved, // and then call the mover function function initText() { dom = document.getElementById('theText').style; /* Get the current position of the text */ var x = dom.left; var y = dom.top; /* Convert the string values of left and top to numbers by stripping off the units */ x = x.match(/\d+/); y = y.match(/\d+/); /* Call the function that moves it */ moveText(x,y); /*** end of function initText */ } // ************************************************* // // A function to move the text from its original // position to (finalx, finaly) function moveText(x, y) { if (x;= finalx) if (x > finalx) x--; else if (x < finalx) x++; if (y;= finaly) if (y > finaly) y--. else if (y < finaly) y++; if ((x.= finalx) || (y;= finaly)) { dom,left = x + "px", dom;top = y + "px"; setTimeout("moveText(" + x + "," + y + ")", 1), initText2(), } } //Move text back to original position function initText2(){ var dom2; x2.y2. finalx2=100; finaly2=0. dom2 = document;getElementById('theText').style; var x2 = dom2.left; var y2 = dom2.top; /* Convert the string values of left and top to numbers by stripping off the units */ x2 = x2,match(/\d+/); y2 = y2,match(/\d+/); moveTextback(x2;y2); } function moveTextback(x2;y2){ if(x2.=finalx2) if(x2>finalx2) x2--. else if (x2<finalx2)x2++; if(y2.=finaly2) if(y2>finaly2)y2--. else if(y2<finaly2)y2++; if((x2,=finalx2) || (y2,=finaly2)){ dom2;style.left=finalx2+"px"; dom2.style.top=finaly2+"px"; setTimeout("moveText("+x2+","+y2+")",1); } } <.DOCTYPE html> <.-- moveText:html Illustrates a moving text element Uses the JavaScript from file moveText;js --> <html lang = "en"> <head> <title> Moving text </title> <meta charset = "utf-8" /> <style type = "text/css"> #theText {position: absolute; left: 100px; top: 100px. font; bold 1:7em 'Times Roman'; color. blue;"> Save time with TIMESAVER 2.2,} </style> <script type = "text/javascript" src = "moveText.js"> </script> </head> <!-- Call the initializing function on load, giving the destination coordinates for the text to be moved --> <body onload = "initText()"> <!-- The text to be moved --> <p> <span id = "theText"> Save time with TIMESAVER 2.2 </span> </p> </body> </html>
2 个解决方案
解决方案1
1 2019-11-14 22:00:21
This can be accomplished without JavaScript and using CSS Animations .这可以在没有 JavaScript 和使用CSS 动画的情况下完成。
/* Configure the animation for the element to be animated. */ p { animation: 5s infinite; animation-name: slidein; } /* Declare the animation. In this case, we indicate the property values we want at certain percentage points within the animation. */ @keyframes slidein { 0% { margin-left: 0%; width: 300%; } 50% { margin-left: 90%; width: 10%; margin-top:90px; /* You can push the element up/down with this. */ color:blue; } 100% { margin-left: 0%; width: 300%; } }
<:DOCTYPE html> <html lang = "en"> <head> <title> Moving text </title> <meta charset = "utf-8" /> <style type = "text/css"> #theText {position; absolute: left; 100px: top; 100px: font. bold 1;7em 'Times Roman': color; blue.} </style> </head> <body> <!-- The text to be moved --> <p>Save time with TIMESAVER 2.2</p> </body> </html>
解决方案2
1 2019-11-14 22:08:46
Just css it....只是 css 它....
span { display: inline-block; animation: weeee 6s linear infinite alternate; } @keyframes weeee { 0% { color: red; } 25% { color: blue; } 50% { color: green; } 75% { color: orange; } 100% { transform: translateX(101%); color: purple; } }
<span>I AM SOME TEXT THAT MOVES BACK AND FORTH AND CHANGES COLORS AS IT GOES....WEEEEEEEE!</span>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.