建站教学网,让你建站更便捷和轻松!
您当前的位置:首页 > 网页制作 > Javascript/Ajax

可关闭隐藏内容的DIV+CSS+JS特效效果演示页 DIVCSS5

来源:建站教学网  时间:2018-12-03 18:57:50

 

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>可关闭隐藏内容的DIV+CSS+JS特效效果演示页 DIVCSS5</title>
 
<script type="text/javascript" src="jquery.js"></script>
 
<script type="text/javascript">
$(document).ready(function(){
  
$(".pane .delete").click(function(){
$(this).parents(".pane").animate({ opacity: 'hide' }, "slow");
});
 
});
</script>
 
<style type="text/css">
body {
margin: 10px auto;
font-size:12px; text-align:center;
}
.box{ margin:0 auto; text-align:left; width:400px;}
h3 {
margin: 0;
padding: 0 0 .3em;
}
p {
margin: 0;
padding: 0 0 .5em;
}
.pane {
background: #edf5e1;
padding: 10px 20px 10px;
position: relative;
border-top: solid 2px #c4df9b;
}
.pane .delete {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
</style>
</head>
 
<body>
<div class="box">
<hr />
<div class="pane">
<h3>DIV+CSS实例</h3>
<p>DIV CSS实例代码演示</p>
<img src="images/btn-delete.gif" alt="delete" class="delete" />
</div>
<div class="pane">
<h3>CSS</h3>
<p>CSS DIV</p>
<img src="images/btn-delete.gif" alt="delete" class="delete" />
</div>
<div class="pane">
<h3>css教程</h3>
<p>找css教程就到DIVCSS5</p>
<img src="images/btn-delete.gif" alt="delete" class="delete" />
</div>
<div class="pane">
<h3>DIVCSS5</h3>
<p>DIVCSS5提供CSS问题解答、CSS论坛、css教程</p>
<img src="images/btn-delete.gif" alt="delete" class="delete" />
</div>
<div class="pane">
<h3>CSS</h3>
<p>学习CSS到DIVCSS5</p>
<img src="images/btn-delete.gif" alt="delete" class="delete" />
</div>
 
</body>
</html>
 

责任编辑:风中的自由

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
CopyRight 2008-2019, JZREAD.COM, Inc. All Rights Reserved
皖ICP备09015033号