您好,登錄后才能下訂單哦!
使用javascript怎么實現(xiàn)一個右下角廣告框效果?很多新手對此不是很清楚,為了幫助大家解決這個難題,下面小編將為大家詳細講解,有這方面需求的人可以來學習下,希望你能有所收獲。
1.JavaScript主要用來向HTML頁面添加交互行為。 2.JavaScript可以直接嵌入到HTML頁面,但寫成單獨的js文件有利于結(jié)構(gòu)和行為的分離。 3.JavaScript具有跨平臺特性,在絕大多數(shù)瀏覽器的支持下,可以在多種平臺下運行。
<!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)容是否對您有幫助呢?如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章,請關(guān)注億速云行業(yè)資訊頻道,感謝您對億速云的支持。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。