jQuery顶部浮动弹出层动画弹出层特效



138 549 184



特效描述:顶部浮动弹出层 动画弹出层 弹出层特效,jquery顶部浮动弹出层,点击浮动层动画弹出层,弹出层从顶部动画滑动效果。jQuery下载。

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

2. HTML代码

<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>
<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>
<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-->
<div style="height:1200px;">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 顶部悬浮 底部悬浮 浮动导航菜单 右键菜单 html5动画导航菜单 图片广告 文字提示框 html5图片动画 对联广告 提示框/弹出层 html5文字动画 layer 叠加浮动层 html5表情动画 lightbox html5线条动画 Tooltip工具提示框 浮动提示框 html5飘落动画 html5弹窗动画 html5光标动画 html5悬停动画 加载动画 悬浮浮动漂浮 弹出层拖动 窗口提示框 浮动提示框 html5弹窗动画 html5动画h5动画 html5按钮动画

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到