原生JS实现图片翻书效果
下面给大家分享基于原生js实现的图片翻书效果，具体代码如下所示：
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>JS实现图片翻书效果-懒人图库</title>
<METAhttp-equiv=imagetoolbarcontent=no>
<STYLEtype=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:#0000001pxsolid;WIDTH:50%;CURSOR:pointer;POSITION:absolute;HEIGHT:100%
}
.right{
BORDER-RIGHT:#0000001pxsolid;LEFT:50%
}
.turn{
BACKGROUND:#000000
}
.img{
WIDTH:200%;POSITION:absolute;HEIGHT:100%
}
</STYLE>
<SCRIPTtype=text/javascript><!--
document.onselectstart=function(){returnfalse;}
varnI=0;
varkI=0;
varrun=false;
functionsetOpacity(obj,o){
if(o<0)o=0;elseif(o>100)o=100;
if(obj.filters)obj.filters.alpha.opacity=o;elseobj.style.opacity=o/100;
}
functionTPR__(p){
P1.style.left=50-(2.5*p)+"%";
P1.style.width=(2.5*p)+"%";
setOpacity(P1i,.5*p*p);
if(p==20)run=false;
}
functionTPR_(p){
debugger
P2.style.width=50-(2.5*p)+"%";
setOpacity(P2i,100-.5*(p*p));
if(p==20){
P2i.src=IMGSRC[kI].src;
setOpacity(P2i,100);
P2.style.width="50%";
for(vari=1;i<=20;i++)setTimeout("TPR__("+i+")",i*32);
}
}
functionTPR(){
if(!run){
run=true;
P01i.src=IMGSRC[kI].src;
P1.style.width=0;
kI++;
if(kI>=nI)kI=0;
titLe(kI);
P02i.src=IMGSRC[kI].src;
P1i.src=IMGSRC[kI].src;
for(vari=1;i<=20;i++)setTimeout("TPR_("+i+")",i*32);
}elsesetTimeout("TPR()",100);
}
functionTPL__(p){
P2.style.width=(2.5*p)+"%";
setOpacity(P2i,.5*p*p);
if(p==20)run=false;
}
functionTPL_(p){
P1.style.left=(2.5*p)+"%";
P1.style.width=40+(10-2.5*p)+"%";
setOpacity(P1i,100-.5*(p*p));
if(p==20){
P1i.src=IMGSRC[kI].src;
setOpacity(P1i,100);
P1.style.left=0;
P1.style.width="50%";
for(vari=1;i<=20;i++)setTimeout("TPL__("+i+")",i*32);
}
}
functionTPL(){
if(!run){
run=true;
P02i.src=IMGSRC[kI].src;
P2.style.width=0;
kI--;
if(kI<0)kI=nI-1;
titLe(kI);
P01i.src=IMGSRC[kI].src;
P2i.src=IMGSRC[kI].src;
for(vari=1;i<=20;i++)setTimeout("TPL_("+i+")",i*32);
}elsesetTimeout("TPL()",100);
}
functiontitLe(p){
document.getElementById("TXTBOX").innerHTML=IMGSRC[p].alt;
}
onload=function(){
debugger
IMGSRC=document.getElementById("imgsrc").getElementsByTagName("img");
DB=document.getElementById("DHTMLBOOK");
P01=DB.getElementsByTagName("span")[0];
P01i=P01.getElementsByTagName("img")[0];
P02=DB.getElementsByTagName("span")[1];
P02i=P02.getElementsByTagName("img")[0];
P1=DB.getElementsByTagName("span")[2];
P1i=P1.getElementsByTagName("img")[0];
P2=DB.getElementsByTagName("span")[3];
P2i=P2.getElementsByTagName("img")[0];
nI=IMGSRC.length;
P1i.src=IMGSRC[kI].src;
P2i.src=IMGSRC[kI].src;
titLe(kI);
DB.style.visibility="visible";
}
//-->
</SCRIPT>
<METAcontent="MSHTML6.00.6000.16809"name=GENERATOR></HEAD>
<BODY>
<DIVid=center>
<DIVid=DHTMLBOOK><SPANclass=pageonMouseDown="returnfalse;"ondblclick=TPL();onclick=TPL();><IMGclass=img></SPAN>
<SPANclass="pageright"onmousedown="returnfalse;"ondblclick=TPR();onclick=TPR();><IMGclass=imgstyle="LEFT:-100%"></SPAN>
<SPANclass="pageturn"onMouseDown="returnfalse;"ondblclick=TPL();onclick=TPL();><IMGclass=imgstyle="FILTER:alpha();opacity:1"></SPAN>
<SPANclass="pageturnright"onmousedown="returnfalse;"ondblclick=TPR();onclick=TPR();><IMGclass=imgstyle="FILTER:alpha();LEFT:-100%;opacity:1"></SPAN>
<DIVid=TXTBOX></DIV></DIV></DIV>
<DIVid=imgsrcstyle="VISIBILITY:hidden">
<IMGalt="Intheearlymorninghedeparted."src="http://www.lanrentuku.com/down/js/images/12499727220.jpg">
<IMGalt="Believingshehaddreamedoftheroarofhisbike,"src="http://www.lanrentuku.com/down/js/images/12499727221.jpg">
<IMGalt="shewokeuptothesunshineinhereyelids."src="http://www.lanrentuku.com/down/js/images/12499727222.jpg">
</DIV>
</BODY></HTML>
以上所述是小编给大家介绍的原生JS实现图片翻书效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！