前端--JavaScript製作月亮升起小動畫
阿新 • • 發佈：2018-12-11
先說我們這個小動畫想要達到的效果：
- 月亮最開始藏在海中，只露出一點點。
- 隨著時間，開始慢慢上升，直到一個高度停止。
- 當月亮停止上升，出現一首詩。
效果一：
我們先設定一個div，設定你想要的圖為背景，以讓其他圖片可以很方便的覆蓋在上面。這個div中包含三個div：
- 第一個div:包含背景圖中的海的圖片。
- 第二個div:包含月亮圖片。
- 第三個div:作為文字容器。
既然要被海遮蓋住，那麼要使兩張圖片處於不同層，使用z-index屬性以達到效果。使月亮的z-index屬性小於海面的z-index便可以使兩張圖片處於不同層。
效果圖：
效果二：
我們按照如下步驟打到效果：
- 獲取圖片所在div物件
- 設定div 左上角座標 ，起始點的座標
- 設定圖片的行進速度
- 設定圖片的最大浮動高度
- 判斷圖片是否達到醉倒高度。如果達到，調整速度為0。如果未達到，設定座標值為 起始座標+速度
- 延遲呼叫該圖片移動函式，每隔50毫秒呼叫一次
效果三：
在函式中設定一個變數H為0，當圖片達到最大浮動高度的話，該變數置為1.當下一次呼叫圖片移動函式時，獲取文字框所在div物件，使其中出現文字。
以下為所有程式碼：
<!DOCTYPE html> <html> <head> <title></title> <style> .moon{ position: absolute; left: 550px; top: 305px; height:100px; width:100px; z-index:1; } .bottom{ position:absolute; top:310px; z-index:99; } img{ position:absolute; filter:alpha(opacity=100);/* IE */ -moz-opacity:1;/* Moz + FF */ opacity: 1;/* 支援CSS3的瀏覽器（FF 1.5也支援）*/ } #poem{ position:absolute; top:135px; left:700px; z-index:1; font-size:20px; font-weight:bold; } </style> </head> <body> <div style="background:url('images/sea.png');width:1005px;height:585px;no-repeat"> <div class="bottom"> <img src="images/bottom.png"/> </div> <div class="moon" id="moon"> <img src="images/moon.png" style="100px;width:100px;" onclick="move()"/> </div> <div id="poem"> </div> </div> </body> <script language="JavaScript" type="text/javascript"> //獲取圖片所在的div物件 var img=document.getElementById("moon"); //設定div起始座標 var x=550,y=305; //設定圖片的行進速度 var xSpeed=0,ySpeed=-1; //設定圖片的最大浮動的高度 var h=105; var H=0; function floatimg(){ //比較圖片是否到達指定高度 if(y<h||y<0){ ySpeed= 0;H=1; } if(H==1){ //獲取文字框所在的div物件 var tt=document.getElementById("poem"); //改變文字框中內容 tt.innerHTML="海上明月枕邊人."; } //設定座標值 起始座標+速度 x+=xSpeed; y+=ySpeed; img.style.top=y+"px"; img.style.left=x+"px"; //延遲呼叫函式floatimg()，每個50毫秒呼叫一次 setTimeout("floatimg()",50); } floatimg(); </script> </html>
最終效果圖：
