廣告廣告
  加入我的最愛 設為首頁 風格修改
首頁 首尾
 手機版   訂閱   地圖  簡體 
您是第 5657 個閱讀者
 
發表文章 發表投票 回覆文章
  可列印版   加為IE收藏   收藏主題   上一主題 | 下一主題   
keigo
個人頭像
個人文章 個人相簿 個人日記 個人地圖
初露鋒芒
級別: 初露鋒芒 該用戶目前不上站
推文 x0 鮮花 x71
分享: 轉寄此文章 Facebook Plurk Twitter 複製連結到剪貼簿 轉換為繁體 轉換為簡體 載入圖片
推文 x0
[JScript][討論] 浮動圖片
常逛網站的人應該會發現有些網頁的兩旁會有圖片上下飄來飄去的,甚至還會跟著捲軸跑(就是一定會出現在各位的視線內),這就是一種廣告的運用。這類的廣告是比跳出式(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.html

http://abgne.myweb.hinet....015_2.html

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



歡迎各位參觀小弟的Blog男丁格爾's 脫殼玩
獻花 x0 回到頂端 [樓 主] From:印度尼西亞 | Posted:2006-01-20 13:20 |
jinhon
數位造型
個人文章 個人相簿 個人日記 個人地圖
路人甲
級別: 路人甲 該用戶目前不上站
推文 x0 鮮花 x1
分享: 轉寄此文章 Facebook Plurk Twitter 複製連結到剪貼簿 轉換為繁體 轉換為簡體 載入圖片

謝謝大大。
那如果要讓他跟著移,但是不壓到中間的文字區塊,
該怎麼自動化呢?


獻花 x0 回到頂端 [1 樓] From:台灣台灣索尼 | Posted:2006-01-29 16:04 |
keigo
個人頭像
個人文章 個人相簿 個人日記 個人地圖
初露鋒芒
級別: 初露鋒芒 該用戶目前不上站
推文 x0 鮮花 x71
分享: 轉寄此文章 Facebook Plurk Twitter 複製連結到剪貼簿 轉換為繁體 轉換為簡體 載入圖片

跟著什麼移動呢?滑鼠嗎?
文字區域是指網頁中的文字內容嗎@@?


歡迎各位參觀小弟的Blog男丁格爾's 脫殼玩
獻花 x0 回到頂端 [2 樓] From:台灣中華電信 | Posted:2006-01-31 19:31 |

首頁  發表文章 發表投票 回覆文章
Powered by PHPWind v1.3.6
Copyright © 2003-04 PHPWind
Processed in 0.076663 second(s),query:16 Gzip disabled
本站由 瀛睿律師事務所 擔任常年法律顧問 | 免責聲明 | 本網站已依台灣網站內容分級規定處理 | 連絡我們 | 訪客留言