javascript實現(xiàn)右下角廣告框效果
更新時間：2017年02月01日 10:15:41 作者：Jack-小俊
這篇文章主要為大家詳細介紹了javascript實現(xiàn)右下角廣告框效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文教大家用原生js實現(xiàn)的簡單網(wǎng)頁主頁右下角的廣告框效果，利用好絕對定位，點擊X關(guān)閉廣告，里面的內(nèi)容不管動圖或者視頻都可以。
代碼最簡潔，js行為優(yōu)化版，復(fù)制粘貼即可使用。
演示部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>右下角廣告框效果</title>
</head>
<style type="text/css">
#advbox{
width: 400px;
height: 300px;
position: fixed;
right: 0;
bottom: 0;
}
.adv{
width: 380px;
height: 270px;
border: 1px solid #a00;
position: relative;
}
#icon{
display: block;
width: 24px;
height: 24px;
color: #0c0;
font-size: 30px;
font-weight: bolder;
position: absolute;
right: 2px;
top: 2px;
cursor: pointer;
}
#resetadv{
width: 105px;
height:20px;
position: fixed;
right: 25px;
bottom: 15px;
color: #fff;
font-size: 20px;
background-color: #333;
}
.hide{
display: none;
}
.show{
display: block;
}
</style>
<body>
<div id="advbox">
<div class="adv">
<img src="" alt="結(jié)合html5,這可以是一個gif,swf或者video">
<span id="icon">X</span>
</div>
</div>
<div id="resetadv">廣告入口>></div>
<script type="text/javascript">
(function(){
//封裝一下dom的id操作
var $ = function(id){
return document.getElementById(id);
};
//添加點擊事件
$("icon").onclick=function(){
$("advbox").className = "hide";
};
$("resetadv").onmouseover=function(){
$("advbox").className = "show";
};
})();
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了微信小程序-form表單提交，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Electron 結(jié)合 Selenium + chromedriver
這篇文章主要介紹了Electron 結(jié)合 Selenium + chromedriver 驅(qū)動服務(wù)實現(xiàn)瀏覽器多開思路詳解,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-07-07
用Div仿showModalDialog模式菜單的效果的代碼
用Div仿showModalDialog模式菜單的效果的代碼...2007-03-03
BootStrap框架個人總結(jié)(bootstrap框架、導(dǎo)航條、下拉菜單、輪播廣告carousel、柵格系統(tǒng)布局、標(biāo)簽頁
這篇文章主要介紹了BootStrap框架個人總結(jié)(bootstrap框架、導(dǎo)航條、下拉菜單、輪播廣告carousel、柵格系統(tǒng)布局、標(biāo)簽頁tabs、模態(tài)框、菜單定位)的相關(guān)資料,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了JS實現(xiàn)不規(guī)則TAB選項卡效果代碼,通過簡單的JavaScript響應(yīng)鼠標(biāo)事件動態(tài)變換元素樣式實現(xiàn)不規(guī)則選項卡效果,非常具有實用價值,需要的朋友可以參考下2015-09-09
javascript與jquery中的this關(guān)鍵字用法實例分析
這篇文章主要介紹了javascript與jquery中的this關(guān)鍵字用法,結(jié)合實例形式簡單分析了this關(guān)鍵字用于獲取當(dāng)前對象的使用技巧,非常簡單易懂,需要的朋友可以參考下2015-12-12
利用JS實現(xiàn)獲取當(dāng)前系統(tǒng)電量情況
在前端瀏覽器中我們可以通過使用JavaScript的navigator.getBattery()方法來獲取當(dāng)前系統(tǒng)的電池情況,本文將介紹如何使用這個API以及它在實際應(yīng)用中的使用,需要的可以參考下2023-12-12
用js實現(xiàn)多域名不同文件的調(diào)用方法...2007-01-01
通常的解決辦法是把“答案”當(dāng)作整個問題容器的子元素，然后點擊父元素上的按鈕后展開對應(yīng)的子元素。通過父子元素的對應(yīng)關(guān)系來匹配標(biāo)題和答案。2008-09-09
這篇文章主要介紹了JavaScript交換變量常用4種方法解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-09-09