常逛網站的人應該會發現有些網頁的兩旁會有圖片上下飄來飄去的,甚至還會跟著捲軸跑(就是一定會出現在各位的視線內),這就是一種廣告的運用。這類的廣告是比跳出式(popup)的好很多,也比較容易被接受(!?),且使用者無法輕易的關掉它(還是有方法..)。
先來說說大概的做法好了,先準備一張廣告圖片,然後在頁面上下的移動就OK了。但這並不局限用在廣告上喔!
來看Body的Code:
我把要用來當廣告的圖片放在Div中,且為了讓頁面有捲軸,所以我在中輸入了一堆Enter(換行用)。Div的position設為absolute,醬子才能移動位置。
接著就是JavaScript的Code:
_x是要用儲存廣告要離網頁邊界的距離,值越大就是越往右邊,若廣告圖片要放在右邊的話,_x就要改成是網頁的寬 - (某值) - mydiv的寬。distance是用來設定每次移動的距離是多長。winH則是目前網頁的高,divH的是mydiv的高,一開始我把mydiv的位置放在網頁的最下面,所以是winH-divH,若是一開始要在最上面的話,只要把yy設為0就可以了。isP是一boolean值,預設是false。
當網頁載入完時會執行init()函式,在init()函式中會先初始化mydiv的位置,並設定setInterval()在每100毫秒時執行moveAd()函式。
moveAd()函式主要是用來判斷及移動廣告圖片用,若isP是false的話,表示還沒移動到最上面,所以繼續往上移動;若是true則表示已經碰到最上面的邊界了,所以要變成往下移動。最後就是改變mydiv的位置到yy去,但為了讓有捲軸時,能因為捲軸的移動而不影響廣告圖片的相對位置,所以還要加上網頁捲軸的長度(scrollTop)才行。
醬就大功告成了!程式寫法並不難,只是要先想好怎樣來做判斷就可以了。若想做到的是像彈力球的移動方式呢?嘿嘿!這就要多判斷是否碰到左右邊界,有興趣的可以看下面的範例。
範例瀏覽:
http://abgne.myweb.hinet....015_1.htmlhttp://abgne.myweb.hinet....015_2.html以上內容於2005/11/23發表在小弟的Blog裡
http://blog.xuite.net/abgne/diary1/4447055