右下角弹出广告

最新推荐文章于 2022-10-07 09:44:11 发布

biggrand

最新推荐文章于 2022-10-07 09:44:11 发布

阅读量643

点赞数

CC 4.0 BY-SA版权

文章标签：广告

本文链接：https://blog.youkuaiyun.com/biggrand/article/details/78492626

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .dd{
            position: fixed;/*是固定定位，一窗口为参照物*/
            right: 0;
            bottom: 0;
            width: 230px;
            height: 120px;
            background-image: url(img/ad.jpg) ;
            display: none;
        }
         .dd span {
            position: absolute;
            right: 0;
            top: 0;
            width: 40px;
            height: 18px;
            background-image: url(img/h.jpg);
            cursor: pointer;/*让光标成为一只手*/
         }
    </style>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script>
        $(function(){
            //需求：然广告ad部分，先滑入，在滑出，在淡入。然后绑定事件，点击span弹出
           //步骤：  slideDown 从下面往上出现    slideDown从上往下消失    fadeIn淡入
            $(".dd").slideDown(1000).slideUp(1000).fadeIn(1000).children("span").click(function () {//找到span 点击时
              $(this).parent().fadeOut(1000);//从父标签淡出    这里的this代表.dd这个div
            });
            //第二种写法

// $(“.ad”).slideDown(1000, function () { //$ (“.ad”).slideUp(1000, function () {
// $(“.ad”).fadeIn(1000, function () { //$ (“.ad”).children(“span”).click(function () {
// $(this).parent().fadeOut(1000, function () {
// alert(“执行完毕！”);
// });
// });
// });
// });
// });

        });
    </script>
</head>
<body>
    <div class="dd">
        <span></span>
    </div>
</body>