右下角緩慢出現廣告視窗例項程式碼
網頁右下角彈窗效果是網頁中常用的效果,比如可以給瀏覽者宣佈一些公告或者說播放一些廣告,同時廣告展現形式平滑且可以自由關閉,這樣對網頁的人性化程度沒有多大的影響,下面就通過一段程式碼例項簡單介紹一下如何實現此效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>網頁右下角出現廣告框例項程式碼-螞蟻部落</title> <style type="text/css"> body { margin:0px; padding:0px; height:1200px; } .botk { right:5px; position:fixed; width:100px; _position:absolute; _top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); z-index:999; height:100px; bottom:5px; } .botts { width:100px; height:100px; position:absolute; z-index:9999; background:#000000; } #adclose { width:20px; height:20px; position:absolute; right:0px; cursor:pointer; z-index:99999 } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ var wintopfir=$(".botk").height(); var wintopsec=wintopfir-100; $("#bottomad").css({top:wintopfir+"px"}); $("#bottomad").animate({top:wintopsec+"px"},2000); $("#adclose").click(function(){$("#bottomad").hide();}); }); </script> </head> <body> <div class="botk"> <div id="bottomad" class="botts"> <div id="adclose">X</div> </div> </div> </body> </html>
資訊框可以在網頁的右下角緩慢的彈出,效果比較簡單,實際應用中加以美化即可。
一.實現原理:
原理非常的簡單,就是在網頁的右下角固定一個透明的div,這裡使用了position:fixed實現了此功能,但是IE6並不支援,所以要使用下面的相容性程式碼:
[CSS] 純文字檢視 複製程式碼_position:absolute; _top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);
相關文章
- 網頁右下角彈出廣告資訊框例項程式碼網頁
- javascript 緩慢出現的廣告層效果JavaScript
- javascript自帶的彈出輸出視窗程式碼例項JavaScript
- window.open()實現彈出視窗居中顯示程式碼例項
- 廣告彈窗/小視窗程式碼
- 點選連結<a>彈出確認視窗程式碼例項
- 關閉瀏覽器視窗彈出提示程式碼例項瀏覽器
- 移動端點選彈出提示視窗程式碼例項
- javascript獲取視窗大小例項程式碼JavaScript
- js實現彈出灰色背景能夠拖動的視窗例項程式碼JS
- javascript關閉當前視窗例項程式碼JavaScript
- jQuery獲取視窗尺寸的例項程式碼jQuery
- 關閉瀏覽器視窗彈出警告視窗程式碼例項瀏覽器
- 可以限定拖動範圍的彈出視窗效果程式碼例項
- 應用例項:VC++實現廣告視窗自動關閉(轉)C++
- jQuery實現的彈出垂直水平居中視窗效果程式碼例項jQuery
- javascript緩衝運動程式碼例項JavaScript
- CSS實現div固定於網頁右下角例項程式碼CSS網頁
- jQuery將div在視窗中垂直居中例項程式碼jQuery
- js微信視窗關閉事件簡單程式碼例項JS事件
- js獲取瀏覽器視窗尺寸程式碼例項JS瀏覽器
- 彈出視窗程式碼
- JavaScript浮動廣告程式碼例項JavaScript
- javascript實現的多元素緩衝運動程式碼例項JavaScript
- js模擬實現alert()函式彈出警告視窗效果程式碼例項JS函式
- 點選彈出帶有灰色背景使用者登入視窗程式碼例項
- 調整視窗大小也能夠實現div水平垂直居中程式碼例項
- div始終在視窗中垂直水平居中程式碼例項
- js圖片緩衝載入程式碼例項JS
- 隨機漂浮圖片廣告例項程式碼隨機
- PyQt5主視窗動態載入Widget例項程式碼QT
- 設定頁面連結在新視窗開啟程式碼例項
- 根據不同瀏覽器視窗大小不同css檔案程式碼例項瀏覽器CSS
- 網頁標題出現資訊提醒例項程式碼網頁
- jquery元素從左上角飛入右下角程式碼例項jQuery
- javascript div元素彈性緩衝運動程式碼例項JavaScript
- 網頁JS彈出廣告程式碼,頭部,右下角,網頁中漂浮,對聯廣告程式碼等大全網頁JS
- js實現的點選彈出確認視窗程式碼JS