本文教大家用原生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="/UploadFiles/2021-04-02/">以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。