快捷導(dǎo)航

jquery右下角自動(dòng)彈出可關(guān)閉的廣告層

更新時(shí)間：2015年05月08日 09:55:05 投稿：hebedich

jQuery實(shí)現(xiàn)右下角自動(dòng)彈出可關(guān)閉的懸浮提示層特效。這種效果可以使用jQuery彈出層實(shí)現(xiàn)。有需要的小伙伴可以參考下。

右下角彈出層后，會(huì)在一定時(shí)間后自動(dòng)隱藏。

html代碼：

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>jquery右下角自動(dòng)彈出關(guān)閉層</title><base target="_blank"/>
  <script type="text/javascript" src="jquery/jquery-1.11.2.min.js"></script>
  <style type="text/css">
    * {
      margin: 0px;
      padding: 0px;
    }
    a {color:black;
    }
    #keleyislide {
      width: 300px;
      height: 200px;
      border: 1px solid #000;
      position: fixed;
      bottom: 2px;
      right: 2px;
      display: none;
      background-color: White;
      z-index:9999;
    }

      #keleyislide a {
        position: absolute;
        top: 8px;
        right: 8px;
        font-size: 12px;
        text-decoration: none;
        color: Blue;
      }

      #keleyislide h2 {
        font-size: 24px;
        text-align: center;
        font-family: "微軟雅黑";
      }

    #reshow {
      position: fixed;
      right: 2px;
      bottom: 2px;
      font-size: 12px;
      display: none;
      background-color: White;
      cursor: pointer;
      border: 1px solid #000;
    }
  </style>
</head>

<body>
  <div style="background-color:Green; width:100%;height:150px;">keleyi.com</div>
  <div style="background-color:Red; width:100%;height:150px;">歡迎</div>
  <div style="background-color:Yellow; width:100%;height:150px;"> 一定時(shí)間后彈出層會(huì)自動(dòng)隱藏
  </div>
  <div style="background-color:Silver; width:100%;height:150px;">計(jì)劃</div>
  <div style="background-color:Aqua; width:100%;height:150px;">aaaa</div>
  <div style="background-color:Fuchsia; width:100%;height:150px;">jihua</div>
  <div style="background-color:Green; width:100%;height:150px;">jb51.net</div>
  <div style="background-color:Blue; width:100%;height:150px;">bbbb</div>
  <div style="background-color:Olive; width:100%;height:150px;">歡迎光臨</div>
  <div style="background-color:Green; width:100%;height:150px;">randomvisit</div>
  <div style="background-color:Purple; width:100%;height:150px;">cccc</div>
  <div style="background-color:Green; width:100%;height:150px;">B</div>
  <div style="background-color:Lime; width:100%;height:150px;">myslider</div>
  <div style="background-color:Orange; width:100%;height:150px;">Jihua</div>
  <div id="reshow">你快回來</div>
  <div id="keleyislide">
    <a href="javaScript:void(0)" id="close" target="_self">關(guān)閉</a>
    <span style=" line-height:50px;">右下角滑動(dòng)彈出可重現(xiàn)層<br /></span>
  </div>
  <script type="text/javascript">
    function Jihua_Cnblogs_Com() { $("#kel"+"eyislide").slideDown("slow"); $("#reshow").hide(); }
    function KeleyiAutoHide() { $("#ke"+"leyislide").slideUp("slow"); $("#reshow").show(); }
    $(document).ready(function () {
      setTimeout(function () {
        Jihua_Cnblogs_Com();
      }, 1000)
      setTimeout(function () { KeleyiAutoHide(); },9000)
      $("#close").click(function () {
        KeleyiAutoHide();
      })
      $("#reshow").mouseover(function () {
        Jihua_Cnblogs_Com();       })
    })
  </script>
</body>
</html>

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章: