JS实现图片翻书效果

清疚 2021-12-13 23:59 360阅读 0赞

**picture.html**

<html xmlns="[http://www.w3.org/1999/xhtml][http_www.w3.org_1999_xhtml]">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>JS实现图片翻书效果</title>  
<META http-equiv=imagetoolbar content=no>  
<link rel="stylesheet" type="text/css" href="picture.css"/>  
<script type="text/javascript" src="picture.js"></script>  
<BODY>

**picture.css**

\#center \{  
 LEFT: 50%; POSITION: absolute; TOP: 50%  
\}  
\#DHTMLBOOK \{  
 BACKGROUND: \#000; LEFT: -210px; VISIBILITY: hidden; WIDTH: 210px; POSITION: relative; TOP: -160px; HEIGHT: 160px  
\}  
\#TXTBOX \{  
 FONT-SIZE: 0.8em; WIDTH: 210px; COLOR: \#aba193; FONT-FAMILY: verdana; POSITION: absolute; TOP: 160px; 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%  
\}

picture.js

document.onselectstart = function () \{ return false; \}

var nI  = 0;  
var kI  = 0;  
var run = false;

function TPL\_\_(p) \{  
 P2.style.width = (2.5\*p)+"%";  
 setOpacity(P2i, .5\*p\*p);  
 if (p == 20) run = false;  
\}  
function TPL\_(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(var i=1; i<=20; i++) setTimeout("TPL\_\_("+i+")", i\*32);  
 \}  
\}  
function TPL() \{  
 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(var i=1; i<=20; i++) setTimeout("TPL\_("+i+")", i\*32);  
 \} else setTimeout("TPL()", 100);  
\}  
function titLe(p) \{  
 document.getElementById("TXTBOX").innerHTML = IMGSRC\[p\].alt;  
\}  
onload = function() \{  
 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";  
\}

转载于:https://www.cnblogs.com/james1207/p/3310863.html

[http_www.w3.org_1999_xhtml]: http://www.w3.org/1999/xhtml