javascript實(shí)現(xiàn)右下角廣告框效果
更新時(shí)間：2017年02月01日 10:15:41 作者：Jack-小俊
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)右下角廣告框效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文教大家用原生js實(shí)現(xiàn)的簡(jiǎn)單網(wǎng)頁主頁右下角的廣告框效果，利用好絕對(duì)定位，點(diǎn)擊X關(guān)閉廣告，里面的內(nèi)容不管動(dòng)圖或者視頻都可以。
代碼最簡(jiǎn)潔，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,這可以是一個(gè)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);
};
//添加點(diǎn)擊事件
$("icon").onclick=function(){
$("advbox").className = "hide";
};
$("resetadv").onmouseover=function(){
$("advbox").className = "show";
};
})();
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了微信小程序-form表單提交，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Electron 結(jié)合 Selenium + chromedriver
這篇文章主要介紹了Electron 結(jié)合 Selenium + chromedriver 驅(qū)動(dòng)服務(wù)實(shí)現(xiàn)瀏覽器多開思路詳解,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-07-07
用Div仿showModalDialog模式菜單的效果的代碼
用Div仿showModalDialog模式菜單的效果的代碼...2007-03-03
BootStrap框架個(gè)人總結(jié)(bootstrap框架、導(dǎo)航條、下拉菜單、輪播廣告carousel、柵格系統(tǒng)布局、標(biāo)簽頁
這篇文章主要介紹了BootStrap框架個(gè)人總結(jié)(bootstrap框架、導(dǎo)航條、下拉菜單、輪播廣告carousel、柵格系統(tǒng)布局、標(biāo)簽頁tabs、模態(tài)框、菜單定位)的相關(guān)資料,需要的朋友可以參考下2016-12-12
JS實(shí)現(xiàn)不規(guī)則TAB選項(xiàng)卡效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)不規(guī)則TAB選項(xiàng)卡效果代碼,通過簡(jiǎn)單的JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)變換元素樣式實(shí)現(xiàn)不規(guī)則選項(xiàng)卡效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-09-09
javascript與jquery中的this關(guān)鍵字用法實(shí)例分析
這篇文章主要介紹了javascript與jquery中的this關(guān)鍵字用法,結(jié)合實(shí)例形式簡(jiǎn)單分析了this關(guān)鍵字用于獲取當(dāng)前對(duì)象的使用技巧,非常簡(jiǎn)單易懂,需要的朋友可以參考下2015-12-12
利用JS實(shí)現(xiàn)獲取當(dāng)前系統(tǒng)電量情況
在前端瀏覽器中我們可以通過使用JavaScript的navigator.getBattery()方法來獲取當(dāng)前系統(tǒng)的電池情況,本文將介紹如何使用這個(gè)API以及它在實(shí)際應(yīng)用中的使用,需要的可以參考下2023-12-12
用js實(shí)現(xiàn)多域名不同文件的調(diào)用方法
用js實(shí)現(xiàn)多域名不同文件的調(diào)用方法...2007-01-01
通常的解決辦法是把“答案”當(dāng)作整個(gè)問題容器的子元素，然后點(diǎn)擊父元素上的按鈕后展開對(duì)應(yīng)的子元素。通過父子元素的對(duì)應(yīng)關(guān)系來匹配標(biāo)題和答案。2008-09-09
這篇文章主要介紹了JavaScript交換變量常用4種方法解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09