1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>文字移動</title> 5 <script type="text/javascript"> 6 7 //初始化，給要移動的元素一個初始值，可理解為移動的起點 8 function prepareElement(){ 9 var elem = document.getElementById("pp"); 10 elem.style.position = "absolute"; //表示定位於相對於包含它的元素的指定坐標 11 elem.style.left = "0px"; 12 elem.style.top = "0px"; 13 } 14 function moveElement(elementId,final_x,final_y,interval){ 15 16 //驗證元素是否存在 17 if(!elementId) return false; //當elementId為空時對應值false，加！為真，則不再向下執行， 18 19 //獲得指定元素 20 //var elem=document.getElementById(elementId); 21 var elem = document.getElementById(elementId); 22 23 //獲得現在的坐標 24 var x=parseInt(elem.style.left); 25 var y=parseInt(elem.style.top); 26 //判斷是否到了指定位置 27 if(x==final_x && y==final_y) return; 28 //沒有到達時繼續向執行 29 if(x>final_x){ 30 x--; 31 } 32 if(x<final_x){ 33 x++; 34 } 35 if(y>final_y){ 36 y--; 37 } 38 if(y<final_y){ 39 y++; 40 } 41 42 //修改坐標位置 43 elem.style.left=x+"px"; 44 elem.style.top=y+"px"; 45 46 //自己調自己，實現連續移動 47 js="moveElement('"+elementId+"',"+final_x+","+final_y+","+interval+")"; 48 //此句代碼很費解，elementId,final_x等是變量，所有要在引號外， 49 //而elementId加兩層引號是因為elementId中傳來的是字符串的變量 50 setTimeout(js,interval); 51 //setTimeout() 方法用於在指定的毫秒數后調用函數或計算表達式。 52 //提示：setTimeout() 只執行 code 一次。 53 //如果要多次調用，請使用 setInterval() 或者讓 code 自身再次調用 setTimeout()。 54 55 } 56 57 window.onload=function() { 58 prepareElement(); 59 moveElement("pp",200,100,100);//括號中分別代表 元素ID，X移動多少，Y移動多少，多長時間完成移動 60 } 61 </script> 62 </head> 63 <body> 64 <p id="pp">我是一個移動元素 </p> 65 66 </body> 67 </html>
簡單的JS動畫的實現 文字在頁面飄動
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。