js实现html图片翻页效果,原生JS实现图片翻书效果

JS实现图片翻书效果-懒人图库

#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%

}

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

var nI = 0;

var kI = 0;

var run = false;

function setOpacity(obj,o) {

if (o100) 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) {

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(var i=1; i

}

}

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

} else setTimeout("TPR()", 100);

}

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

}

}

function TPL() {

if (!run) {

run = true;

P02i.src = IMGSRC[kI].src;

P2.style.width = 0;

kI--;

if (kI

titLe(kI);

P01i.src = IMGSRC[kI].src;

P2i.src = IMGSRC[kI].src;

for(var i=1; i

} else setTimeout("TPL()", 100);

}

function titLe(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";

}

//-->