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实例教程(19) 使用HoTMetal(7)
Dec 23 Javascript
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
Apr 20 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
Sep 24 Javascript
jquery.validate提示错误信息位置方法
Jan 22 Javascript
使用jQuery制作基础的Web图片轮播效果
Apr 22 Javascript
JavaScript的String字符串对象常用操作总结
May 26 Javascript
js实现非常棒的弹出div
Oct 06 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
Feb 13 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
Apr 12 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
Mar 06 Javascript
Canvas三种动态画圆实现方法说明(小结)
Apr 16 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的FTP学习(四)
2006/10/09 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
20个非常棒的 jQuery 幻灯片插件和教程分享
2011/08/23 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
2013/11/13 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
js实现按钮颜色渐变动画效果
2015/08/20 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
jQuery fadeOut 异步实例代码详解
2016/08/18 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
2017/04/12 Javascript
react-native fetch的具体使用方法
2017/11/01 Javascript
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
深入浅析js原型链和vue构造函数
2018/10/25 Javascript
Python实现新浪博客备份的方法
2016/04/27 Python
Python3学习笔记之列表方法示例详解
2017/10/06 Python
python 获取utc时间转化为本地时间的方法
2018/12/31 Python
Django模板导入母版继承和自定义返回Html片段过程解析
2019/09/18 Python
python GUI库图形界面开发之PyQt5结合Qt Designer创建信号与槽的详细方法与实例
2020/03/08 Python
Python基于os.environ从windows获取环境变量
2020/06/09 Python
pytorch加载语音类自定义数据集的方法教程
2020/11/10 Python
Python远程linux执行命令实现
2020/11/11 Python
python3爬虫中多线程的优势总结
2020/11/24 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
解决pytorch下出现multi-target not supported at的一种可能原因
2021/02/06 Python
如何用python爬取微博热搜数据并保存
2021/02/20 Python
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
计算机专业推荐信范文
2013/11/20 职场文书
外语系大学生自荐信范文
2014/03/01 职场文书
校友会致辞
2015/07/30 职场文书
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏