javascript實(shí)現(xiàn)右下角廣告框效果
本文教大家用原生js實(shí)現(xiàn)的簡(jiǎn)單網(wǎng)頁(yè)主頁(yè)右下角的廣告框效果,利用好絕對(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)文章
將Datatable轉(zhuǎn)化成json發(fā)送前臺(tái)實(shí)現(xiàn)思路
將Datatable轉(zhuǎn)化成json可以將dt序列化成json,放到前臺(tái)的隱藏控件hidBoundary中,具體的實(shí)現(xiàn)如下,有類似需求的朋有可以參考下2013-09-09微信小程序template模板與component組件的區(qū)別和使用詳解
這篇文章主要介紹了微信小程序template模板與component組件的區(qū)別和使用詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05云開發(fā)進(jìn)階uniCloud-db組件與JQL語(yǔ)法的轉(zhuǎn)換詳解
這篇文章主要為大家介紹了云開發(fā)進(jìn)階uniCloud-db組件與JQL語(yǔ)法的轉(zhuǎn)換詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03js中Array.forEach跳出循環(huán)的方法實(shí)例
相信大家都知道forEach適用于只是進(jìn)行集合或數(shù)組遍歷,for則在較復(fù)雜的循環(huán)中效率更高,下面這篇文章主要給大家介紹了關(guān)于js中Array.forEach跳出循環(huán)的相關(guān)資料,需要的朋友可以參考下2021-09-09JavaScript該如何學(xué)習(xí) 怎樣輕松學(xué)習(xí)JavaScript
JavaScript該如何學(xué)習(xí)?如何輕松學(xué)習(xí)JavaScript?這篇文章主要介紹了輕松學(xué)習(xí)JavaScript的方法2017-06-06json對(duì)象轉(zhuǎn)為字符串,當(dāng)做參數(shù)傳遞時(shí)加密解密的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇json對(duì)象轉(zhuǎn)為字符串,當(dāng)做參數(shù)傳遞時(shí)加密解密的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06微信小程序?qū)W習(xí)總結(jié)(一)項(xiàng)目創(chuàng)建與目錄結(jié)構(gòu)分析
這篇文章主要介紹了微信小程序?qū)W習(xí)總結(jié)(一)項(xiàng)目創(chuàng)建與目錄結(jié)構(gòu),總結(jié)分析了微信小程序項(xiàng)目創(chuàng)建、配置方法以及目錄結(jié)構(gòu)、文件功能,需要的朋友可以參考下2020-06-06