jquery弹出层的显示特效和消除特效

最新推荐文章于 2021-06-05 06:50:56 发布

Wismyluckstar

最新推荐文章于 2021-06-05 06:50:56 发布

阅读量1.1k

点赞数

分类专栏： WEB前端文章标签： jquery 动画 css html

本文链接：https://blog.csdn.net/u014492098/article/details/41311697

版权

WEB前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

最近在做一个关于弹出层的，所以做了一篇弹出层和消除的效果，很简单，就是利用div缓慢透明实现动画效果。这也是我的第一篇博客，不喜勿喷，谢谢。希望能帮到你。

记得加上juqeryxxx.js（加上之后才能使用jquery）

<html>
<head>
<style>
.black_overlay {
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index: 1001;
	-moz-opacity: 0.8;
	opacity: .80;
	filter: alpha(opacity = 80);
}

.white_content {
	display: none;
	position: absolute;
	top: 25%;
	left: 32%;
	width: 400px;
	height: 200px;
	padding: 0px;
	border: 2px solid #F7F8F8;
	background-color: white;
	z-index: 1002;
	overflow: auto;
	-webkit-border-radius: 5px;/* chrom椭圆? */
	-moz-border-radius: 5px;/* huohu div椭圆 */
}

.title {
	height: 35px;
	width: 400px;
	background-color: #F7F8F8;
	z-index: 1002;
	font-size: 18;
}
.titleMainName{ 
    width:100px;
    height:30px;
    padding-left: 10px;
    margin-left:5px;
    padding-top:2px;
    align:left;
    font-size:18px;
    font-weight:bold;
    position: absolute;
    
}
.titleDivClose{
    width:20px;
    height:30px;
    float:right;
    margin-left:375px;  
    font-size:24px;
    color:blue;
    position: absolute;
    font-weight: bold;
}
</style>
<script>
function xxx(){
alert("xxx");
  document.getElementById("light").style.display="block";
  document.getElementById("fade").style.display="block";
}
</script>

</head>
<body>
<div id="light" class="white_content">
		<div id="title" class="title" name="title">
			<p>
		<font class="titleMainName" id="titleMainName" name="titleMainName"">邮箱信息</font> 
			<font class="titleDivClose" id="titleDivClose" name="titleDivClose"><a href="javascript:void(0)" οnclick="$('#light').animate({ opacity: 'hide'}, 'slow');$('#fade').animate({opacity: 'hide' }, 'slow')">x</a></font>
				</p>
				</div>
				</div>
				<div id="fade" class="black_overlay"></div>
<a οnclick="xxx()">xxxx</a>

</body></html>

代码：jquery： $("#light").animate({opacity:"hide"}, "slow");//隐藏div
$("#fade").animate({opacity:"hide"}, "slow");//隐藏后面的div
$("#light").animate({opacity:"show"}, "slow");//显示
$("#fade").animate({opacity:"show"}, "slow");
HTML代码：<div id="light" class="white_content">
<div id="title" class="title" name="title">
<p>
<font class="titleMainName" id="titleMainName" name="titleMainName" "><h2>客户信息</h2>
</font> <font class="titleDivClose" id="titleDivClose" name="titleDivClose"
><h2><a href="javascript:void(0)" οnclick="$('#light').animate({ opacity: 'hide'}, 'slow');$('#fade').animate({opacity: 'hide' }, 'slow')">X</a></h2>
</font>
</p>
</div>
<div id="customerInfo" name="customerInfo" class="customerInfo">

DIV CSS样式自行修改，触发事件自己写~
</div>
</div>
<div id="fade" class="black_overlay"></div>
CSS代码：.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity = 80);
}

.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 665px;
height: 50%;
padding: 0px;
border: 2px solid #F7F8F8;
background-color: white;
z-index: 1002;
overflow: auto;
-webkit-border-radius: 5px;/* chrom椭圆? */
-moz-border-radius: 5px;/* huohu div椭圆 */
}
.title {
height: 35px;
width: 100%;
background-color: #F7F8F8;
z-index: 1002;

font-size: 18;
}
.titleMainName{
width:100px;
height:30px;
padding-left: 10px;
margin-left:5px;
padding-top:9px;
align:left;
font-size:18px;
font-weight:bold;
position: absolute;

}
.titleDivClose{
width:10px;
height:30px;
padding-top:7px;
float:right;
margin-left:635px;

position: absolute;
}
.customerInfo{
width:78%;
height:80%;
cursor:pointer;/*指针 */
text-decoration:none;/* 下划线 */
font-size: 16px;
color:red;
padding-left: 80px;
padding-top:10px;
font-weight: bold;
position: absolute;
}