recherche

Maison  >  Article  >  interface Web  >  jquery affiche automatiquement une couche publicitaire fermable dans le coin inférieur droit_jquery

jquery affiche automatiquement une couche publicitaire fermable dans le coin inférieur droit_jquery

WBOY
WBOYoriginal
2016-05-16 16:00:181223parcourir

Une fois que le calque apparaît dans le coin inférieur droit, il se masquera automatiquement après un certain temps.

code html : 

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>jquery右下角自动弹出关闭层</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;"> 一定时间后弹出层会自动隐藏
  </div>
  <div style="background-color:Silver; width:100%;height:150px;">计划</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">关闭</a>
    <span style=" line-height:50px;">右下角滑动弹出可重现层<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>

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment afficher le diagramme de relation entre la structure des caractères avec jQuery Dynamic effect_jqueryArticle suivant：Comment afficher le diagramme de relation entre la structure des caractères avec jQuery Dynamic effect_jquery

Articles Liés

Voir plus