浮動圖片

Home Home
引用 | 編輯 keigo
2006-01-20 13:20
樓主
推文 x0
常逛網站的人應該會發現有些網頁的兩旁會有圖片上下飄來飄去的,甚至還會跟著捲軸跑(就是一定會出現在各位的視線內),這就是一種廣告的運用。這類的廣告是比跳出式(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.net/0015/0015_1.html

http://abgne.myweb.hinet.net/0015/0015_2.html

以上內容於2005/11/23發表在小弟的Blog裡http://blog.xuite.net/abgne/diary1/4447055

獻花 x0
引用 | 編輯 jinhon
2006-01-29 16:04
1樓
  
謝謝大大。
那如果要讓他跟著移,但是不壓到中間的文字區塊,
該怎麼自動化呢?

獻花 x0
引用 | 編輯 keigo
2006-01-31 19:31
2樓
  
跟著什麼移動呢?滑鼠嗎?
文字區域是指網頁中的文字內容嗎@@?

獻花 x0