如何讓文字在屏幕上來回移動？
[英]How to make text move back and forth on screen?
問題描述
我想讓屏幕上的一些文本來回移動，到目前為止我只能讓文本從左到右移動。 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使文本移動。 我嘗試改變一些東西，我得到的最接近的是當文本看起來搖晃時，就好像它試圖移動一樣。 還有關於如何讓文本經常更改 colors 的任何想法？
任何幫助表示贊賞！
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
這可以在沒有 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
只是 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>
如何使用Javascript使文字顏色自動來回改變？
[英]How to make the text color to change back and forth automatically using Javascript?
使用 JavaScript 根據屏幕寬度來回移動元素
[英]Move elements back and forth depending on screen width with JavaScript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.