HTML5仿苹果手机的面板合拢折叠效果

时间：2016-03-06
       这是一个HTML5折叠菜单，但更像是一个折叠面板，仿苹果手机的passbook应用中的代码例子，请在火狐或chrome下浏览。不知道有没有听说过手机琴菜单，觉得这一个从形式上来说，是挺像的。
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>passbook仿苹果手机的面板合拢折叠效果-html5特效</title>
  6. <style>
  7. .pocket{
  8. width:300px;
  9. height:460px;
  10. padding: 10px;
  11. overflow: hidden;
  12. float: left;
  13. border: 1px solid #EDEDED;
  14. margin: 4px;
  15. border-radius: 8px;
  16. box-shadow:0 -5px 30px rgba(0,0,0,0.2) inset;
  17. }
  18. .passcard {
  19. float: left;
  20. width:300px;
  21. height:380px;
  22. color: #878787;
  23. text-align: center;
  24. padding-top: 5px;
  25. margin-bottom: -320px;
  26. cursor: pointer;
  27. }
  28. .starbucks{
  29. background:url(/jscss/demoimg/201307/starbucks.png) no-repeat;
  30. }
  31. .airport{
  32. background:url(/jscss/demoimg/201307/airport.png) no-repeat;
  33. }
  34. .paper{
  35. border: 1px solid #EDEDED;
  36. color: #A8A8A8;
  37. text-align: center;
  38. font:26px 'Segoe UI Light',Helvetica,Arial,'Sans-Serif';
  39. background:-webkit-gradient(linear,left top,left bottom,color-stop(50%,rgba(229, 249, 249, 1)),color-stop(100%,rgba(240, 240, 240, 1)));
  40. background: -webkit-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
  41. background: -moz-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
  42. background: -o-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
  43. background: -ms-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
  44. background: linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
  45. 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%);
  46. border-radius:14px;
  47. box-shadow:-2px -1px 2px rgba(0,0,0,0.1);
  48. }
  49. .pod {
  50. background: none repeat scroll 0 0 white;
  51. cursor: pointer;
  52. height: 160px;
  53. width: 300px;
  54. border: 1px solid #CDCDCD;
  55. border-radius: 6px;
  56. float: left;
  57. margin: 3px 15px 15px 3px;
  58. box-shadow: 0 0 3px rgba(0, 0, 0, 0.2),0 -4px 0 #E8E8E8 inset;
  59. }
  60. </style>
  61. </head>
  62. <body>
  63. <div class='pocket'>
  64. <div class='passcard starbucks'></div>
  65. <div class='passcard starbucks'></div>
  66. <div class='passcard starbucks'></div>
  67. </div>
  68. <div class='pocket'>
  69. <div class='passcard airport'></div>
  70. <div class='passcard airport'></div>
  71. <div class='passcard airport'></div><div class='passcard airport'></div>
  72. </div>
  73. <div class='pocket'>
  74. <div class='passcard paper'>passcard 1</div>
  75. <div class='passcard paper'>passcard 2</div>
  76. <div class='passcard paper'>passcard 3</div>
  77. </div>
  78. </body>
  79. <script type="text/javascript" src="/ajaxjs/jquery-1.7.2.min.js"></script>
  80. <script type="text/javascript">
  81. $(function(){
  82. $('.passcard').hover(function(){
  83. $(this).stop(false,false).animate({'margin-bottom':'-100px'},400)
  84. },function(){
  85. $(this).stop(false,false).animate({'margin-bottom':'-320px'},400)
  86. })
  87. })
  88. </script>
  89. </script>
  90. </html>
复制代码

上一篇：基于HTML5制作在线上海地铁图 下一篇：html5的离线存储问题汇总

相关文章

最新文章

Copyright © 2022-2023 HTML5模板网 版权所有并保留所有权