Tip: You can modify some of the code before running
<ptml xmlns:v= "urn:schemas-microsoft-com:vml" xmlns:o= "Urn:schemas-microsoft-com:office:office" > <pead > <meta http-equiv= "content-type" content= "text/html; Charset=utf-8 "> <!--[if!mso]> <style> v:* {behavior:url (#default #vml)} o:* {behavior: URL (#default #vml)}. Shape {behavior:url (#default #vml)} </style> <! [endif]--> <style type= "Text/css" > body{background-color: #333; div{Position:absolute; left:0px; top:0px; width:350px; height:400px; border:0px #AAA Solid; Background-color: #666699; Color: #FF0000; Filter:progid:DXImageTransform.Microsoft.Matrix (m11=1,m12=0,m21=0,m22=1,sizingmethod= "Auto expand"); font-size:16px; Text-align:left; line-height:20px; padding:10px; Overflow:hidden; font-size:12px; Font-family: Song body; }. box{Position:absolute; left:50px; top:20px; width:688px; height:482px; border:0px #FFF Solid; padding:0px; Overflow:hidden; Visibility:hidden; }. pagebox{Position:aBsolute; left:0px; top:0px; width:350px; height:400px; Overflow:hidden; border:0px #FFF Solid; Filter:progid:DXImageTransform.Microsoft.Matrix (m11=1,m12=0,m21=0,m22=1,sizingmethod= "Auto expand"); } #page2 {Background-image:url ("9.jpg");} </style> <script type= "Text/javascript" language= "JavaScript" > var div=null; var line=null; var qap=0; var timerid=0; var w,h,s; var step=5; var Pages,boxs,box,boxframe,box3,page3; var page=0; function config () {pages=document.getelementsbyname ("page"); Boxs=document.getelementsbyname ("box"); Box=document.getelementbyid ("box0"); Boxframe=document.getelementbyid ("Boxframe"); boxframe.style.borderwidth=0; W=parseint (Box.currentStyle.width)/2; H=parseint (Box.currentStyle.height); S=MATH.SQRT (W*W+H*H); for (Var i=0;i<4;i++) {boxs[i].style.width=s; Boxs[i].style.height=s; Pages[i].style.width=w-2; Pages[i].style.height=h-2; boxs[i].style.top=s-h+1; if (i>0) {boxs[i].style.left=w; boxs[i].style.zindex=I }else{boxs[i].style.left=1; Boxs[i].style.zindex=i; } pages[0].style.backgroundimage= "url (' yun_qi_img/1.jpg ')"; pages[1].style.backgroundimage= "url (' yun_qi_img/2.jpg ')"; pages[2].style.backgroundimage= "url (' yun_qi_img/3.jpg ')"; pages[3].style.backgroundimage= "url (' yun_qi_img/4.jpg ')"; box.style.borderwidth=0; Box.style.height=s; boxframe.style.zindex=0; boxframe.style.left=0; Boxframe.style.top=s-h; boxframe.style.width=w*2; Boxframe.style.height=h; BOX3=BOXS[2]; PAGE3=PAGES[2]; box3.style.zindex=5; Qap=0; W=w-2; H=h-2; Changeqa (); box.style.visibility= "visible"; boxframe.style.visibility= "visible"; function Fanye () {qap=0; step=3; if (timerid>0) window.clearinterval (Timerid); if (page>0) {} timerid=window.setinterval (changeqa,1); page++; The function Changeqa () {if (qap>90) {qap=90; Window.clearinterval (Timerid); } var qa=math.pi*qap/180; var mcs=math.cos (QA); var mss=math.sin (QA); With (Box3.filters.item (0)) {m11=MCs M12=MSS; M21=-MSS; M22=mcs; } box3.style.top=h-s*mss-s*mcs+ (S-h)-1; box3.style.left=-s*mss+w+1; With (Boxs[3].filters.item (0)) {M11=mcs; M12=MSS; M21=-MSS; M22=mcs; } boxs[3].style.top=h-s*mss+ (S-h)-1; page3.style.left=0; PAGE3.STYLE.TOP=S-W*MSS; With (Pages[3].filters.item (0)) {M11=mcs; M12=-MSS; M21=MSS; M22=mcs; } var weitiao=0; if (qap==5| | (qap>=15&&qap<25) | | qap==40| | qap==45| | qap==50| | qap==65| | qap==60) {weitiao=1; }else if (qap==35| | qap==25| | qap==70) {weitiao=2; }else if (qap==80) {weitiao=4; } Pages[3].style.top=-h*mcs+weitiao; Qa=math.pi*180/180+qa; Mcs=math.cos (QA); Mss=math.sin (QA); With (Page3.filters.item (0)) {M11=mcs; M12=MSS; M21=-MSS; M22=mcs; } Qap+=step; if (step<3) step+=1; } window.attachevent ("onload", config); </script> </pead> <body> <input type= "button" onclick= "Fanye ()" value= "paging" > <div id= "box0" class= "box" > <div id= "box" class= "Pagebox" ><div id= "page" class= "div" > Page1 This is the first page of content Page1 This is the first page of content Page1 This is the first page content Page1 this is the first page content Page1 this is the first page content Page1 this is the first page content Page1 this is the first page contents Page1 </div> <div id= "box" class= "Pagebox" ><div id= "page" class= "div" > Page2 second Page Page2 second page page2 second page page2 second page page2 second page page2 second page page2 second page </div></div> <div id= "box" class= "Pagebox" ><div id= "page" class= "div" >page3 punk boys, Punks, Punks, Punks, Punks, Punks, Punks, Punks, Punks, Punks, Punks, punk, punks, Punks, guys, Teddy Boys, </div></div> <div id= "box" class= "Pagebox" ><div id= "page" class= "div" > Page4 Punks, Punks, Punks, Punks, Punks, Punks, Punks, Punks, Punks, Punks, Punks, Punks, Punks, Punks, Boys, Punks, Punks, <div id=. Boxframe "class=" box "></div> </div> </body> </ptml>
Tip: You can modify some of the code before running
