jquery窗帘式介绍框

<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=\'#\'" /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>

你可能感兴趣的:(JavaScript,jquery,职场,休闲,窗帘式)