• H5页面，上下滑动翻页（整页翻书切换效果）

    使用 H5页面，上下滑动翻页 修改

    页面间的切换：整页翻书的切换效果

    demo代码：

    1. html>
    2. <html>
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    6. <meta name="viewport" content="width=750, user-scalable=no">
    7. <meta http-equiv="pragma" content="no-cache">
    8. <meta http-equiv="Cache-Control" content="no-cache">
    9. <meta http-equiv="Expires" content="0">
    10. <meta name="apple-mobile-web-app-capable" content="yes">
    11. <meta name="apple-mobile-web-app-status-bar-style" content="black">
    12. <meta name="format-detection" content="telephone=no">
    13. <meta name="apple-mobile-web-app-title" content="">
    14. <title>整页翻书效果切换-支持PC、移动端上下滑动翻页title>
    15. <style>
    16. *{ margin:0px; padding:0px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0);}
    17. html{ max-width:750px; margin:0 auto;}
    18. body{ font-family:"PingFangSC-Regular","sans-serif","STHeitiSC-Light","微软雅黑","Microsoft YaHei"; font-size:28px; line-height:1.6; color:#212121;
    19.     -webkit-user-select:none; user-select:none;
    20.     -webkit-touch-callout:none; touch-callout:none;
    21. }
    22. html , body{ width:100%; height:100%; position:relative; overflow:hidden;}
    23.  
    24. /***************************/
    25. .page_box{ width:100%; height:100%; position:relative; overflow:hidden;
    26.   perspective: 800px;
    27. }
    28. .page_box::before{ /* content: ""; */ width: 50px; height:100%; /* z-index: 1; */ position: absolute; left: 0; top:0;
    29.   background-image: -webkit-linear-gradient(180deg , rgb(254,254,254) , rgb(250,250,250) , rgb(242,242,242) , rgb(221,221,221) , rgb(235,235,235) , rgb(245,244,247) , rgb(238,240,242));
    30. }
    31. .page{ width:calc(100% - 40px); height:calc(100% - 50px); position:absolute; left:25px; top:25px; overflow:hidden;
    32.    display:flex; flex-direction: column; justify-content:center; align-items:center;
    33.    box-shadow: 0 0 10px 0 rgba(0,0,0,.3);
    34.    transform-origin: left;
    35.    transform: rotateY(-2deg);
    36. }
    37. .page_body.hide{ display:none;}
    38.  
    39. .page.inTop{
    40.   -webkit-animation:ShowTop .8s ease-out both;
    41.           animation:ShowTop .8s ease-out both;
    42. }
    43. .page.outTop{
    44.   z-index:1;
    45.   -webkit-animation:HideTop 1.5s ease-out both;
    46.           animation:HideTop 1.5s ease-out both;
    47. }
    48. .page.inDown{
    49.   -webkit-animation:ShowDown .8s ease-out both;
    50.           animation:ShowDown .8s ease-out both;
    51. }
    52. .page.outDown{
    53.   z-index:1;
    54.   -webkit-animation:HideDown 1.5s ease-out both;
    55.           animation:HideDown 1.5s ease-out both;
    56. }
    57. @-webkit-keyframes ShowTop{
    58.   0%{ -webkit-transform:rotateY(3deg);}
    59.   100%{ -webkit-transform:rotateY(-2deg);}
    60. }
    61. @keyframes ShowTop{
    62.   0%{ transform:rotateY(3deg);}
    63.   100%{ transform:rotateY(-2deg);}
    64. }
    65. @-webkit-keyframes HideTop{
    66.   0%{ -webkit-transform:rotateY(-2deg);}
    67.   100%{ -webkit-transform:rotateY(-130deg);}
    68. }
    69. @keyframes HideTop{
    70.   0%{ transform:rotateY(-2deg);}
    71.   100%{ transform:rotateY(-130deg);}
    72. }
    73. @-webkit-keyframes ShowDown{
    74.   0%{ -webkit-transform:rotateY(3deg);}
    75.   100%{ -webkit-transform:rotateY(-2deg);}
    76. }
    77. @keyframes ShowDown{
    78.   0%{ transform:rotateY(3deg);}
    79.   100%{ transform:rotateY(-2deg);}
    80. }
    81. @-webkit-keyframes HideDown{
    82.   0%{ -webkit-transform:rotateY(-2deg);}
    83.   100%{ -webkit-transform:rotateY(-130deg);}
    84. }
    85. @keyframes HideDown{
    86.   0%{ transform:rotateY(-2deg);}
    87.   100%{ transform:rotateY(-130deg);}
    88. }
    89.  
    90. .arrow{ width:60px; height:52px; color: #f00; font-size: 36px; position:absolute; left:50%; margin-left: -30px; bottom:0;
    91.   -webkit-animation:fadeIn .5s 1s ease-in-out both;
    92.           animation:fadeIn .5s 1s ease-in-out both;
    93. }
    94. .arrow.hide{ display:none;}
    95. .arrow div:first-child , .arrow div:last-child{ display: flex; justify-content: center; align-items: center; width:60px; height: 40px; position:absolute; left:0;
    96.   -webkit-transform-origin:center top;
    97.           transform-origin:center top;
    98. }
    99. .arrow div:first-child{ top:0;
    100.   -webkit-animation:arrow .8s .5s ease-in-out infinite alternate;
    101.           animation:arrow .8s .5s ease-in-out infinite alternate;
    102. }
    103. .arrow div:last-child{ top:12px;
    104.   -webkit-animation:arrow .8s .8s ease-in-out infinite alternate;
    105.           animation:arrow .8s .8s ease-in-out infinite alternate;
    106. }
    107. @-webkit-keyframes arrow{
    108.   100%{ -webkit-transform:translateY(-50%); opacity:1;}
    109.   0%{ -webkit-transform:translateY(0); opacity:0;}
    110. }
    111. @keyframes arrow{
    112.   100%{ transform:translateY(-50%); opacity:1;}
    113.   0%{ transform:translateY(0); opacity:0;}
    114. }
    115. /***************************/
    116.  
    117. @-webkit-keyframes fadeInMinToMax{
    118.   0%{ -webkit-transform:scale(0); opacity:0;}
    119.   100%{ -webkit-transform:scale(1); opacity:1;}
    120. }
    121. @keyframes fadeInMinToMax{
    122.   0%{ transform:scale(0); opacity:0;}
    123.   100%{ transform:scale(1); opacity:1;}
    124. }
    125. .page{ font-size: 40px; background:url(data:image/jpg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wgARCAAkAn8DAREAAhEBAxEB/8QAGwABAQEBAQEBAQAAAAAAAAAAAAUGBAMCAQn/xAAdAQEAAwEBAQEBAQAAAAAAAAAABAUGBwMBAggJ/9oADAMBAAIQAxAAAAH+gH+J/wDWgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA97WJsOoZvEca14At7ij9ZDP8/vABs+u5TL8/vOSingelhF2fWM1iOL68AV9pTdtr4Zvm2gAGw65lc1hLvkz08D7leO06/lsRxbXgAAPVu+0ZDCcX17yAU9TV2dTXZPlulAGr6bmo+cspmVswBu+25DCcb1SN6gUNNWW9fW5TlWlAGo6Tnp9NJj4+4AG37RkcXyfSecSTU0tbMytmAPe4ien35yU0wAU9JWS6ab+xPYAV9fVyMhaAD3s4npJ8+SjngChpqydSTf2J7ACprqyXkbMAAAV9dUSMjbgD0nxeuy8eDPWAA69DA5630+IEsAWNdTx8jcAD0lReu78uDNTwB2X0DyienhWSwBT19XMyFoAKmprKmkhZfmWgAGr6jmo+XsZmWtAHq3faMhhOJa8AU9VV2dTXZPlmlAGo6bn52ckSMrcAPVu+05DCca1SN6gUNNWW9fW5TlWlG37RkMZyfS+dfKA672BpOgUeQ5FqwBf6LRecJEw96ANv2nIY/lOk8KyWB13kTUdEz+M4/qwBoN7R+XxEwd4ANn2TIZfmmj5KaYAAOmygett58OXswBR1dZw0/v8AFZMAFzcVMPD2wA+7OH3WvhOy9mAKeoq+Sp9OetsABa11HFyN4APWfD7NB4TshZixuaqPhrUAfM2PZ0FbIyV0AOvS1yP++SinACvtKWRk7pHAfsmPW1lbIxV0AOrQwf38feShmgCvsaSRmrdD9AP/xAAjEAEAAwEAAgIBBQEAAAAAAAADAQIEIBITABAFERQVMDFg/9oACAEBAAEFAv8AkBP2I+IYHjEEPO/NQucuIpHSfqX7OPO9sA+vjEEPbdloccZchSWgoJvukfra/wCPHw/o/jx8OMgw668pGfGLKSU1BAJxH48fCf8AfvKUOmzGRjxiykldYQCcV/Hj6rx4/I+X1sleCW5Sz3eeD2KUTM3ni2zRenBrcpV1fktSFEzN54na00/o/et4cHeTs2hXjgtCh8ukpbiNrxTit5rLakWOC0IHxElZ4jboinGMIZNuUjpxjxlctQwDcfx4+HGMIdNmQqHxiyklNgQCcR+PHxn/AH7ylDpqxkY/R/jx9d6+N/vOftbViKB4wZ6NG0ICeCwDIpT1p9gftTRiKB4w56L8256DznxDItT1p0d7HZ3VeQdCql7Wtx+6b1cFe1bO6LXjPoUvi3sluK7H9XFLTW2nQqR9U2PU+K2mstqa9eAdC+Kt0ng9TUPivxtTXpwCWKzrdLcFqah8f//EAC8RAAECBQMBBQgDAAAAAAAAAAMEEwABAgUgESExFRQiMlGhEBIjMEFhgcEzYJH/2gAIAQMBAT8B/qCkrQdYTXYz2N2UMxaVpTfz4rbiZ3bz3hEokYOuBCNCgd2M9+cbmpZ4i0rTF+CbFbcSvfAhCpeDrgQmkUXYz3yerHe/WNyUMh2i3LTFKybG5LjCKyGLcp7UHXHqx3tfSB4LlLIYt1yMU3x8bktMKbIItql4O+JLsZ6BEdicCtgBb/XEqUJ5aTlCdEJL4ZYltoTQMbOI7cjEXWUtcSpQm5lCdMFJiVCA3MDG1jRbkjuunyemo3fviUT0J0IQcSxUIhK+YTpmZbY9NRu4kG7CZCEPEsSogq+YTp2JbY9NRu66Y3JS0GLauMUrJsblcTCMyCLcoeDj1Y736xuSnsodfOLcuMUrJsbktKIrIYtqntYd8erH152geC5SyGLbcTFMyb2kuxnufSE5HRYLish1hFciu6T/ABjclxQ7Ai2qXuZYlux3udN4TEeF732wUqGQPQmuRnd/rjdlpQ6MxaVJS/jFTdju8+nPnCQjoZT8s1A6a+ZQgTCH4acVKQFenvU6wnplTxj05K/4PXFRTKrmEiUNHhpxXJgll36dYR0Sp4x6akd8E/8AcVEpVcwjSho8NPtPb0tRdZ0euKiUqufvCNGCninFWnEXx06wlAMdPdpxOjBUWWtOJJShGjBTPanFQlDXtVTCROIcu7TidGCrvTp3x//EAD4RAAAEAwUEBgYJBQEAAAAAAAEDBAUABhECFCAhMRITUcEkQWFxkeEWIjRSgfAQFSMwMkJyobElNVVgpfH/2gAIAQIBAT8B/wBQbUgr1aZOH5tfGHKVGn6tHciLevQa569/zrhk9lSOxqoFHUHnE1sSRuupqHS1r/IYWGVW41uvC2q9avzsAAj6ufUPHth7bxb3FWn4YERF6VJiPeEOYwtkpouf2Fb939eGVGQt1PG8+x9ffE2S4kbyb4iHLDLkstxreChZ0+//AIadVOA665w/totTiKf48sCdPvjtzCiUGi50I0rX646q933BZe8j0LabldqjfK/3io08PKDC93gldqKdnG7n6RNcuNyRKC1EFwCv4c8+zLlhlOXG5Wjvq7wiaGkpqV0IHLCXJbTcbtUb7/mK5eGkGFbo3c4JYainVxu5w5RNEttqRtvyHDJ8uJHAm+LRyDSJraS2pZ0cehLQ2g+A188KaS2i50Prff28IUkXVYpI90afvWCzd1C2aHZUlu54+rxphbXZW0nb8iHJ6Vug9IHC3TI5N5W4IhSpNVGb47XComx3VJbuI5dYhhbnFW3G78iHV7VuoheMLVNDi0lCSn0hSpNVGb47MfnTCZNjsalu4jlXWnL7n0sd7ruK5cfLCiXHN5wHkaw6zG4uw9IHC1P7g0+zwtWnLzt8fmOGxNjvddxWoccKdSakN3xOQw4zI4uxQEKMwwtT84NXsw+MOTircDd+fhLmx2KS3cB9XjTlhlhpJdlm4OibJbRt6QFqLSueGV5bbVbdfl0TQ1FNLjdyNMBZe8j0KaLnuP8As4ZXainVxu5+kTVLLcjSguRBcaD+Ea0HDKkuNytHfVwxNDSU1K6EDlgsWILkxpuN2qN91+uK5eGkGFbo3c4JYainVxu5w5RNErtqRtvqH6UUntFy+39uhckFKrUp/d/jAwN4uLklT9VoYfpVbim4VCKqBagztgIj62fWOteA64ZPYUjjejl2gafHWJrZCmk5IKcehLwr8/zhaZPaBbUd4qK5w0hyR3RYqI93TAyoxcXJGj4/+w9Sm2lNys8noC1u17cMnsKR2vpyyoAgzp88InBlSNJyS49eFlk9tNbkh539QWuGYBUfV7odkYoHBWm+eONtVHI1W2Ra2Rh9eV6+0AKTAtdwU54WJ8cEA9GNCz3hXmEOSo5Yq2z7W1aw+kjrcNnfBT9PnhblRyNSFsi1s2ofXlevtACk0LXwpzwsTyvQCIJjQs94V5w5KjliobZ9raHDZmd5BCJd7HZAeHbhQKDUqkLZI7Iw8PbgvThYUmhasj2U5/ShmN1KQDYsnBsgPu+eFKeYmOAwoaWod3xwV9BONC0n9ynnhZHRWgtDd7YWe8K84eXFUuVbSi3tD2BTCgmR1SoBsEnBZDP8vnB4iOuCwdbIUbZY0tV5Q7vrisShYPNC0Hd54WFyVoj6p7YWfhXnD84ql6obai3tD2BTC2zE6I02wQcFmz+nzi3aE9TtGZjg/8QAJhAAAQUAAQMDBQEAAAAAAAAAAQACERIgIiEyUhATMQMwQUJhYP/aAAgBAQAGPwL/ACDWJxA5Nbk3/VAszLhNmoswAjHzXuy6/wANTXszd4tZFmIRHaa932Y/PlmpXusFc+6/koHbmPz5I4AKuwVrkveuPw7P9r3JzfF3pQnMsKl5zAKJJtmhOZYVzOYBRJOaT9mk5kFQ85NCrvOaTmQVBOTQqX5pOYKv9LPuvFlUZj8+WYPa1quzpn3XqB8Obn++SOACrsFa+vUWNe5EeLsBiL2CKtyXvQp+2WyLFzUWeLsBiJaIq3Li/wDVCna7LbiS5qLN8SuZnLqFOk5i2ehXM5NHLkcxbPRcj6wHZ6FcnZ4FcjmA7XV2eC5HMB2f/8QAIxAAAQMCBgMBAAAAAAAAAAAAEQABICFxEDFBYGGBcJGx8f/aAAgBAQABPyHw+J5j6jxelb38B2e6eknu9Vi21fHq3iJH2Xc/AHtz2Pqsguz0Xqw2/P69J0TKwr7cz+/9t+jLdMBqLxcp+1/aK3y6+7/VKayskksS9L74dHj9xwKWpuA11TiRuOxMhIeLHIIig0WentLjMDjS7a0ScSHidR0t6R+f9jQGa0XBAhuonjgUXHjSia3Mf//aAAwDAQACAAMAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAApAAiAAsAC4ABAABoA1AAAC6AGYAHoAG4ASAAcAAymAAJAA9AAoAHoAC4ACAAAAwABYAFYADAAeAADAAoACQAHwAVAAqAAVACvACwDgA9AA9AAPADIAAgAHIAACgAAAAEAAUAAvAAoAD4EAATAArAAIAHYACgADQA/8QAKREAAQIEBQQDAQEBAAAAAAAAAREhACAx8EFRYXGhgZGx0cHh8RAwYP/aAAgBAwEBPxD/AJAB8q9r80jEgi5UyEoUIAh+3v3DHg7vx8dpW0gCgMqEojMeIEtDdZAbbdGSHfCoZgL9FJSgEgnBSyVXt5jFcil1+pW7caOKOzjDaEAMX759/MiHa7tH4ZuzpvoxT/GoVkwvnXPSnmVXIKQO9jJIXeOMuv5Ko8WL5h5B0vpzKQZCOl+9PyKOnqRRKKa36EJF6+KaGsoElx04pHUD9vkZvhK/tXqm/KfMBWUqAbt+8UebUeYIkRkUVS/mU0UA1gWlCisB7lLBUO4jbKMqafWErwghsCfPHEoEgRGIwimAbYJ03logG8Md43K8XlhKObh37vpn/jUJQmuy0lAKGlPMCiRLp9Wso4Mu7pDAAomQRxhKwKPyuS8SjEUTjHT9hXLnP5KnIBfJX63phA0EUYd8pVMZVMfVpLSnv11jQXeV9paKr2vaKn76dpajBML91RdOcZSJEUuw/B3ipPZF59y4v8UghSFLHBxxWWrQxwjrv2ijp6kUSimt+hBe6uGA/ea0/qWWBXGIZLzA91b3r+yAPgAN2sAiQEkkMFAFTEJ5lIDEVOl2YOzETcIq9ZXAADqKoMBDYK34kAQLXzT4gUQQJIogogUMMr0kR1Z+HhV0LrRfrCVJQA72K9IFvK9NJxVaA9Lrt7lK0IlH+tB2gWgoGCbpLVLXPJVKUlFoKhwmywPJRZa/Uowe439QDalOWwSUIdzyyveXNFeFgOWGJrj2/o2UpAs0qIAw4W8Ey2c130lZrAinJMMHVZTMswxHqW90uzCgKtFV/Eo9wN9dopGcMrPWVPVsCr9ay//EACkRAAIBAwMDBAIDAQAAAAAAAAERITFBUQAgYXGBoZGxwfDh8RAw0WD/2gAIAQIBAT8Q/wCQheddjLua20eWYJizZL1JMssiW0jmAdZDuSOyxoadEAFij4DOfXaJMM1SsCQtCGaiUcas5MkDEv3HOw4rI7fg0KpXAGXJC9A+/G0fMB7qsBP7fQMcDIYBNMqhIttnbLVBcwWIRUbBnTEMDhEj5dNhRFc94Xux40tISEo0vQzSxrb+g5mfzrrneRtehzE/jYElNRXOTmnnk6jriqoaGcmBlnbKhBkSQ4A0x5i0afs/vbIJTDJ5lLn/ADRsUH3p7bBo69WJ5z0zOpgffvvtPjiYpatsFVKnQGTUTKVC0EmmvXaW5VKZlmzv34JTmJ0HQzpglVOmdywFZVjtbGef0ek9tQYrY4mb1xxTa9p+V21IwmSCbLA61/G2JB4DjgZsrbZyggyD8EeY0WAaRQuvudpGeLbHFLe1dSMLDlDjIk+Nvq8x3u6/03vKyVmXjs9sQAR1/OXoepeT6r12mpxduO8sWpo3kIYt05p7c7RDGRYmOnnaKxlW0cO4IPjRAMgD+RHGGdp2gDZo4aPm001L8swoHMmuAPfaXVqsvNX+12zDQoOfvvqDJHY5PpTb6BK9q/edNLUD0Ofo+NhzM/nV1ivX0ou1L22v6UZWTz+tD2jU6iQgQR1Eg52uQIDQldhQac4xBVmfk+U9j/tPv3mUrFGKcylNV7aNig+9PbYNHXqxPOemZ0wX54P3zX+I4zgGU7FZzowrSB1F/jY0yZPqfkvsKaYgITStAahJkAs3O0SZCgwzLuS3aNLkKUKEENdH6NrAA6jR40dlHyP32FK5H1Y+Q/ehPE4ESTdQkIszNZJrtZdGTIWqKFvTtoWyQxy4832iXJZCuHIyxklmCWdY3MDgH9j33gFQyQ6dxoAF5aATlhdNpMKD2WggEyAIejO35fnR/a2iOSSQ6EWYzOgqEkULLljaPg0qrHDVAAyAvk42js0AXQQsQPG2qRQyGF00RYgBAMkTyX8tHwAycFWEeNqacSGmCLOhjroGMIjHlvbbWvblU2DS/wDLwOTt5ONCYJGOjo5H52WN404LaLBJFDHzFhbaVEJmSqfDQaef/Qdpo6DBI06DqoQqopI2f//EACkQAAADBwMEAwEBAAAAAAAAAAERIQAgMUFRYfBxgZGhscHREOHxMGD/2gAIAQEAAT8Q/wAhd1ahnGrdwK5q6BMMG666sZwgHs7bCgSCKdzHpKzKhGccwfmg2CUGWafwQeTdJop1q9kVCgCldcu2/vkHNDfe7Et0bUhuv8Z37vfWTpVBKMbtN9O4Xb18tqvFpm7sd+6Fat1XhzXe90pgtAjVynnd26ptmza4XYc0Gr0a4CC3MPLT69UsLcJbA0/HRogHdl+bfd8m71msFvqHMyrgVMXrKeeXN2AIhH8mw6nV0vK2mVm3YUFZ0zfcsPf+OPhiOkIUG7apYl6zy6m7fM2YT6QEyZ/rpQHkeHZ3JDnOhRdJlQMksnUQ7OumSBiELTezvXPBOeDF3CqfjBfDqNMi6IGvyYxdOXfqOOencXGA4XMQSDIlcyTuBMFgDS/Z2a+5KzLy3VeHNd73SmC2FBT5KUBVnf8AItneBmuScD3njCNlZhMBQyE1L9u6aBMA7/rQH98Ico7yYudY+zixFU7x9nLcQcv7iN01QKOCC93eMbquXSSp1cybol7mlaIZ1sJ2En1uKRWLFgFjkBT1F0jrAREOtBCjDIBEKJTV3XwoX1dOQENVZOONAKR1F3q8gdbgykEAEUQEdIiOVXJ2dCYjIbrLVgBHCpAU9R+eoCBiIRN0OjBH4ZJVYg1iYuolWpvTLlbAQQe3U40ZmGIzOzo4kzDbhLEHk3S8RxGB9hBggahRPIujheEphJFXf//Z) repeat-y; background-size:100%;}
    126. .page1_title{ width:80%; height:100px; line-height:100px; margin: 0 auto; text-align: center; font-size: 50px;
    127.   -webkit-animation:fadeInMinToMax .8s .4s ease-out both;
    128.           animation:fadeInMinToMax .8s .4s ease-out both;
    129. }
    130. .page1 .scroll_box{ width:80%; height:60vh; margin: 0 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
    131.   -webkit-animation:fadeInMinToMax 1.5s .4s ease-out both;
    132.           animation:fadeInMinToMax 1.5s .4s ease-out both;
    133. }
    134. .page2 .scroll_box{ width: 100%; height: 100%; text-align: center; overflow-y: auto; -webkit-overflow-scrolling: touch;}
    135. .page2 .scroll_box > div{ padding: 50px 0 80px 0;}
    136. .page2_body div:nth-child(1) , .page3_body div:nth-child(1){
    137.   -webkit-animation:fadeInMinToMax .8s .4s ease-out both;
    138.           animation:fadeInMinToMax .8s .4s ease-out both;
    139. }
    140. .page2_body div:nth-child(2) , .page3_body div:nth-child(2){
    141.   -webkit-animation:fadeInMinToMax .8s .5s ease-out both;
    142.           animation:fadeInMinToMax .8s .5s ease-out both;
    143. }
    144. .page2_body div:nth-child(3) , .page3_body div:nth-child(3){
    145.   -webkit-animation:fadeInMinToMax .8s .6s ease-out both;
    146.           animation:fadeInMinToMax .8s .6s ease-out both;
    147. }
    148. .page2_body div:nth-child(4) , .page3_body div:nth-child(4){
    149.   -webkit-animation:fadeInMinToMax .8s .7s ease-out both;
    150.           animation:fadeInMinToMax .8s .7s ease-out both;
    151. }
    152. .page2_body div:nth-child(5) , .page3_body div:nth-child(5){
    153.   -webkit-animation:fadeInMinToMax .8s .8s ease-out both;
    154.           animation:fadeInMinToMax .8s .8s ease-out both;
    155. }
    156. .page2_body div:nth-child(6) , .page3_body div:nth-child(6){
    157.   -webkit-animation:fadeInMinToMax .8s .9s ease-out both;
    158.           animation:fadeInMinToMax .8s .9s ease-out both;
    159. }
    160. .page2_body div:nth-child(7) , .page3_body div:nth-child(7){
    161.   -webkit-animation:fadeInMinToMax .8s 1s ease-out both;
    162.           animation:fadeInMinToMax .8s 1s ease-out both;
    163. }
    164. .page2_body div:nth-child(8) , .page3_body div:nth-child(8){
    165.   -webkit-animation:fadeInMinToMax .8s 1.1s ease-out both;
    166.           animation:fadeInMinToMax .8s 1.1s ease-out both;
    167. }
    168. .page2_body div:nth-child(9) , .page3_body div:nth-child(9){
    169.   -webkit-animation:fadeInMinToMax .8s 1.2s ease-out both;
    170.           animation:fadeInMinToMax .8s 1.2s ease-out both;
    171. }
    172. .page2_body div:nth-child(10) , .page3_body div:nth-child(10){
    173.   -webkit-animation:fadeInMinToMax .8s 1.3s ease-out both;
    174.           animation:fadeInMinToMax .8s 1.3s ease-out both;
    175. }
    176. style>
    177. head>
    178.  
    179. <body>
    180.  
    181. <div class="page_box">
    182.   <div class="page page1">
    183.     <div class="page_body hide page1_body">
    184.       <div class="page1_title">标题标题标题标题div>
    185.       <div class="scroll_box">
    186.         <div>
    187.           <p>行内滚动内容行内滚动内容行内滚动内容行内滚行内滚动内容行内滚动内容动内容行p>
    188.           <p>行内滚动内容行内滚动内容行内滚动内容行内滚行内滚动内容行内滚动内容动内容行p>
    189.           <p>行内滚动内容行内滚动内容行内滚动内容行内行内滚动内容行内滚动内容滚动内容行p>
    190.           <p>行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行p>
    191.           <p>行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行p>
    192.           <p>行内滚动内容行内滚动内容行内滚动内容行行内滚动内容行内滚动内容内滚动内容行p>
    193.           <p>行内滚动内容行内滚动内容行内滚动内容行内行内滚动内容行内滚动内容滚动内容行p>
    194.           <p>行内滚动内容行内滚动内容行内滚动内容行内行内滚动内容行内滚动内容滚动内容行p>
    195.         div>
    196.       div>
    197.     div>
    198.   div>
    199.   
    200.   <div class="page page2">
    201.     <div class="page_body hide page2_body scroll_box">
    202.       <div>
    203.         <div>22222222222div>
    204.         <div>22222222222div>
    205.         <div>22222222222div>
    206.         <div>22222222222div>
    207.         <div>22222222222div>
    208.         <div>22222222222div>
    209.         <div>22222222222div>
    210.         <div>22222222222div>
    211.         <div>22222222222div>
    212.         <div>22222222222div>
    213.         <div>22222222222div>
    214.         <div>22222222222div>
    215.         <div>22222222222div>
    216.         <div>22222222222div>
    217.         <div>22222222222div>
    218.         <div>22222222222div>
    219.         <div>22222222222div>
    220.         <div>22222222222div>
    221.         <div>22222222222div>
    222.         <div>22222222222div>
    223.         <div>22222222222div>
    224.         <div>22222222222div>
    225.         <div>22222222222div>
    226.         <div>22222222222div>
    227.         <div>22222222222div>
    228.         <div>22222222222div>
    229.       div>
    230.     div>
    231.   div>
    232.   
    233.   <div class="page page3">
    234.     <div class="page_body hide page3_body">
    235.       <div>33333333333div>
    236.       <div>33333333333div>
    237.       <div>33333333333div>
    238.       <div>33333333333div>
    239.       <div>33333333333div>
    240.       <div>33333333333div>
    241.       <div>33333333333div>
    242.       <div>33333333333div>
    243.       <div>33333333333div>
    244.       <div>33333333333div>
    245.     div>
    246.   div>
    247.   
    248.   <div class="arrow">
    249.     <div>
    250.       <svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2859"><path d="M491.42 412.298c7.887 12.378 6.427 28.995-4.381 39.803L204.196 734.944l-90.51-90.51c-12.496-12.497-12.496-32.758 0-45.255L396.53 316.337l0.265 0.265 89.974-89.975c12.497-12.496 32.758-12.496 45.255 0l395.98 395.98-90.51 90.51c-12.497 12.497-32.758 12.497-45.255 0L491.42 412.297z" p-id="2860">path>svg>
    251.     div>
    252.     <div>
    253.       <svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2859"><path d="M491.42 412.298c7.887 12.378 6.427 28.995-4.381 39.803L204.196 734.944l-90.51-90.51c-12.496-12.497-12.496-32.758 0-45.255L396.53 316.337l0.265 0.265 89.974-89.975c12.497-12.496 32.758-12.496 45.255 0l395.98 395.98-90.51 90.51c-12.497 12.497-32.758 12.497-45.255 0L491.42 412.297z" p-id="2860">path>svg>
    254.     div>
    255.   div>
    256. div>
    257.  
    258. <script type="text/javascript">
    259. // element 作用区域（所有执行翻页页面的父级元素DOM）
    260. // isLoop 是否循环执行翻页
    261. // needScrollClass 执行翻页页面内部可滚动元素样式名
    262. function setChangePage(element,isLoop,needScrollClass){
    263.   // console.log(element.querySelectorAll('.page'));
    264.   // console.log(element.querySelectorAll('.page').length);
    265.   // console.log(element.querySelector('.page'));
    266.   // console.log(element.querySelector('.page2'));
    267.   var pageData = {
    268.     curPage:1,
    269.     prevPage:null,
    270.     PageL:element.querySelectorAll('.page').length,
    271.     type:null,
    272.     canTouch:true,
    273.     startY:0,
    274.     endY:0,
    275.     diff:0,
    276.   }
    277.   var startEvt,moveEvt,endEvt;
    278.   if("ontouchstart" in window){
    279.     // 移动端用户滑动事件
    280.     startEvt = "touchstart";
    281.     moveEvt = "touchmove";
    282.     endEvt = "touchend";
    283.   }else{
    284.     // PC端鼠标移动事件
    285.     startEvt = "mousedown";
    286.     moveEvt = "mousemove";
    287.     endEvt = "mouseup";
    288.   }
    289.   element.addEventListener(startEvt, touchStart, false);
    290.   element.addEventListener(moveEvt, touchMove, false);
    291.   element.addEventListener(endEvt, touchEnd, false);
    292.   function touchStart(e){
    293.     pageData.startY = startEvt == "touchstart" ? e.touches[0].pageY : e.pageY;
    294.     pageData.endY = '';
    295.     pageData.diff = '';
    296.   }  
    297.   function touchMove(e){
    298.     e.preventDefault();
    299.     pageData.endY = startEvt == "touchstart" ? e.touches[0].pageY : e.pageY;
    300.     pageData.diff = pageData.endY - pageData.startY;
    301.   }
    302.   function touchEnd(e){
    303.     if(Math.abs(pageData.diff) > 150 && pageData.canTouch){
    304.       changeDoBefore(pageData.diff);
    305.     }
    306.     // setTimeout(function(){
    307.       pageData.startY = '';
    308.       pageData.endY = '';
    309.       pageData.diff = '';
    310.     // },500);
    311.   }
    312.   function changeDoBefore(diffNum){
    313.     if(diffNum > 0){
    314.       // 向下滑动进入前一页
    315.       pageData.type = 2;
    316.       if(pageData.curPage <= 1){
    317.         if(isLoop){
    318.           pageData.prevPage = 1;
    319.           pageData.curPage = pageData.PageL;
    320.           changeDo();
    321.         }
    322.       }else{
    323.         pageData.prevPage = pageData.curPage;
    324.         pageData.curPage--;
    325.         changeDo();
    326.       }
    327.     }else{
    328.       // 向上滑动进入下一页
    329.       pageData.type = 1;
    330.       if(pageData.curPage >= pageData.PageL){
    331.         if(isLoop){
    332.           pageData.prevPage = pageData.PageL;
    333.           pageData.curPage = 1;
    334.           changeDo();
    335.         }
    336.       }else{
    337.         pageData.prevPage = pageData.curPage;
    338.         pageData.curPage++;
    339.         changeDo();
    340.       }
    341.     }
    342.   }
    343.   function changeDo(){
    344.     if(pageData.type == 1){
    345.       element.querySelector('.page' + pageData.prevPage).classList.remove('inTop' , 'outTop' , 'inDown' , 'outDown');
    346.       element.querySelector('.page' + pageData.prevPage).classList.add('outTop');
    347.       element.querySelector('.page' + pageData.curPage).classList.remove('inTop' , 'outTop' , 'inDown' , 'outDown');
    348.       element.querySelector('.page' + pageData.curPage).classList.add('inTop');
    349.       element.querySelector('.page' + pageData.curPage).querySelector('.page_body').classList.remove('hide');
    350.     }else if(pageData.type == 2){
    351.       element.querySelector('.page' + pageData.prevPage).classList.remove('inTop' , 'outTop' , 'inDown' , 'outDown');
    352.       element.querySelector('.page' + pageData.prevPage).classList.add('outDown');
    353.       element.querySelector('.page' + pageData.curPage).classList.remove('inTop' , 'outTop' , 'inDown' , 'outDown');
    354.       element.querySelector('.page' + pageData.curPage).classList.add('inDown');
    355.       element.querySelector('.page' + pageData.curPage).querySelector('.page_body').classList.remove('hide');
    356.     }
    357.  
    358.     if(needScrollClass && startEvt == "touchstart"){
    359.       scrollEleData.canTouch = false;
    360.       setTimeout(function(){
    361.         scrollEleData.canTouch = true;
    362.       },500);
    363.     }
    364.  
    365.     pageData.canTouch = false;
    366.     setTimeout(function(){
    367.       pageData.canTouch = true;
    368.       element.querySelector('.page' + pageData.prevPage).querySelector('.page_body').classList.add('hide');
    369.     },500);
    370.     // 不循环切换时设置最后一页时隐藏向上箭头
    371.     if(pageData.curPage >= pageData.PageL){
    372.       if(!isLoop){
    373.         element.querySelector('.arrow').classList.add('hide');
    374.       }
    375.     }else{
    376.       if(!isLoop){
    377.         element.querySelector('.arrow').classList.remove('hide');
    378.       }
    379.     }
    380.     // 执行翻页页面内部可滚动时，设置进入页面后滚动条位置
    381.     if(needScrollClass && element.querySelector('.page' + pageData.curPage).querySelector('.' + needScrollClass)){
    382.       element.querySelector('.page' + pageData.curPage).querySelector('.' + needScrollClass).scrollTop = 0;
    383.     }
    384.   }
    385.   // 执行翻页页面内部可滚动（移动端需要）
    386.   if(needScrollClass && startEvt == "touchstart"){
    387.     var scrollEleData = {
    388.       canTouch:true,
    389.       startY:0,
    390.       endY:0,
    391.       diff:0,
    392.     }
    393.     // console.log(element.querySelectorAll('.' + needScrollClass).length);
    394.     element.querySelectorAll('.' + needScrollClass).forEach(function(item,index){
    395.       // console.log(item,index);
    396.       item.addEventListener("touchstart", scrollEleTouchStart, false);
    397.       item.addEventListener("touchmove", scrollEleTouchMove, false);
    398.       item.addEventListener("touchend", scrollEleTouchEnd, false);
    399.       function scrollEleTouchStart(e){
    400.         // e.stopPropagation();
    401.         element.removeEventListener("touchmove", touchMove, false);
    402.         scrollEleData.startY = e.touches[0].pageY;
    403.         scrollEleData.endY = '';
    404.         scrollEleData.diff = '';
    405.       }  
    406.       function scrollEleTouchMove(e){
    407.         scrollEleData.endY = e.touches[0].pageY;
    408.         scrollEleData.diff = scrollEleData.endY - scrollEleData.startY;
    409.       }
    410.       function scrollEleTouchEnd(e){
    411.         element.addEventListener("touchmove", touchMove, false);
    412.         // console.log(scrollEleData.canTouch);
    413.         if(Math.abs(scrollEleData.diff) > 150 && scrollEleData.canTouch){
    414.           changeDoBefore(scrollEleData.diff);
    415.         }
    416.         // setTimeout(function(){
    417.           scrollEleData.startY = '';
    418.           scrollEleData.endY = '';
    419.           scrollEleData.diff = '';
    420.         // },500);
    421.       }
    422.       item.addEventListener("scroll", scrollDo, false);
    423.       function scrollDo(e){
    424.         // console.log(e.target.clientHeight , e.target.scrollTop , e.target.scrollHeight);
    425.         if((e.target.clientHeight + e.target.scrollTop + 2 >= e.target.scrollHeight) || (e.target.scrollTop == 0)){
    426.           setTimeout(function(){
    427.             scrollEleData.canTouch = true;
    428.           },500);
    429.         }else{
    430.           scrollEleData.canTouch = false;
    431.         }
    432.       }
    433.     })
    434.   }
    435.   // 
    436.   window.onload = function(){
    437.     element.querySelectorAll('.page').forEach(function(item,index){
    438.       console.log(index)
    439.       if(index > 0){
    440.         item.classList.add('outTop');
    441.       }else{
    442.         item.classList.add('inTop');
    443.         item.querySelector('.page_body').classList.remove('hide');
    444.       }
    445.     })
    446.   }
    447. }
    448.  
    449. /***************************/
    450.  
    451. // 例：
    452. // 循环执行翻页
    453. setChangePage(document.getElementsByClassName('page_box')[0],'loop','scroll_box');
    454. // 不循环执行翻页
    455. // setChangePage(document.getElementsByClassName('page_box')[0],'','scroll_box');
    456.  
    457. script>
    458. body>
    459. html>

  • 相关阅读:
    GitKraken Pro安装
    Posix API 和网络协议栈
    N个元素进栈 出栈情况种数
    测试面试-经典测试场景
    nest 第三章 认识nest
    systemverilog学习 --- casting and local protected
    C/C++指针之提高篇详解（二）
    在Bcache上启动OSD报unable to read osd superblock错误
    ARP协议介绍与ARP协议的攻击手法
    哈佛大学商业评论 --- 第三篇：真实世界中的增强现实
  • 原文地址：https://blog.csdn.net/qq_16494241/article/details/132741969