js,jq 右下角广告窗

来源：互联网发布：淘宝企业店铺优势缺点编辑：程序博客网时间：2024/05/22 14:16

效果预览：

这里写图片描述

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>

阅读全文

0 0