Jq制作的页面顶部动态弹出的提示框，可以用于提示信息的显示以及通知信息的显示。
Html代码
<div> <div></div> <div><i>Jq顶部弹出框</i><span 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 .main span { float: right; color: #fff; margin-right: 20px; cursor: pointer; }
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")}); } }
再给大家分享一例特效，效果也非常不错
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>
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>
HTML
<div id="Header"></div> <div><a href="javascript:void(0);">jquery float浮动层弹出层页面加载特效</a></div> <div></div> <div> <div> <div> <h2>jquery顶部动画弹出层</h2> </div> <div></div> <a title="关闭" href="#"></a> </div> </div><>
【Jquery实现顶部弹出框特效】相关文章：
★ jQuery插件bgStretcher.js实现全屏背景特效
★ jQuery实现限制textarea文本框输入字符数量的方法