Strong 15 fire 75 Network (LieHuo97.Net) Teach 88 Cheng write a book flip Js effect, jquery-1.4.2.min.js, is still being improved, I hope you can like it, I think it is good.
In order to solve the problem that webpage effects cannot be displayed after running (for example, jQuery needs to be refreshed), a webpage version demonstration is newly added
Webpage Demonstration: click here
Run the demo:
<! 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> Self-writing javascript results of a book flip-Liehuo. Net </title> <script type =" text/javascript "language =" javascript "src =" http://www.bkjia.com/ Uploads/common/js/jquery-1.4.2.min.js "> </script> <script type =" text/javascript "language =" javascript "> $ (function () {$ ("# right "). click (function () {var roll = $ ("<div/>", {css: {position: "absolute", border: "solid 1px #999", left: "806px", top: "10px", height: "494px", width: "1px", background: "# fff url ( http://www.bkjia.com/ Uploads/allimg/1011/eCX.png) repeat-y-200px 0px "}}). appendTo ($ ("# book "). parent (); $ (roll ). animate ({left: "10px", width: "398px", "background-position": "272px 0px"}, 1000, function () {$ ("# left" ).css ({"background": "# fff"}); $ (roll ). fadeOut (300, function () {$ (roll ). remove () ;}) };}) ;}); </script>
Tip: the code can be modified before running!