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 相关文章推荐
从面试题学习Javascript 面向对象(创建对象)
Mar 30 Javascript
一个获取第n个元素节点的js函数
Sep 02 Javascript
jQuery 插件开发指南
Nov 14 Javascript
基于javascript实现简单的抽奖系统
Apr 15 Javascript
jQuery获取this当前对象子元素对象的方法
Nov 29 Javascript
jQuery+CSS3实现点赞功能
Mar 13 Javascript
Three.js获取鼠标点击的三维坐标示例代码
Mar 24 Javascript
JS库之Three.js 简易入门教程(详解之一)
Sep 13 Javascript
js变量声明var使用与不使用的区别详解
Jan 21 Javascript
浅析JavaScript异步代码优化
Mar 18 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
Jul 19 Javascript
Nest.js参数校验和自定义返回数据格式详解
Mar 29 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开发文件系统实例讲解
2006/10/09 PHP
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
PHP中通过trigger_error触发PHP错误示例
2015/06/23 PHP
Symfony核心类概述
2016/03/17 PHP
PHP简单预防sql注入的方法
2016/09/27 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
javascript中String对象的slice()方法分析
2014/12/20 Javascript
Javascript中的高阶函数介绍
2015/03/15 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
2016/06/21 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
2016/09/12 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
2016/09/23 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
详解javascript立即执行函数表达式IIFE
2017/02/13 Javascript
vue 权限认证token的实现方法
2018/07/17 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
[01:06:54]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第一场 1月24日
2021/03/11 DOTA
python连接mysql调用存储过程示例
2014/03/05 Python
使用C语言来扩展Python程序和Zope服务器的教程
2015/04/14 Python
python3实现ftp服务功能(客户端)
2017/03/24 Python
关于阿里云oss获取sts凭证 app直传 python的实例
2019/08/20 Python
python实现两个一维列表合并成一个二维列表
2019/12/02 Python
python super函数使用方法详解
2020/02/14 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
使用python计算三角形的斜边例子
2020/04/15 Python
Python 基于jwt实现认证机制流程解析
2020/06/22 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
python 合并多个excel中同名的sheet
2021/01/22 Python
美国在线宠物用品商店:Entirely Pets
2017/01/01 全球购物
德国综合购物网站:OTTO
2018/11/13 全球购物
幼儿教师个人求职信范文
2013/09/21 职场文书
初中三好学生事迹材料
2014/01/13 职场文书
服务之星获奖感言
2014/01/21 职场文书
国际贸易专业个人职业生涯规划
2014/02/15 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书