孙肖宁

屏幕右下角的广告的弹出和关闭
描述:当用户访问你的网页的时候,右下角缓慢弹出一个广告,并且随着页面的滑动与改变,时钟在同一位置。当鼠标点击关闭的...
扫描右侧二维码阅读全文
11
2018/05

屏幕右下角的广告的弹出和关闭

描述:当用户访问你的网页的时候,右下角缓慢弹出一个广告,并且随着页面的滑动与改变,时钟在同一位置。当鼠标点击关闭的时候,广告缓慢隐藏。(关闭按钮小编采用的是一张图片,广告也是一张图片)jquery的版本是1.8.
示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>屏幕右下角的广告的弹出和关闭</title>
    <style type="text/css">
        .ad {
            position: fixed;
            right: 0;
            bottom: 0;
            width: 230px;
            height: 120px;
            background-image: url(images/ad.jpg);
            display: none;
        }

        .ad span {
            position: absolute;
            right: 0;
            top: 0;
            width: 40px;
            height: 18px;
            background-image: url(images/h.jpg);
            cursor: pointer;
        }
    </style>
    <script src="../jquery.min.js"></script>
    <script>
        $(function () {
            $(".ad").slideUp(1000).fadeIn(1000).children("span").click(function () {
                $(this).parent().fadeOut(1000);
            })
        })
    </script>
</head>
<body>
<div class="ani">屏幕右下角的广告的弹出和关闭</div>
<div class="ad">
    <span></span>
</div>
</body>
</html>
Last modification:May 11th, 2018 at 04:38 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment