位置: 小林在线 -- 文章中心 -- 网页制作 -- 网页制作 -- 正文
JS实现图片翻书效果        

JS实现图片翻书效果

数据加载中...
<html xmlns="http://www.w3.org/1999/xhtml">  [文章来自:小林在线 http://www.xlin.cn ||PnlV"tW@ h  ]
<head>  [文章来自:小林在线 http://www.xlin.cn 5j\ NGlc? I{tf5e1]
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  [文章来自:小林在线 http://www.xlin.cn zoULCI ?$~dU]
<title>JS实现图片翻书效果</title>  [文章来自:小林在线 http://www.xlin.cn =ENBPbky+{r R! ]
<META http-equiv=imagetoolbar content=no>  [文章来自:小林在线 http://www.xlin.cn rq--Md7 \Z *|:]
<STYLE type=text/css>  [文章来自:小林在线 http://www.xlin.cn }@e#|nw5 GWZoa =]
#center {  [文章来自:小林在线 http://www.xlin.cn tl?TB]xB!t.Ix^l?]
 LEFT: 50%; POSITION: absolute; TOP: 50%  [文章来自:小林在线 http://www.xlin.cn (=,v=BSTxf@~8$)w]
[文章来自:小林在线 http://www.xlin.cn K C"X! ^%VE/]
#DHTMLBOOK {  [文章来自:小林在线 http://www.xlin.cn $% # f\0-x9 ~B=1]
 BACKGROUND: #000; LEFT: -210px; VISIBILITY: hidden; WIDTH: 420px; POSITION: relative; TOP: -160px; HEIGHT: 320px  [文章来自:小林在线 http://www.xlin.cn |L=VEX48Z#R|ps*:r]
[文章来自:小林在线 http://www.xlin.cn "u~up=yDTkep; Z]
#TXTBOX {  [文章来自:小林在线 http://www.xlin.cn ~gC#}}k @]lFw"{+,]
 FONT-SIZE: 0.8em; WIDTH: 410px; COLOR: #aba193; FONT-FAMILY: verdana; POSITION: absolute; TOP: 320px; TEXT-ALIGN: center  [文章来自:小林在线 http://www.xlin.cn qk9RU[4#CE*``2J ]
[文章来自:小林在线 http://www.xlin.cn TuZ.(n7c@U=3"4S Y]
.page {  [文章来自:小林在线 http://www.xlin.cn dd"q),U#[kr26X ]
 OVERFLOW: hidden; BORDER-LEFT: #000000 1px solid; WIDTH: 50%; CURSOR: pointer; POSITION: absolute; HEIGHT: 100%  [文章来自:小林在线 http://www.xlin.cn *CL%7B7M'{]
[文章来自:小林在线 http://www.xlin.cn t[hT7SUN^2kc ]
.right {  [文章来自:小林在线 http://www.xlin.cn [i+]?)RW=!ff_E$A]
 BORDER-RIGHT: #000000 1px solid; LEFT: 50%  [文章来自:小林在线 http://www.xlin.cn EcqgSa|Qz? P2`_d]
[文章来自:小林在线 http://www.xlin.cn lPq\OA!5YhDKV DHx]
.turn {  [文章来自:小林在线 http://www.xlin.cn PHhM`i}^$CAv 9An]
 BACKGROUND: #000000  [文章来自:小林在线 http://www.xlin.cn lX| =ke\f5SM~I'FU]
[文章来自:小林在线 http://www.xlin.cn N'TY|zb7gGrG( ')Z]
.img {  [文章来自:小林在线 http://www.xlin.cn [yK/2{M3[&Z+$]
 WIDTH: 200%; POSITION: absolute; HEIGHT: 100%  [文章来自:小林在线 http://www.xlin.cn JhpB?HG/Ftl07%o ]
[文章来自:小林在线 http://www.xlin.cn :l|.jVFoA?c7.Huq]
</STYLE>  [文章来自:小林在线 http://www.xlin.cn z dom }v}R4}G-TjC]
<SCRIPT type=text/javascript><!--  [文章来自:小林在线 http://www.xlin.cn A#88sC%c[(r]
document.onselectstart = function () { return false; }  [文章来自:小林在线 http://www.xlin.cn Fxm)LH WT6*B1u]
var nI  = 0;  [文章来自:小林在线 http://www.xlin.cn OKTu2(i-G\':Sr4 Ku]
var kI  = 0;  [文章来自:小林在线 http://www.xlin.cn )k=b] %w6cX['`]
var run = false;  [文章来自:小林在线 http://www.xlin.cn -2S"g=7P|-AiCY`]
function setOpacity(obj,o) {  [文章来自:小林在线 http://www.xlin.cn J=T',Qlg^,?O#QO]
 if (o<0) o=0; else if (o>100) o = 100;  [文章来自:小林在线 http://www.xlin.cn d]2j:FIn'_:[t]
 if (obj.filters)obj.filters.alpha.opacity=o; else obj.style.opacity = o/100;  [文章来自:小林在线 http://www.xlin.cn ^"tsIjk4HQ"HcH]
[文章来自:小林在线 http://www.xlin.cn a4v6?LE%w(?6y'L #ZD ]
function TPR__(p) {  [文章来自:小林在线 http://www.xlin.cn yXlT,&!Ml=ogEYz6`]
 P1.style.left  = 50-(2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn %sfucW?vP?sq^]
 P1.style.width = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn 7IY $G/:&6OXo)2Ijlq]
 setOpacity(P1i, .5*p*p);  [文章来自:小林在线 http://www.xlin.cn r /xD#_x?O-377]
 if (p == 20) run = false;  [文章来自:小林在线 http://www.xlin.cn #5BWuXEyI,;?i]
[文章来自:小林在线 http://www.xlin.cn @;9%n1+P# "d.XdA]
function TPR_(p) {  [文章来自:小林在线 http://www.xlin.cn aT=a8Ma$yZn^7SH]
 P2.style.width = 50-(2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn 1XU=:|{ "!*nb=]
 setOpacity(P2i, 100-.5*(p*p));  [文章来自:小林在线 http://www.xlin.cn 8FWAHU HQrNRuc]
 if (p == 20) {  [文章来自:小林在线 http://www.xlin.cn TNaf_g/{+,ULJ]
  P2i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn ~P(o jNB` R$~z"]
  setOpacity(P2i, 100);  [文章来自:小林在线 http://www.xlin.cn %n1GCu$%?TDYh=]
  P2.style.width = "50%";  [文章来自:小林在线 http://www.xlin.cn W k0&Fi ht9h:{]
  for(var i=1; i<=20; i++) setTimeout("TPR__("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn pr8Q.B[e+VY+;I]
 }  [文章来自:小林在线 http://www.xlin.cn #~LvTQwFOG;{s]?v]
[文章来自:小林在线 http://www.xlin.cn a"OCZyJC.B=grNw]
function TPR() {  [文章来自:小林在线 http://www.xlin.cn !-2Z_n E!FbGd@G9G 1]
 if (!run) {  [文章来自:小林在线 http://www.xlin.cn @vCA 3mxv7`_,]
  run = true;  [文章来自:小林在线 http://www.xlin.cn AZI)|Bj\@}FAFe6 \]
  P01i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn 7{F]GqK Yb# aom z]
  P1.style.width = 0;  [文章来自:小林在线 http://www.xlin.cn ,QEzhQ{X;!,iK5BKY]
  kI++;  [文章来自:小林在线 http://www.xlin.cn AK %wHx?& v7O ]
  if (kI>=nI) kI = 0;  [文章来自:小林在线 http://www.xlin.cn sIz,A: Xm! maL1(]
  titLe(kI);  [文章来自:小林在线 http://www.xlin.cn n%_G#O$S`j5lyVly_".]
  P02i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn ^J,Lu[0B(5v4p2c]
  P1i.src  = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn K~A!\IGO(`-=\8?U/y]
  for (var i=1; i<=20; i++) setTimeout("TPR_("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn h03NhP%?`H] cI56R]
 } else setTimeout("TPR()", 100);  [文章来自:小林在线 http://www.xlin.cn 3kN9.{w0rwA2k5,%Fi]
[文章来自:小林在线 http://www.xlin.cn ; f.r%2l2SW AWTK]
function TPL__(p) {  [文章来自:小林在线 http://www.xlin.cn I Oa},+A%Q7 [`]
 P2.style.width = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn vAO oq t Vzb(x]1]
 setOpacity(P2i, .5*p*p);  [文章来自:小林在线 http://www.xlin.cn #w1XU=NKYVE;#D0{W]
 if (p == 20) run = false;  [文章来自:小林在线 http://www.xlin.cn h$;G Y:p=`LZR=`?`]
[文章来自:小林在线 http://www.xlin.cn [rO(B=MB"_v*@$]
function TPL_(p) {  [文章来自:小林在线 http://www.xlin.cn R0w2+:;g*+L|+|,+?:]
 P1.style.left  = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn {NNYVLxE" :luz#6]
 P1.style.width = 40+(10-2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn (J^eI`g-niE;=5 ]
 setOpacity(P1i, 100-.5*(p*p));  [文章来自:小林在线 http://www.xlin.cn (ko6BrzP]~^,O6-|I/-U]
 if (p == 20) {  [文章来自:小林在线 http://www.xlin.cn P"TYu9\Yymp_d8 J$]
  P1i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn +@Nj j\Z~sI2yp~e]
  setOpacity(P1i, 100);  [文章来自:小林在线 http://www.xlin.cn aOxY|9%2rt?+Yd i Em]
  P1.style.left  = 0;  [文章来自:小林在线 http://www.xlin.cn SzqA`p3iAg JDo )"]
  P1.style.width = "50%";  [文章来自:小林在线 http://www.xlin.cn dVj)UH%C?jGbs2T+lpF]
  for(var i=1; i<=20; i++) setTimeout("TPL__("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn uHI2]HF%8Ucc? b]
 }  [文章来自:小林在线 http://www.xlin.cn %?=*? {fFwJx;=WM]
[文章来自:小林在线 http://www.xlin.cn jAzA=LB[[WeMX]
function TPL() {  [文章来自:小林在线 http://www.xlin.cn $rH#PE'N'j6 ]
 if (!run) {  [文章来自:小林在线 http://www.xlin.cn 0jx"3#`^4E? L]
  run = true;  [文章来自:小林在线 http://www.xlin.cn n_'41D n`^ioUs]
  P02i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn 'VO_=ZjU=U2f]
  P2.style.width = 0;  [文章来自:小林在线 http://www.xlin.cn D6PgJ :S.#I(; 4Fi,]
  kI--;  [文章来自:小林在线 http://www.xlin.cn ]Du MDfz \rDi "b]
  if (kI < 0) kI = nI-1;  [文章来自:小林在线 http://www.xlin.cn +." G`%@jPg_{p+GE]
  titLe(kI);  [文章来自:小林在线 http://www.xlin.cn *ZEL5vYu/M%AXGu5k\iZ]
  P01i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn &@]?S'?sSa7(=]
  P2i.src  = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn O s+Ua1|rb"J:7]
  for(var i=1; i<=20; i++) setTimeout("TPL_("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn 2g |=B_~;K~/VI]
 } else setTimeout("TPL()", 100);  [文章来自:小林在线 http://www.xlin.cn c2 zsK v E],rd]
[文章来自:小林在线 http://www.xlin.cn dm oEdF 12V A|6]]
function titLe(p) {  [文章来自:小林在线 http://www.xlin.cn &BnA?~O\YW5-EW L)]
 document.getElementById("TXTBOX").innerHTML = IMGSRC[p].alt;  [文章来自:小林在线 http://www.xlin.cn z ^,o147^c0}5J&]
[文章来自:小林在线 http://www.xlin.cn L}!A/iq@Rxoi-[Q]
onload = function() {  [文章来自:小林在线 http://www.xlin.cn N2?L!a;Q=(5g@Ht9H]
 IMGSRC  = document.getElementById("imgsrc").getElementsByTagName("img");  [文章来自:小林在线 http://www.xlin.cn Z\HcOI7j!\=?K MR_x]
 DB      = document.getElementById("DHTMLBOOK");  [文章来自:小林在线 http://www.xlin.cn S{kr59_)-/]06`, #]
 P01     = DB.getElementsByTagName("span")[0];  [文章来自:小林在线 http://www.xlin.cn  Ex%_%RLr{B@i;:UW]
 P01i    = P01.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn ys'O_L =we6mpf"Q]
 P02     = DB.getElementsByTagName("span")[1];  [文章来自:小林在线 http://www.xlin.cn rwHq{DJS?[K tVk+]
 P02i    = P02.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn U I7;1fhEW\t+"&]
 P1      = DB.getElementsByTagName("span")[2];  [文章来自:小林在线 http://www.xlin.cn 5-ml Q4$^2Yrm^?v_1]
 P1i     = P1.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn k)A:erA wQ/ixi.1o]
 P2      = DB.getElementsByTagName("span")[3];  [文章来自:小林在线 http://www.xlin.cn 4aV aX1SUsF~Xn#]
 P2i     = P2.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn s1 FDJs/c=_)[ 75]
 nI      = IMGSRC.length;  [文章来自:小林在线 http://www.xlin.cn Yw'M4 'Je a?#IPf`]
 P1i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn w]SVBO;$V/Hy]
 P2i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn $Yq^r;8DN,3s 2]]
 titLe(kI);  [文章来自:小林在线 http://www.xlin.cn 2*w- ao8&9Azpe^dw]
 DB.style.visibility = "visible";  [文章来自:小林在线 http://www.xlin.cn H_"5qzcsY|GdEO]zm]
[文章来自:小林在线 http://www.xlin.cn  )vK7fU\;+)Z@iDe]
//-->  [文章来自:小林在线 http://www.xlin.cn AlL@~kLeA/u*K jyx]
</SCRIPT>  [文章来自:小林在线 http://www.xlin.cn 7'm{%_c9(?)OJNAc 3]
<META content="MSHTML 6.00.6000.16809" name=GENERATOR></HEAD>  [文章来自:小林在线 http://www.xlin.cn t:d-VJ=.Tj(!x) I?8ME]
<BODY>  [文章来自:小林在线 http://www.xlin.cn 74`gJr]pV~Scx&BJ]
<DIV id=center>  [文章来自:小林在线 http://www.xlin.cn fzc ^WE'6Ar "3]
<DIV id=DHTMLBOOK><SPAN class=page onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img></SPAN>  [文章来自:小林在线 http://www.xlin.cn F6 m1+A(T$MBh]dO]
<SPAN class="page right" onmousedown="return false;" ondblclick=TPR(); onclick=TPR();><IMG class=img style="LEFT: -100%"></SPAN>  [文章来自:小林在线 http://www.xlin.cn i6d"+ D%pY5d/y]
<SPAN class="page turn" onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img style="FILTER: alpha(); opacity: 1"></SPAN>  [文章来自:小林在线 http://www.xlin.cn i+F S4tD~L)(]AIo:7^]
<SPAN class="page turn right" onmousedown="return false;" ondblclick=TPR(); onclick=TPR();><IMG class=img style="FILTER: alpha(); LEFT: -100%; opacity: 1"></SPAN>   [文章来自:小林在线 http://www.xlin.cn eQ&O|n}u56Dd?6Dk]
<DIV id=TXTBOX></DIV></DIV></DIV>  [文章来自:小林在线 http://www.xlin.cn CN nI0(rV^?h^"zBXE Q]
<DIV id=imgsrc style="VISIBILITY: hidden">  [文章来自:小林在线 http://www.xlin.cn {SL4|=nS0;+`b5]
<IMG alt="In the early morning he departed." src="12499727220.jpg"> <IMG alt="Believing she had dreamed of the roar of his bike," src="12499727221.jpg"> <IMG alt="she woke up to the sunshine in her eyelids." src="12499727222.jpg"> </DIV></BODY></HTML>

  • 引用地址:
  • http://www.xlin.cn/linsw/Article/ShowArticle.asp?ArticleID=2249 (点击复制)
网友评论(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)