导读：这是一个HTML5折叠菜单，但更像是一个折叠面板，仿苹果手机的passbook应用中的代码例子，请在火狐或chrome下浏览。不知道有没有听说过手机...
这是一个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>
- <div class='pocket'>
- <div class='passcard starbucks'></div>
- <div class='passcard starbucks'></div>
- <div class='passcard starbucks'></div>
- </div>
- <div class='pocket'>
- <div class='passcard airport'></div>
- <div class='passcard airport'></div>
- <div class='passcard airport'></div><div class='passcard airport'></div>
- </div>
- <div class='pocket'>
- <div class='passcard paper'>passcard 1</div>
- <div class='passcard paper'>passcard 2</div>
- <div class='passcard paper'>passcard 3</div>
- </div>
- </body>
- <script type="text/javascript" src="/ajaxjs/jquery-1.7.2.min.js"></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>
