Page Switching Style Based on JS Realizing Book Flipping Effect

Here is a piece of code shared with everyone, a page switching style with flip book effect implemented based on JavaScript code, the specific code is shown as follows;

!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>
  <title>/title>
  <script type="text/javascript" language="javascript" src="/ajaxjs/jquery-1.4.2.min.js"></script>
  <script type="text/javascript" language="javascript">
  $("function() {
  $("#right").click(function() {
  var roll = $("<div></div>", { css: { position: "absolute", border: "solid 1px #999", left: "806px", top: "10px", height: "494px", width: "1px", background:           "#fff"}).appendTo($("#book").parent());
  $(roll).animate({
  left: "10px",
  width: "398px"
  , 1000, function() {
  $("#left").css({"background":"#fff"});
  $(roll).fadeOut(300, function() {
  $(roll).remove();
  }
  });
  });
  });
  </script>
  </head>
  <body style="padding:5px;margin:0;">
  <div id="book" style="width:797px;height:494px;background:#ccc;border:solid 6px #ccc;">
  <div id="left" style="width:398px;height:494px;float:left;background:url(https://www.oldtoolbag.com/jscss/demoimg/201011/PLh.png) no-repeat top left;cursor:pointer;"></div>
  <div id="right" style="width:398px;height:494px;float:left;background:#fff;cursor:pointer;margin-left:1px;text-align:right;"><p style="margin-top:470px;font-size:12px;color:#999>Click to turn the page </p></div>
  </div>
  </body>
  </html>

The above is the page switching style based on JS implementation of flipping effect introduced by the editor for everyone, hoping it will be helpful to everyone. If you have any questions, please leave a message, and the editor will reply to everyone in time. Here, the editor also expresses heartfelt thanks to everyone for their support of the Naoan tutorial website!

Basic Tutorial