<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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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>
共同學習，寫下你的評論
評論加載中...
作者其他優(yōu)質文章
