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 相关文章推荐
jQuery中outerWidth()方法用法实例
Jan 19 Javascript
DOM 高级编程
May 06 Javascript
使用JavaScript刷新网页的方法
Jun 04 Javascript
jQuery实现简单的点赞效果
May 29 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
Jan 28 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
Mar 08 Javascript
js解决movebox移动问题
Mar 29 Javascript
jQuery实现查找链接文字替换属性的方法
Jun 27 Javascript
React.js中常用的ES6写法总结(推荐)
May 09 Javascript
ES6基础之数组和对象的拓展实例详解
Aug 22 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
Jan 18 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
May 26 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
PHP 抓取网页图片并且另存为的实现代码
2010/03/24 PHP
基于Jquery的将DropDownlist的选中值赋给label的实现代码
2011/05/06 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
2011/05/24 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
2016/04/29 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
2016/08/17 Javascript
对javascript继承的理解
2016/10/11 Javascript
Vue.js -- 过滤器使用总结
2017/02/18 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
2017/06/04 Javascript
Angular 1.x个人使用的经验小结
2017/07/19 Javascript
vue toggle做一个点击切换class(实例讲解)
2018/03/13 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
原生js实现分页效果
2020/09/23 Javascript
Python正则表达式的使用范例详解
2014/08/08 Python
Python批量生成特定尺寸图片及图画任意文字的实例
2019/01/30 Python
Python3 itchat实现微信定时发送群消息的实例代码
2019/07/12 Python
Pytorch在dataloader类中设置shuffle的随机数种子方式
2020/01/14 Python
TFRecord文件查看包含的所有Features代码
2020/02/17 Python
Python爬虫进阶之爬取某视频并下载的实现
2020/12/08 Python
详解Python openpyxl库的基本应用
2021/02/26 Python
pytorch 把图片数据转化成tensor的操作
2021/03/04 Python
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
机械工程系毕业生求职信
2013/09/27 职场文书
土木工程毕业生自荐信
2013/11/12 职场文书
大学生的创业计划书就该这么写
2014/01/30 职场文书
年终总结会议主持词
2014/03/17 职场文书
小学优秀辅导员事迹材料
2014/05/11 职场文书
应届大学生求职信
2014/07/20 职场文书
生产操作工岗位职责
2014/09/16 职场文书
如何理解PHP核心特性命名空间
2021/05/28 PHP
python opencv旋转图片的使用方法
2021/06/04 Python
Java基础之详解HashSet的使用方法
2021/06/30 Java/Android