jquery版右下角弹窗效果

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    .ad {
      position: fixed;
      right: 0;
      bottom: 0;
      width: 230px;
      height: 120px;
      background-image: url(imgs/ad.jpg);
      display: none;
    }
    
    .ad span {
      position: absolute;
      right: 0;
      top: 0;
      width: 40px;
      height: 18px;
      background-image: url(imgs/h.jpg);
      cursor: pointer;
    }
  </style>
  <script src="../jquery-1.11.1.min.js"></script>
  <script>
    $(document).ready(function() {
      $(".ad")
        .slideDown("normal")
        .slideUp("slow")
        .fadeIn(1000)
        .children("span").click(function() {
          $(this).parent().fadeOut();
        });
    });
  </script>
</head>

<body>
  <div class="ani">我是内容</div>
  <div class="ad">
    <span></span>
  </div>
</body>

</html>

 

posted @ 2017-04-24 10:53  北漂阿猫  阅读(556)  评论(0编辑  收藏  举报