javascript实现-右下角广告框效果

最新推荐文章于 2021-06-25 02:04:42 发布

Jack-小俊

最新推荐文章于 2021-06-25 02:04:42 发布

阅读量1.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： javascript html 文章标签： javascript 优化 html

本文链接：https://blog.youkuaiyun.com/garvisjack/article/details/54773878

javascript 同时被 2 个专栏收录

25 篇文章

订阅专栏

html

19 篇文章

订阅专栏

本文介绍了一种使用原生JS实现的网页右下角广告框效果，支持动图和视频展示，通过简单的代码实现了广告框的显示与隐藏功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

**以下是用原生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>