<html>
<head>
<title>jquery窗帘式介绍框_hackapple</title>
<style type="text/css">
p.flip
{
margin : 0px ;
padding : 2px ;
text-align : center ;
background-Color : e5eecc ;
border : solid 1px #c3c3c3 ;
}
div.panel
{
height : 90px ;
display : none ;
margin : 0px ;
padding : 5px ;
text-align : center ;
background-Color : f5eecc ;
border : solid 1px #c3c3c3 ;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>//加载jquery库
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle(1000); //利用slideToggle来实现窗帘式效果
});
});
</script>
</head>
<body>
<table border="0" cellpadding="0" cellpadding="0">
<tr>
<td width="415">
<div class="panel">
<p>51cto</p>
<p>在51cto能找到适合自己的技术文档</p>
</div>
<p class="flip"><input type="submit" value="查看详情" ></p>
</td>
</tr>
</table>
</body>
</html>
随时随地看视频
