使用JS實現圖片簡單翻書特效

職場就業
關注：9.58K次

操作方法

（01）效果圖<html xmlns=""><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>打折網S實現圖片翻書效果-懶人圖庫</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} {OVERFLOW: hidden; BORDER-LEFT: #000000 1px solid; WIDTH: 50%; CURSOR: pointer; POSITION: absolute; HEIGHT: 100%}t {BORDER-RIGHT: #000000 1px solid; LEFT: 50%} {BACKGROUND: #000000} {WIDTH: 200%; POSITION: absolute; HEIGHT: 100%}</STYLE>複製以下js [乛]<!lectstart = 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 (ers)ity=o; else ity = o/100;}function TPR__(p) { = 50-(2.5*p)+"%";h = (2.5*p)+"%";setOpacity(P1i, .5*p*p);if (p == 20) run = false;}function TPR_(p) {h = 50-(2.5*p)+"%";setOpacity(P2i, 100-.5*(p*p));if (p == 20) { = IMGSRC[kI];setOpacity(P2i, 100);h = "50%";for(var i=1; i<=20; i++) setTimeout("TPR__("+i+")", i*32);}}function TPR() {if (!run) {run = true; = IMGSRC[kI];h = 0;kI++;if (kI>=nI) kI = 0;titLe(kI); = IMGSRC[kI]; = IMGSRC[kI];for (var i=1; i<=20; i++) setTimeout("TPR_("+i+")", i*32);} else setTimeout("TPR()", 100);}function TPL__(p) {h = (2.5*p)+"%";setOpacity(P2i, .5*p*p);if (p == 20) run = false;}function TPL_(p) { = (2.5*p)+"%";h = 40+(10-2.5*p)+"%";setOpacity(P1i, 100-.5*(p*p));if (p == 20) { = IMGSRC[kI];setOpacity(P1i, 100); = 0;h = "50%";for(var i=1; i<=20; i++) setTimeout("TPL__("+i+")", i*32);}}function TPL() {if (!run) {run = true; = IMGSRC[kI];h = 0;kI--;if (kI < 0) kI = nI-1;titLe(kI); = IMGSRC[kI]; = IMGSRC[kI];for(var i=1; i<=20; i++) setTimeout("TPL_("+i+")", i*32);} else setTimeout("TPL()", 100);}function titLe(p) {lementById("TXTBOX")rHTML = IMGSRC[p];}onload = function() {IMGSRC = lementById("imgsrc")lementsByTagName("img");DB = lementById("DHTMLBOOK");P01 = lementsByTagName("span")[0];P01i = lementsByTagName("img")[0];P02 = lementsByTagName("span")[1];P02i = lementsByTagName("img")[0];P1 = lementsByTagName("span")[2];P1i = lementsByTagName("img")[0];P2 = lementsByTagName("span")[3];P2i = lementsByTagName("img")[0];nI = th; = IMGSRC[kI]; = IMGSRC[kI];titLe(kI);bility = "visible";}//-->複製js//--><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="/images/12499727220.jpg"><IMG alt="Believing she had dreamed of the roar of his bike," src="/images/12499727221.jpg"><IMG alt="she woke up to the sunshine in her eyelids." src="/js/images/12499727222.jpg"></DIV><p>查找更多代碼，請訪問：<a href="" target="_blank">懶人圖庫</a></p></BODY></HTML>需要的圖：