Jquery实现顶部弹出框特效
Jq制作的页面顶部动态弹出的提示框，可以用于提示信息的显示以及通知信息的显示。
Html代码
<divclass="tooltiptop"> <divclass="bg"></div> <divclass="main"><i>Jq顶部弹出框</i><spanonClick="ToolTipTop.Hide();"title="关闭">X</span></div> </div>
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.mainspan{
float:right;
color:#fff;
margin-right:20px;
cursor:pointer;
}
Jq代码
varToolTipTop={
Show:function(Msg){
$(".tooltiptop.maini").html(Msg);
$(".tooltiptop").css("display","block").animate({marginTop:"0px"},500);
},
Hide:function(){
$(".tooltiptop").animate({marginTop:"-50px"},500,function(){$(this).css("display","none")});
}
}
再给大家分享一例特效，效果也非常不错
CSS
<styletype="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
.demo{margin:0auto0auto;padding:200px000;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:1pxsolid#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:inset01px#fff,01px3pxrgba(34,25,25,0.4);
-moz-box-shadow:inset01px#fff,01px2pxrgba(34,25,25,0.4);
-webkit-box-shadow:inset01px#fff,01px3pxrgba(34,25,25,0.4);
}
*html,*htmlbody{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,*htmlbody{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:#fff9e2url("images/tips_bg.gif");
box-shadow:inset0-1px0#FFF,01px6pxrgba(0,0,0,.3);
-moz-box-shadow:inset0-1px0#FFF,01px6pxrgba(0,0,0,.3);
-webkit-box-shadow:inset0-1px0#FFF,01px6pxrgba(0,0,0,.3);
border-bottom:2pxsolid#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;
}
.sheeta.close{display:block;position:absolute;width:20px;height:20px;right:5px;top:5px;background:url("images/sheet_close.gif")no-repeat;}
.sheeta:hover.close{background-position:0-30px;}
.sheeta:active.close{background-position:0-60px;}
.sheet.head{padding:20px15px;border-bottom:1pxsolid#f6f4ee;}
.sheet.headh2{padding:0;font-size:18px;font-weight:400;color:#444;text-align:center;}
.sheet.body{padding:10px15px;border-top:1pxsolid#fff;}
</style>
JS
<scripttype="text/javascript"src="js/jquery-1.4.2.min.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
varh=$(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>
HTML
<divid="Header"></div> <divclass="demo"><aclass="action"href="javascript:void(0);">jqueryfloat浮动层弹出层页面加载特效</a></div> <divclass="overlay"></div> <divclass="destroy"> <divclass="sheet"> <divclass="head"> <h2>jquery顶部动画弹出层</h2> </div> <divclass="body"></div> <aclass="close"title="关闭"href="#"></a> </div> </div><!--sheetend-->