js,jq 右下角广告窗

最新推荐文章于 2022-02-15 20:58:14 发布

豆i浆

最新推荐文章于 2022-02-15 20:58:14 发布

阅读量324

点赞数

分类专栏： jQuery javascript 文章标签：广告 javascript

本文链接：https://blog.csdn.net/sinat_19327991/article/details/72578733

版权

jQuery 同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

javascript

28 篇文章 0 订阅

订阅专栏

效果预览：

这里写图片描述

JQ：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            a{
                text-decoration: none;
            }
            #banner{
                width: 350px;
                height: auto;
                position: fixed;
                right: 0;
                bottom: 0;
            }
            .banner_content{
                position: relative;
            }
            .img{
                width: 100%;
            }
            #off_banner{
                position: absolute;
                top: 0;
                right: 0;
                display: block;
                width: 30px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                color: white;
                background-color: #808080;
            }
            #off_banner:hover{
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id="banner">
            <div class="banner_content">
                <span id="off_banner">x</span>
                <a href="javascript:void(0)">
                    <img class="img" src="../img/P_03.jpg" alt="广告图片" />
                </a>
            </div>
        </div>
        <script type="text/javascript" src="../jq/jquery-1.7.2.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#off_banner").click(function(){
                    $("#banner").css("display","none");
                });
            });
        </script>
    </body>
</html>

js：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            a{
                text-decoration: none;
            }
            #banner{
                width: 350px;
                height: auto;
                position: fixed;
                right: 0;
                bottom: 0;
            }
            .banner_content{
                position: relative;
            }
            .img{
                width: 100%;
            }
            #off_banner{
                position: absolute;
                top: 0;
                right: 0;
                display: block;
                width: 30px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                color: white;
                background-color: #808080;
            }
            #off_banner:hover{
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id="banner">
            <div class="banner_content">
                <span id="off_banner">x</span>
                <a href="javascript:void(0)">
                    <img class="img" src="../img/P_03.jpg" alt="广告图片" />
                </a>
            </div>
        </div>
        <script type="text/javascript">
            window.onload = function(){
                var banner_box = document.getElementById("banner");
                var off_banner = document.getElementById("off_banner");

                off_banner.onclick = function(){
                    banner_box.style.display = "none";
                }
            }
        </script>
    </body>
</html>

豆i浆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js,jq 右下角广告窗

效果预览：JQ：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0;
复制链接

扫一扫