HTML5仿苹果手机的面板合拢折叠效果-H5教程

这是一个HTML5折叠菜单，但更像是一个折叠面板，仿苹果手机的passbook应用中的代码例子，请在火狐或chrome下浏览。不知道有没有听说过手机琴菜单，觉得这一个从形式上来说，是挺像的。

<!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=utf-8" />
<title>passbook仿苹果手机的面板合拢折叠效果-html5特效</title>
<style>
.pocket{
width:300px;
height:460px;
padding: 10px;
overflow: hidden;
float: left;
border: 1px solid #EDEDED;
margin: 4px;
border-radius: 8px;
box-shadow:0 -5px 30px rgba(0,0,0,0.2) inset;
}
.passcard {
float: left;
width:300px;
height:380px;
color: #878787;
text-align: center;
padding-top: 5px;
margin-bottom: -320px;
cursor: pointer;
}
.starbucks{
background:url(/jscss/demoimg/201307/starbucks.png) no-repeat;
}
.airport{
background:url(/jscss/demoimg/201307/airport.png) no-repeat;
}
.paper{
border: 1px solid #EDEDED;
color: #A8A8A8;
text-align: center;
font:26px 'Segoe UI Light',Helvetica,Arial,'Sans-Serif';
background:-webkit-gradient(linear,left top,left bottom,color-stop(50%,rgba(229, 249, 249, 1)),color-stop(100%,rgba(240, 240, 240, 1)));
background: -webkit-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
background: -moz-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
background: -o-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
background: -ms-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
background: linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
background: -webkit-linear-gradient(top,rgba(255, 255, 255, 0.05) 0%,rgba(255, 255, 255, 0.05) 20%,rgba(0, 0, 0, 0.05) 100%);
border-radius:14px;
box-shadow:-2px -1px 2px rgba(0,0,0,0.1);
}
.pod {
background: none repeat scroll 0 0 white;
cursor: pointer;
height: 160px;
width: 300px;
border: 1px solid #CDCDCD;
border-radius: 6px;
float: left;
margin: 3px 15px 15px 3px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2),0 -4px 0 #E8E8E8 inset;
}
</style>
</head>
<body>
<p class='pocket'>
<p class='passcard starbucks'></p>
<p class='passcard starbucks'></p>
<p class='passcard starbucks'></p>
</p>
<p class='pocket'>
<p class='passcard airport'></p>
<p class='passcard airport'></p>
<p class='passcard airport'></p><p class='passcard airport'></p>
</p>
<p class='pocket'>
<p class='passcard paper'>passcard 1</p>
<p class='passcard paper'>passcard 2</p>
<p class='passcard paper'>passcard 3</p>
</p>
</body>
<script type="text/javascript" src="/ajaxjs/jquery-1.7.2.min.js?4.1.8"></script>
<script type="text/javascript">
$(function(){
$('.passcard').hover(function(){
$(this).stop(false,false).animate({'margin-bottom':'-100px'},400)
},function(){
$(this).stop(false,false).animate({'margin-bottom':'-320px'},400)
})
})
</script>
</script>
</html>

复制代码