First on: (The style is a bit ugly, you can ignore the next, the effect came out, and later added to other items convenient change 0.0)
Similar to the book effect, the original meaning is to use JS to control, click once after using SetInterval to control the page turned over the animation, when the page flipped 180°, clear out the setinterval, but when I click continuously, that before the rollover 180° The page will not be able to continue to finish before the action, can be removed setinterval way, but always feel the animation effect is not good, of course there are other solutions, but suddenly think, CSS3 for us to provide animation, why don't we use it, As long as the addition of animation animation can directly avoid this problem, animation animation by default is performed every time the animation, so, when the connection point, it will be as seen in the picture, each page is automatically page, paste the following code, and implementation steps:
Note: This example JS part of the original JS to write, poor with the original JS, can be used jquery and other three-party framework to rewrite
HTML part: (This part really, forget, ugly is ugly point ~.~)
<body> <!--The contents of the book--<p class= "Books" > <p class= "page" > <SPAN>1&L t;/span> <span>2</span> </p> <p class= "page" > <span>3 </span> <span>4</span> </p> <p class= "page" > <span> ;5</span> <span>6</span> </p> <p class= "page" > <span& gt;7</span> <span>8</span> </p> <p class= "page" > <spa n>9</span> <span>10</span> </p> <p class= "page" > < span>11</span> <span>12</span> </p> <p class= "page" > <span>13</span> <span>14</span> </p> <p class= "page" > <span>15</span> <span>16</span> </p> <p class= "page" > <SPAN>17&L t;/span> <span>18</span> </p> <p class= "page" > <span> 19</span> <span>20</span> </p> </p> <!--to control the previous page and the next page-- <input type= "button" value= "previous" id= "before"/> <input type= "button" value= "next page" id= "after"/></body>
CSS part: (By changing the value of the Rotatey in the transform, to achieve the flip effect of the page)
<style>. book{width:460px; height:300px; position:relative; margin:150px 400px; -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; -ms-transform-style:preserve-3d; transform-style:preserve-3d; Transform:rotatex (30DEG); }. page{width:230px; height:300px; border:1px solid #666; Position:absolute; rightright:0; Transform-origin:left; transform-style:preserve-3d; Backface-visibility:hidden; font-size:60px; Text-align:center; line-height:300px; }. page span{display:block; width:100%; Position:absolute; Background-color: #00FFFF; }. Page Span:Nth-child (2) {Transform:rotatey ( -180deg); Backface-visibility:hidden; }/* The following two animations can use only the first, animation in the reverse, you can reverse the animation, use the JS when you need to click on the previous page to add the property value//////////////////The next page of the book * * KeyFrames page {0%{transform:rotatey (0deg); } 100%{Transform:rotatey ( -180deg); Z-index:10; }}/* Page up the previous animation */@keyframes Page1 {0%{Transform:rotatey (-180 DEG); Z-index:10; } 100%{Transform:rotatey (0deg); }} </style>
JS section (JS part of the main implementation click on/Next page, for the corresponding P add animation attribute)
<script> var before = Document.queryselector ("#before"); var after = Document.queryselector ("#after"); var book = Document.queryselector (". Book"); var page = document.getelementsbyclassname ("page"); 7 rotate (); function rotate () {var middle = 0;12 for (var z=0;z<book.children.length;z++) {Page[z].s Tyle.zindex = book.children.length-z; } After.onclick = function () {if (middle! = book.children.length) {PAGE[MIDDLE].S tyle.animation = "page 1.5s linear 1 forwards"; middle++; }else{middle = book.children.length; } }; Before.onclick = function () {if (middle! = 0) {page[middle-1].style.animation = "Page1 1.5s Linear 1 Forwards "; middle--; }else{middle = 0; }}} </script>
About the last JS part, the main function is that when you click on/Next page, for the corresponding p add animation properties, detailed animation, or need to see the API.
In the compatibility of the problem, the better solution here is to add class, rather than to add animation, in order to adapt to more browsers, need to add a prefix-webkit-、-moz-, so in a class to write these things, directly add classes can be, or write a function, encapsulated, can directly output the required string is good.
The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
