Below I will share with you the effect of picture book flipping based on native JS. The specific code is as follows:
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JSRealize picture book-turning effect-Lazy Picture Gallery</title>
<META http-equiv=imagetoolbar content=no>
<STYLE type=text/css>
#center {
LEFT: 50%; POSITION: absolute; TOP: 50%
}
#DHTMLBOOK {
BACKGROUND: #000; LEFT: -210px; VISIBILITY: hidden; WIDTH: 420px; POSITION: relative; TOP: -160px; HEIGHT: 320px
}
#TXTBOX {
FONT-SIZE: 0.8em; WIDTH: 410px; COLOR: #aba193; FONT-FAMILY: verdana; POSITION: absolute; TOP: 320px; TEXT-ALIGN: center
}
.page {
OVERFLOW: hidden; BORDER-LEFT: #000000 1px solid; WIDTH: 50%; CURSOR: pointer; POSITION: absolute; HEIGHT: 100%
}
.right {
BORDER-RIGHT: #000000 1px solid; LEFT: 50%
}
.turn {
BACKGROUND: #000000
}
.img {
WIDTH: 200%; POSITION: absolute; HEIGHT: 100%
}
</STYLE>
<SCRIPT type=text/javascript><!--
= function () { return false; }
var nI = 0;
var kI = 0;
var run = false;
function setOpacity(obj,o) {
if (o<0) o=0; else if (o>100) o = 100;
if ()=o; else = o/100;
}
function TPR__(p) {
= 50-(2.5*p)+"%";
= (2.5*p)+"%";
setOpacity(P1i, .5*p*p);
if (p == 20) run = false;
}
function TPR_(p) {
debugger
= 50-(2.5*p)+"%";
setOpacity(P2i, 100-.5*(p*p));
if (p == 20) {
= IMGSRC[kI].src;
setOpacity(P2i, 100);
= "50%";
for(var i=1; i<=20; i++) setTimeout("TPR__("+i+")", i*32);
}
}
function TPR() {
if (!run) {
run = true;
= IMGSRC[kI].src;
= 0;
kI++;
if (kI>=nI) kI = 0;
titLe(kI);
= IMGSRC[kI].src;
= IMGSRC[kI].src;
for (var i=1; i<=20; i++) setTimeout("TPR_("+i+")", i*32);
} else setTimeout("TPR()", 100);
}
function TPL__(p) {
= (2.5*p)+"%";
setOpacity(P2i, .5*p*p);
if (p == 20) run = false;
}
function TPL_(p) {
= (2.5*p)+"%";
= 40+(10-2.5*p)+"%";
setOpacity(P1i, 100-.5*(p*p));
if (p == 20) {
= IMGSRC[kI].src;
setOpacity(P1i, 100);
= 0;
= "50%";
for(var i=1; i<=20; i++) setTimeout("TPL__("+i+")", i*32);
}
}
function TPL() {
if (!run) {
run = true;
= IMGSRC[kI].src;
= 0;
kI--;
if (kI < 0) kI = nI-1;
titLe(kI);
= IMGSRC[kI].src;
= IMGSRC[kI].src;
for(var i=1; i<=20; i++) setTimeout("TPL_("+i+")", i*32);
} else setTimeout("TPL()", 100);
}
function titLe(p) {
("TXTBOX").innerHTML = IMGSRC[p].alt;
}
onload = function() {
debugger
IMGSRC = ("imgsrc").getElementsByTagName("img");
DB = ("DHTMLBOOK");
P01 = ("span")[0];
P01i = ("img")[0];
P02 = ("span")[1];
P02i = ("img")[0];
P1 = ("span")[2];
P1i = ("img")[0];
P2 = ("span")[3];
P2i = ("img")[0];
nI = ;
= IMGSRC[kI].src;
= IMGSRC[kI].src;
titLe(kI);
= "visible";
}
//-->
</SCRIPT>
<META content="MSHTML 6.00.6000.16809" name=GENERATOR></HEAD>
<BODY>
<DIV id=center>
<DIV id=DHTMLBOOK><SPAN class=page onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img></SPAN>
<SPAN class="page right" onmousedown="return false;" ondblclick=TPR(); onclick=TPR();><IMG class=img style="LEFT: -100%"></SPAN>
<SPAN class="page turn" onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img style="FILTER: alpha(); opacity: 1"></SPAN>
<SPAN class="page turn right" onmousedown="return false;" ondblclick=TPR(); onclick=TPR();><IMG class=img style="FILTER: alpha(); LEFT: -100%; opacity: 1"></SPAN>
<DIV id=TXTBOX></DIV></DIV></DIV>
<DIV id=imgsrc style="VISIBILITY: hidden">
<IMG alt="In the early morning he departed." src="/down/js/images/">
<IMG alt="Believing she had dreamed of the roar of his bike," src="/down/js/images/">
<IMG alt="she woke up to the sunshine in her eyelids." src="/down/js/images/">
</DIV>
</BODY></HTML>
The above is the native JS introduced to you by the editor to achieve the effect of picture book flipping. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!