ホームページ ウェブフロントエンド H5 チュートリアル HTML5仿苹果手机的面板合拢折叠效果

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

May 17, 2016 am 09:07 AM

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




  1. passbook仿苹果手机的面板合拢折叠效果-html5特效
  2. .pocket{
  3. width:300px;
  4. height:460px;
  5. padding: 10px;
  6. overflow: hidden;
  7. float: left;
  8. border: 1px solid #EDEDED;
  9. margin: 4px;
  10. border-radius: 8px;
  11. box-shadow:0 -5px 30px rgba(0,0,0,0.2) inset;
  12. }
  13. .passcard {
  14. float: left;
  15. width:300px;
  16. height:380px;
  17. color: #878787;
  18. text-align: center;
  19. padding-top: 5px;
  20. margin-bottom: -320px;
  21. cursor: pointer;
  22. }
  23. .starbucks{
  24. background:url(/jscss/demoimg/201307/starbucks.png) no-repeat;
  25. }
  26. .airport{
  27. background:url(/jscss/demoimg/201307/airport.png) no-repeat;
  28. }
  29. .paper{
  30. border: 1px solid #EDEDED;
  31. color: #A8A8A8;
  32. text-align: center;
  33. font:26px 'Segoe UI Light',Helvetica,Arial,'Sans-Serif';
  34. background:-webkit-gradient(linear,left top,left bottom,color-stop(50%,rgba(229, 249, 249, 1)),color-stop(100%,rgba(240, 240, 240, 1)));
  35. background: -webkit-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
  36. background: -moz-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
  37. background: -o-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
  38. background: -ms-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
  39. background: linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
  40. 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%);
  41. border-radius:14px;
  42. box-shadow:-2px -1px 2px rgba(0,0,0,0.1);
  43. }
  44. .pod {
  45. background: none repeat scroll 0 0 white;
  46. cursor: pointer;
  47. height: 160px;
  48. width: 300px;
  49. border: 1px solid #CDCDCD;
  50. border-radius: 6px;
  51. float: left;
  52. margin: 3px 15px 15px 3px;
  53. box-shadow: 0 0 3px rgba(0, 0, 0, 0.2),0 -4px 0 #E8E8E8 inset;
  54. }














  • passcard 1

  • passcard 2

  • passcard 3




  • $(function(){
  • $('.passcard').hover(function(){
  • $(this).stop(false,false).animate({'margin-bottom':'-100px'},400)
  • },function(){
  • $(this).stop(false,false).animate({'margin-bottom':'-320px'},400)
  • })
  • })


  • 复制代码

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

    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

    ホットな記事タグ

    メモ帳++7.3.1

    メモ帳++7.3.1

    使いやすく無料のコードエディター

    SublimeText3 中国語版

    SublimeText3 中国語版

    中国語版、とても使いやすい

    ゼンドスタジオ 13.0.1

    ゼンドスタジオ 13.0.1

    強力な PHP 統合開発環境

    ドリームウィーバー CS6

    ドリームウィーバー CS6

    ビジュアル Web 開発ツール

    SublimeText3 Mac版

    SublimeText3 Mac版

    神レベルのコード編集ソフト(SublimeText3)

    ViewPortメタタグを使用して、モバイルデバイスのページスケーリングを制御するにはどうすればよいですか? ViewPortメタタグを使用して、モバイルデバイスのページスケーリングを制御するにはどうすればよいですか? Mar 13, 2025 pm 08:00 PM

    ViewPortメタタグを使用して、モバイルデバイスのページスケーリングを制御するにはどうすればよいですか?

    HTML5 Webサイトにオーディオを追加する方法は? HTML5 Webサイトにオーディオを追加する方法は? Mar 10, 2025 pm 03:01 PM

    HTML5 Webサイトにオーディオを追加する方法は?

    HTML5ページの可視性APIを使用して、ページが表示されたときに検出するにはどうすればよいですか? HTML5ページの可視性APIを使用して、ページが表示されたときに検出するにはどうすればよいですか? Mar 13, 2025 pm 07:51 PM

    HTML5ページの可視性APIを使用して、ページが表示されたときに検出するにはどうすればよいですか?

    ユーザー入力にHTML5フォームを使用する方法は? ユーザー入力にHTML5フォームを使用する方法は? Mar 10, 2025 pm 02:59 PM

    ユーザー入力にHTML5フォームを使用する方法は?

    Geolocation APIでユーザーの場所のプライバシーと許可を処理するにはどうすればよいですか? Geolocation APIでユーザーの場所のプライバシーと許可を処理するにはどうすればよいですか? Mar 18, 2025 pm 02:16 PM

    Geolocation APIでユーザーの場所のプライバシーと許可を処理するにはどうすればよいですか?

    HTML5通知APIを使用してデスクトップ通知を表示するにはどうすればよいですか? HTML5通知APIを使用してデスクトップ通知を表示するにはどうすればよいですか? Mar 13, 2025 pm 07:57 PM

    HTML5通知APIを使用してデスクトップ通知を表示するにはどうすればよいですか?

    インタラクティブなユーザーインターフェイスにHTML5ドラッグアンドドロップAPIを使用するにはどうすればよいですか? インタラクティブなユーザーインターフェイスにHTML5ドラッグアンドドロップAPIを使用するにはどうすればよいですか? Mar 18, 2025 pm 02:17 PM

    インタラクティブなユーザーインターフェイスにHTML5ドラッグアンドドロップAPIを使用するにはどうすればよいですか?

    HTML5とJavaScriptでインタラクティブなゲームを作成する方法は? HTML5とJavaScriptでインタラクティブなゲームを作成する方法は? Mar 10, 2025 pm 06:34 PM

    HTML5とJavaScriptでインタラクティブなゲームを作成する方法は?

    See all articles