jquery2015-06-30 21:57:16 3402
Jq制作的页面顶部动态弹出的提示框,可以用于提示信息的显示以及通知信息的显示。
Html代码
<div class="tooltiptop"> <div class="bg"></div> <div class="main"><i>Jq顶部弹出框</i><span onClick="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 .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")}); } }
彭亚欧个人博客原创文章,转载请注明出处
文章关键词:Jq顶部弹出框,顶部提示库
文章固定链接:https://www.pengyaou.com/legendsz/front/codejq/MTE0.html
上一篇 Jq数字上下滚动切换插件
下一篇 QQ登录背景闪动效果