讓網頁元件在畫面上移動的方法

假設你的網頁上有一張圖,你想要讓它自己在畫面上跑來跑去,該怎麼做呢?

或是,你要讓一張圖追著滑鼠游標跑,要從哪裡著手?

網頁上的元件的位置可以由CSS來進行定位,而讓圖片、文字移動的部份當然就交由Javascript來完成。

我們來看一個例子:

這個程式有三個函數。 rand(q)函數是用來找出0到q之間的亂數。init()是在body載入之後,進行一些初始化的動作。而run()就是讓物件移動的主要部份了。我們先來看HTML的部份,再一個一個看函數的內容。

在<body>標籤中,onload事件被觸發時,會去執行init()。我們在這裡用CSS設定<body>的寬度是500px,高度是500px。再來,你看到了<div>標籤。這個<div>的 id 是 obj,而CSS設定為決對定位(position:absolute),距離畫面頂端100個畫素,距離畫面左邊0個畫素,它的內容只有MLab四個英文字母。

Javascript的Math.random()傳回來的值是一個介於0到1之間的亂數,將這個亂數乘上q+1之後,再用Math.floor得到小於此數值的最大整數,就是rand(q)的回傳值。

 

document.body.clientWidth 是body的寬度,在這個例子中就是500px,而clientHeight很明顯的也是500px。我們先用 document.getElementById('obj') 來取得id為obj的物件,在這個例子中,就是上面提到的<div>。取得了之後存到 x 去。然後我們修改 x.style.left  與 x.style.top  的值,這兩個值就是CSS的 left 與 top,這兩個值在給定時,記得要加入單位,我們用的是px,所以需要加上’px’。最後,呼叫 run()。

這個函數是用於初始化,它會將MLab定位在畫面上隨機的地方。

 

我們用一個全域變數step來存「每次要移動的值」。 這個函數一開始一樣用 x 去存<div>物件。x.style.left 所回傳的值是 x 在 CSS 中,left的值;這個值是有單位的,在我們的例子中,就是 px。但是我們現在要做運算,所以先用parseInt,取出數值的部分並且存入currentX。例如,若 x.style.left 是123px,則

。當MLab這個字在X軸的定位己經到了<body>的最右邊,也就是我們定義的500px,則我們設定 step = -1。相對的,如果定位己經在最左邊,我們讓 step 的值為1。

我們利用

來指定 x 新的left值。如果現在 step = -1,那 x 的 left 值就會一直減少,反之則會每次加1的增加。

是這個函數的重點,意思是設定計時器,每隔10/1000秒,執行run()。


要怎麼抓滑鼠在畫面上的位置呢?

想法是這樣,當滑鼠在畫面上移動時,會觸發 onmousemove 事件,而事件發生的地點,當然就是你滑鼠游標的位置啦。

觸發onmousemove事件時,我們必須指定一個函數去處理這個事件,否則就被系統拿去處理了,我們就不能拿來做什麼事了。指定的方式是

這裡的trace是一個函數,在這裡的意思就是,onmousemove的處理函數的名稱。在trace函數中,我們只需要這樣做:

posX與posY是我們定義的變數,而 window.event.x  與 window.event.y  很明顯的,就是事件(event)發生的 x 與 y 位置啦。取得這兩個值,就是滑鼠游標的位置了。

 

Leave a Reply

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *