Maison > interface Web > js tutoriel > Jquery implémente la boîte pop-up supérieure effect_jquery

Jquery implémente la boîte pop-up supérieure effect_jquery

WBOY
Libérer: 2016-05-16 15:46:12
original
1321 Les gens l'ont consulté

La boîte d'invite contextuelle dynamique en haut de la page produite par Jq peut être utilisée pour afficher des informations d'invite et des informations de notification.

Code HTML

<div class="tooltiptop">
 <div class="bg"></div>
 <div class="main"><i>Jq顶部弹出框</i><span onClick="ToolTipTop.Hide();" title="关闭">X</span></div>
</div>
Copier après la connexion

Code CSS

body {
  margin: 0;
  padding: 0;
}
.tooltiptop {
  width: 100%;
  height: 50px;
  margin-top:-50px;
  display:none;
}
.tooltiptop .bg {
  width: 100%;
  background-color: #333;
  height: 50px;
  opacity: .7;
  position: absolute;
  margin: 0;
}
.tooltiptop .main {
  width: 100%;
  position: absolute;
  margin: 0;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #fff;
}
.tooltiptop .main span {
  float: right;
  color: #fff;
  margin-right: 20px;
  cursor: pointer;
}
Copier après la connexion

Code Jq

var ToolTipTop={
  Show:function(Msg){
    $(".tooltiptop .main i").html(Msg);
    $(".tooltiptop").css("display","block").animate({marginTop:"0px"},500);
  },
  Hide:function(){
    $(".tooltiptop").animate({marginTop:"-50px"},500,function(){$(this).css("display","none")});
  }
}
Copier après la connexion

Permettez-moi de partager avec vous un autre exemple d'effets spéciaux, l'effet est également très bon

CSS

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
.demo{margin:0 auto 0 auto;padding:200px 0 0 0;width:400px;text-align:center;font-size:18px;}
.demo .action{color:#3366cc;text-decoration:none;font-family:"微软雅黑","宋体";}

#Header{
 position:fixed;z-index:9999999;top:0;right:0;left:0;height:38px;border-bottom:1px solid #e0dede;width:100%;
 background-color:#F7F7F7;
 background-image:linear-gradient(#fff, #f7f6f5);
 background-image:-moz-linear-gradient(#fff, #f7f6f5);
 background-image:-o-linear-gradient(#fff, #f7f6f5);
 background-image:-webkit-linear-gradient(#fff, #f7f6f5);
 
 box-shadow:inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);
 -moz-box-shadow:inset 0 1px #fff, 0 1px 2px rgba(34,25,25,0.4);
 -webkit-box-shadow:inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);
}
*html,*html body{background-image:url(about:blank);background-attachment:fixed;}
*html #Header{position:absolute;top:expression(eval(document.documentElement.scrollTop));}

.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:998;width:100%;height:100%;background:#f6f4f5;display:none;}
*html,*html body{background-image:url(about:blank);background-attachment:fixed;}
*html .destroy,*html .overlay{position:absolute;top:expression(eval(document.documentElement.scrollTop));}

.destroy{position:fixed;top:0px;left:50%;margin-left:-425px;*margin-left:-718px;_margin-left:-425px;margin-top:-292px;z-index:99996;opacity:0;filter:alpha(opacity=0);}
.sheet{position:relative;width:840px;height:290px;margin:auto;padding:0;background:#fff9e2 url("images/tips_bg.gif");
 box-shadow:inset 0 -1px 0 #FFF,0 1px 6px rgba(0,0,0,.3);
 -moz-box-shadow:inset 0 -1px 0 #FFF,0 1px 6px rgba(0,0,0,.3);
 -webkit-box-shadow:inset 0 -1px 0 #FFF,0 1px 6px rgba(0,0,0,.3);
 
 border-bottom:2px solid #efebda;
 border-bottom-left-radius:5px;
 border-bottom-right-radius:5px;
 -moz-border-bottom-left-radius:5px;
 -moz-border-bottom-right-radius:5px;
 -webkit-border-bottom-left-radius:5px;
 -webkit-border-bottom-right-radius:5px;
}
.sheet a.close{display:block;position:absolute;width:20px;height:20px;right:5px;top:5px;background:url("images/sheet_close.gif") no-repeat;}
.sheet a:hover.close{background-position:0 -30px;}
.sheet a:active.close{background-position:0 -60px;}
.sheet .head{padding:20px 15px;border-bottom:1px solid #f6f4ee;}
.sheet .head h2{padding:0;font-size:18px;font-weight:400;color:#444;text-align:center;}
.sheet .body{padding:10px 15px;border-top:1px solid #fff;}
</style>

Copier après la connexion

JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 
 var h = $(document).height();
 $(".overlay").css({"height": h }); 
 
 $(".action").click(function(){
 
 $(".overlay").css({'display':'block'}).animate({'opacity':'0.8'});
 
 $(".destroy").stop(true).animate({'margin-top':'40px','opacity':'1'},400);
 
 });
 
 $(".close").click(function(){
 
 $(".destroy").stop(true).animate({'margin-top':'-292px','opacity':'0'},800);

 $(".overlay").css({'display':'none'}).animate({'opacity':'0'});
 
 });
 
});
</script>

Copier après la connexion

HTML

<div id="Header"></div>

<div class="demo"><a class="action" href="javascript:void(0);">jquery float浮动层弹出层页面加载特效</a></div>

<div class="overlay"></div>

<div class="destroy">
 <div class="sheet">
 <div class="head">
  <h2>jquery顶部动画弹出层</h2>
 </div>
 <div class="body"></div>
 <a class="close" title="关闭" href="#"></a>
 </div>
</div><!--sheet end-->
Copier après la connexion

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal