漫游於網絡之間你會發覺互聯網不但是信息的海洋也是廣告的海洋除了普通的GIF BannerFlash外浮動廣告也是時下網上較為流行的廣告形式之一當你拖動浏覽器的滾動條時這種在頁面上浮動的廣告可以跟隨屏幕一起移動盡管這種效果對於廣告展示有相當的實用價值但對浏覽你網頁的人來講這則是個既妨礙閱讀又影響閱讀興趣的東西因此一定不能濫用不過如果你能善用的話它就能發揮出極大的作用
要做出浮動式廣告的效果並不困難如果你有JavaScript基礎的可以自己寫一個如果連寫都懶得寫的話到網上下載一個特效工具按提示粘貼一下代碼就OK不過想要真正了解它是怎樣做出來的則需要掌握一些JavaScript知識了這裡向大家介紹一下簡單的浮動廣告做法
以下這段代碼可放在<body></body>之間其間我加入了一些注釋(即//後的文字及<!———>之間的文字)
<SCRIPT FOR=window EVENT=onload LANGUAGE=JavaScript> initAd()//載入頁面後調用函數initAd()
</SCRIPT> <script language=JavaScript> <!——function initAd() { documentallAdLayerstyleposTop = //設置onLoad事件激發以後廣告層相對於固定後的y方向位置documentallAdLayerstylevisibility = visible//設置層為可見MoveLayer(AdLayer)//調用函數MoveLayer()
} function MoveLayer(layerName) { var x = //浮動廣告層固定於浏覽器的x方向位置var y = //浮動廣告層固定於浏覽器的y方向位置var diff = (documentbodyscrollTop + y documentallAdLayerstyleposTop)*var y = documentbodyscrollTop + y diffeval(documentall + layerName + styleposTop = y)eval(documentall + layerName + styleposLeft = x)//移動廣告層setTimeout(MoveLayer(AdLayer) )//設置毫秒後再調用函數MoveLayer()
} //——> </script> <!——下面為一個ID為AdLayer的層(如ID名不為AdLayer上面MoveLayer()內的AdLayer也要作相應修改)包括一張帶鏈接的圖片——> <div id=AdLayer style=positionabsolute widthpx heightpx zindex visibilityhidden left px top px> <a >><img src=……/qqkkgif border= height= width=></a> </div>在這裡你可以設置xy的值來設定所固定層的位置改變setTimeout(MoveLayer(AdLayer) )中的值為你希望調用MoveLayer()的時間間隔還有要注意的是使用的圖片最好為透明背景的GIF圖以使圖片的背景顏色不至於遮住後面的的內容
切記要慎用浮動式廣告考慮使用特效的同時千萬要考慮到浏覽者的感覺不能濫用哦!
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19409.html