不准時更新的日常，這次我們使用javaScript實現一個簡單的動畫移動效果，其思路想法很簡單，就是采用“CSS DOM”,對元素的位置進行改變。然后使用setTimeout()函數，對改變位置的函數進行反復調用，讓文字或圖片進行移動，行成動畫效果。
廢話不多說，直接上code:
這是HTML：
<body>
<p id="message">
逝者如斯夫,不舍晝夜。
</p>
<script src="js/initPosition.js"></script>
<script src="js/onload.js"></script>
<script src="js/動畫/donghua.js"></script>
<script src="js/final.js"></script>
<script src="js/動畫/jishu.js"></script>
</body>
這是initPosition: 其作用就是獲取元素的初始化位置。
function initPos(){
var elem=document.getElementById("message"); //獲取id message
elem.style.color="#"+randomColor(); //這是自己定義的隨機顏色函數，后面會上代碼。
elem.style.position="absolute"; //DOM定義樣式，位置等
elem.style.left="30px";
elem.style.top="50px";
moveElement("message",500,500,10); //欲知詳情請往下看
}
這是onload.js: 頁面加載完成后調用inipos()函數
window.onload=function(){
initPos();
}
這是donghua.js 也就是實現文字或圖片移動的關鍵
function moveElement(elementID,final_x,final_y,interval){ //參數分別為id選擇器的值，x 軸上目的位置，y軸上目的位置，函數執行的時間間隔
var elem=document.getElementById(elementID); //獲取id，此處也即是message
var xpos=parseInt(elem.style.left); //獲取初始，采用parsInt函數，將字符串變成數字。為什么要換成數字？原因是我們要將這個位置與目的位子進行比較
var ypos=parseInt(elem.style.top);
if(xpos<final_x){ //位置比較，如果這個元素的位置小於目的位置，那么這個元素初始位置增加，
xpos++;
}
if(xpos>final_x){ //如果這個位置大於目的位置，那么初始位置 --“”
xpos--;
}
if(ypos>final_y){
ypos--;
}
if(ypos<final_y){
ypos++;
}
if(xpos==final_x&&ypos==final_y){ //咳咳，這個下面會說，可以接着往下看
final();
}
elem.style.left=xpos+"px"; //上面我們為了與目的位置進行比較而將初始位置變成數字，這樣我們是無法改變元素樣式的，所以我們這里加上"px";
elem.style.top=ypos+"px";
var repeat="moveElement('"+elementID+"',+"+final_x+","+final_y+","+interval+")"; //把函數賦給變量，方便下面的書寫使用，不然setTimeOut里面放一長串的代碼，看起來是很痛苦的。
movment=setTimeout(repeat,interval); // setTImeout()函數，其意思是間隔interval（參數）時間調用一次repeat（函數，此處函數為moveElement()函數）;
}
這是final.js ：
function final(){
location.reload(); //o(╥﹏╥)o，為了反復看動畫移動，我這里很粗暴的直接實現了頁面刷新。。。
}
function randomColor(){
var color=Math.ceil(Math.random()*1700).toString(16); //隨機顏色函數，改變文字顏色，讓文字動畫看起來更明顯。
return color;
}
效果可以查看：https://runjs.cn/detail/gzxxneoo
暫時將代碼放到run.js展示。 但是每次刷新頁面都會卡一下。看來每次加載一下的效果並不好，看不清可以手動刷新頁面。
一下為個人收集的學習資料分享，來源均為互聯網，分享給大家。除了學習還有娛樂的，如有侵權，請留言我會馬上撤銷。
git教程：https://pan.baidu.com/s/1-DJIAi7rqV0zprnEJVW7zQ 提取碼：fw2t
一拳超人第一季收藏：https://pan.baidu.com/s/1TL1N2VpfCN06ectJZ5Uimw 提取碼：5cql
20個經典java項目附帶源碼：https://pan.baidu.com/s/1YcOjqRNkscirbJvDXL1VeA 提取碼：ll59
2018年Vue2.X快速入門：https://pan.baidu.com/s/1D5MTeiTpvn01aP-F7iKLYQ 提取碼：4ylv
程序員追女孩12招 https://www.sebigdata.com/carUsb_1201_6_10.html 附帶10G精品教程，鏈接親測有效。（皮了下，找女朋友要緊）
Vue 去哪網項目練習：https://pan.baidu.com/s/1AU0u0Z7aeDRvsT80P03gZQ 提取碼：k1w6
我知女人心：https://www.sebigdata.com/carUsb_1201_5_10.html 知彼知己了解女性的全部教程。