本文教大家用原生js實現的簡單網頁主頁右下角的廣告框效果，利用好絕對定位，點擊X關閉廣告，里面的內容不管動圖或者視頻都可以。
代碼最簡潔，js行為優化版，復制粘貼即可使用。
演示部分
<!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="結合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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
