Jquery实现顶部弹出框特效


Posted in Javascript onAugust 08, 2015

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")});
  }
}

再给大家分享一例特效,效果也非常不错

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 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-->
Javascript 相关文章推荐
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
Jul 29 Javascript
javascript设计模式 封装和信息隐藏(上)
Jul 24 Javascript
javascript与有限状态机详解
May 08 Javascript
jQuery中prepend()方法用法实例
Dec 25 Javascript
javascript实现无限级select联动菜单
Jan 02 Javascript
ClearTimeout消除闪动实例代码
Feb 29 Javascript
利用python分析access日志的方法
Oct 26 Javascript
PHP+jquery+ajax实现分页
Dec 09 Javascript
Angularjs中使用layDate日期控件示例
Jan 11 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
Oct 22 Javascript
微信小程序webview实现长按点击识别二维码功能示例
Jan 24 Javascript
JS中==、===你分清楚了吗
Mar 04 Javascript
Jquery数字上下滚动动态切换插件
Aug 08 #Javascript
Jquery实现弹性滑块滑动选择数值插件
Aug 08 #Javascript
jQuery实现列表内容的动态载入特效
Aug 08 #Javascript
jQuery实现下拉框选择图片功能实例
Aug 08 #Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
Aug 08 #Javascript
jQuery实现的Div窗口震动效果实例
Aug 07 #Javascript
jQuery实现时尚漂亮的弹出式对话框实例
Aug 07 #Javascript
You might like
PHP下打开URL地址的几种方法小结
2010/05/16 PHP
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
对淘宝URL中ID提取的PHP代码
2013/09/01 PHP
php正则表达式获取内容所有链接
2015/07/24 PHP
thinkphp3.2.3 分页代码分享
2016/07/28 PHP
ThinkPHP中create()方法自动验证实例
2017/04/26 PHP
php + WebUploader实现图片批量上传功能
2019/05/06 PHP
解析offsetHeight,clientHeight,scrollHeight之间的区别
2013/11/20 Javascript
对Jquery中的ajax再封装,简化操作示例
2014/02/12 Javascript
JS阻止用户多次提交示例代码
2014/03/26 Javascript
js实现touch移动触屏滑动事件
2015/04/17 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
2016/08/02 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
ES6新数据结构Map功能与用法示例
2017/03/31 Javascript
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
react实现换肤功能的示例代码
2018/08/14 Javascript
Vue表单控件绑定图文详解
2019/02/11 Javascript
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
vue 自动化路由实现代码
2019/09/03 Javascript
微信小程序如何实现五星评价功能
2019/10/15 Javascript
[01:11:46]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第一场 2月23日
2021/03/11 DOTA
python实现的登陆Discuz!论坛通用代码分享
2014/07/11 Python
python检测远程服务器tcp端口的方法
2015/03/14 Python
Python模拟登陆实现代码
2017/06/14 Python
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
Python批量安装卸载1000个apk的方法
2020/04/10 Python
基于Python把网站域名解析成ip地址
2020/05/25 Python
JAVA程序员面试题
2012/10/03 面试题
个人查摆剖析材料
2014/02/04 职场文书
大学生个人自荐信样本
2014/03/02 职场文书
婚前财产公证书
2014/04/10 职场文书
爱心助学感谢信
2015/01/21 职场文书
2016猴年春节慰问信
2015/11/30 职场文书
css如何把元素固定在容器底部的四种方式
2022/06/16 HTML / CSS