<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
|
<title>JS实现图片翻书效果-懒人图库</title>
|
<META http-equiv=imagetoolbar content=no>
|
<STYLE type=text/css>
|
#DHTMLBOOK {
|
BACKGROUND: #000;
|
VISIBILITY: hidden;
|
WIDTH: 100%;
|
POSITION: relative;
|
HEIGHT: 100%
|
}
|
|
#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>
|
<!--
|
|
document.onselectstart = 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 (obj.filters) obj.filters.alpha.opacity = o;
|
else obj.style.opacity = o / 100;
|
}
|
|
function TPR__(p) {
|
P1.style.left = 50 - (2.5 * p) + "%";
|
P1.style.width = (2.5 * p) + "%";
|
setOpacity(P1i, .5 * p * p);
|
if (p == 20) run = false;
|
}
|
|
function TPR_(p) {
|
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 (var i = 1; i <= 20; i++) setTimeout("TPR__(" + i + ")", i * 32);
|
}
|
}
|
|
function TPR() {
|
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 (var i = 1; i <= 20; i++) setTimeout("TPR_(" + i + ")", i * 32);
|
} else setTimeout("TPR()", 50);
|
}
|
|
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()", 50);
|
}
|
|
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";
|
}
|
//-->
|
</SCRIPT>
|
|
<META content="MSHTML 6.00.6000.16809" name=GENERATOR>
|
</HEAD>
|
|
<BODY>
|
|
|
<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 id=imgsrc style="VISIBILITY: hidden">
|
<IMG src="./pdf/bookone.png">
|
<IMG src="./pdf/images/leftone.png">
|
<IMG src="./pdf/images/rightone.png">
|
<IMG src="./pdf/images/1.png">
|
<IMG src="./pdf/images/2.png">
|
<IMG src="./pdf/images/3.png">
|
<IMG src="./pdf/images/4.png">
|
<IMG src="./pdf/images/5.png">
|
<IMG src="./pdf/images/6.png">
|
<IMG src="./pdf/images/7.png">
|
<IMG src="./pdf/images/8.png">
|
<IMG src="./pdf/images/9.png">
|
<IMG src="./pdf/images/10.png">
|
<IMG src="./pdf/images/11.png">
|
<IMG src="./pdf/images/12.png">
|
<IMG src="./pdf/images/13.png">
|
<IMG src="./pdf/images/14.png">
|
<IMG src="./pdf/images/15.png">
|
<IMG src="./pdf/images/16.png">
|
<IMG src="./pdf/images/17.png">
|
<IMG src="./pdf/images/18.png">
|
<IMG src="./pdf/images/19.png">
|
<IMG src="./pdf/images/20.png">
|
<IMG src="./pdf/images/21.png">
|
<IMG src="./pdf/images/22.png">
|
<IMG src="./pdf/images/23.png">
|
<IMG src="./pdf/images/24.png">
|
<IMG src="./pdf/booktwo.png">
|
</DIV>
|
|
</BODY>
|
|
</HTML>
|
