Jquery实现顶部弹出框特效

Jq制作的页面顶部动态弹出的提示框,可以用于提示信息的显示以及通知信息的显示

HTML代码

rush:xhtml;">
Jq顶部弹出框关闭">X

Css代码

rush: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代码

rush:js;"> 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

rush:css;">

JS

rush:js;">

HTML

rush:xhtml;">

<div class="overlay">

<div class="destroy">
<div class="sheet">
<div class="head">

jquery顶部动画弹出层

相关文章

jQuery表单验证提交:前台验证一(图文+视频)
jQuery表单验证提交:前台验证二(图文+视频)
jQuery如何实时监听获取input输入框的值
JQuery怎么判断元素是否存在
jQuery如何实现定时重定向
jquery如何获取复选框选中的值