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

JS实现图片翻书效果

数据加载中...
<html xmlns="http://www.w3.org/1999/xhtml">  [文章来自:小林在线 http://www.xlin.cn 8XKIIt&NAdw=c]
<head>  [文章来自:小林在线 http://www.xlin.cn 9Ln1?o2Y 2e^Zh 3$R]
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  [文章来自:小林在线 http://www.xlin.cn O-=q#/\8wW}BGrJo]
<title>JS实现图片翻书效果</title>  [文章来自:小林在线 http://www.xlin.cn 4BTGe=[m_+23a|3s]
<META http-equiv=imagetoolbar content=no>  [文章来自:小林在线 http://www.xlin.cn E4*ZAoc-5 2S (]
<STYLE type=text/css>  [文章来自:小林在线 http://www.xlin.cn br=S&px7*l(CRql]
#center {  [文章来自:小林在线 http://www.xlin.cn J9lpx R]- tb]
 LEFT: 50%; POSITION: absolute; TOP: 50%  [文章来自:小林在线 http://www.xlin.cn WPD#O_.3i-[j9O7]
[文章来自:小林在线 http://www.xlin.cn 0s=^T^1uKz?]VS%]
#DHTMLBOOK {  [文章来自:小林在线 http://www.xlin.cn U?wFnMbdjellIO:~?]
 BACKGROUND: #000; LEFT: -210px; VISIBILITY: hidden; WIDTH: 420px; POSITION: relative; TOP: -160px; HEIGHT: 320px  [文章来自:小林在线 http://www.xlin.cn ^Dn01h[U#V\ D;r]
[文章来自:小林在线 http://www.xlin.cn e}}``[*'M]$q~r[ ]
#TXTBOX {  [文章来自:小林在线 http://www.xlin.cn Kl%|lS21Y0$jmA%ms]
 FONT-SIZE: 0.8em; WIDTH: 410px; COLOR: #aba193; FONT-FAMILY: verdana; POSITION: absolute; TOP: 320px; TEXT-ALIGN: center  [文章来自:小林在线 http://www.xlin.cn "G]Dezp.jH [w?s)9,]
[文章来自:小林在线 http://www.xlin.cn A,m:2ENC.,. 7w2k}%M]
.page {  [文章来自:小林在线 http://www.xlin.cn NV6`\u{/7L?)M_uJ#I]
 OVERFLOW: hidden; BORDER-LEFT: #000000 1px solid; WIDTH: 50%; CURSOR: pointer; POSITION: absolute; HEIGHT: 100%  [文章来自:小林在线 http://www.xlin.cn Y#^7 YcLS@mapvcW]
[文章来自:小林在线 http://www.xlin.cn $9 ,?zV!x (f%]
.right {  [文章来自:小林在线 http://www.xlin.cn KDM*C!fp]/FUJ;PO,B]
 BORDER-RIGHT: #000000 1px solid; LEFT: 50%  [文章来自:小林在线 http://www.xlin.cn Q'5& /kagv]$Q8Nd]
[文章来自:小林在线 http://www.xlin.cn sGb -]-w`i:[4x'X]
.turn {  [文章来自:小林在线 http://www.xlin.cn 7@PUzf,v!nK]Fc`gmH]
 BACKGROUND: #000000  [文章来自:小林在线 http://www.xlin.cn EJgf[@O,Je ?K^?]
[文章来自:小林在线 http://www.xlin.cn %PP!]FA%Oob"Mg@Ut]
.img {  [文章来自:小林在线 http://www.xlin.cn X_J?eT{or]!ph)\{4]
 WIDTH: 200%; POSITION: absolute; HEIGHT: 100%  [文章来自:小林在线 http://www.xlin.cn  U(GoSdm z?~l]
[文章来自:小林在线 http://www.xlin.cn _6;D9'` s3o@U1%+ R]
</STYLE>  [文章来自:小林在线 http://www.xlin.cn T4C/]Qv! -P/]
<SCRIPT type=text/javascript><!--  [文章来自:小林在线 http://www.xlin.cn " E#e#sCz8KA f=K]
document.onselectstart = function () { return false; }  [文章来自:小林在线 http://www.xlin.cn Cq8$u?@T-]8zADo0Qt]
var nI  = 0;  [文章来自:小林在线 http://www.xlin.cn 9XBj7Y[xRKI#+]
var kI  = 0;  [文章来自:小林在线 http://www.xlin.cn -VabUD4 u9?^'5Fwl]
var run = false;  [文章来自:小林在线 http://www.xlin.cn PZ3vT! !^OfXp]
function setOpacity(obj,o) {  [文章来自:小林在线 http://www.xlin.cn %a"7L i4~0GD=[[^]
 if (o<0) o=0; else if (o>100) o = 100;  [文章来自:小林在线 http://www.xlin.cn a[O}9C"b"u2m#&!8]
 if (obj.filters)obj.filters.alpha.opacity=o; else obj.style.opacity = o/100;  [文章来自:小林在线 http://www.xlin.cn j'dT})RJ+?5i$!]
[文章来自:小林在线 http://www.xlin.cn |qRo(h|dQl~?Qq}3?]
function TPR__(p) {  [文章来自:小林在线 http://www.xlin.cn ko[e:Z1==Ji;.f)c]
 P1.style.left  = 50-(2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn 9qiwdp; 9p&;My]
 P1.style.width = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn ,0\+Y:,D?kapOd]
 setOpacity(P1i, .5*p*p);  [文章来自:小林在线 http://www.xlin.cn eewVo9gko ,{H ?Gy]
 if (p == 20) run = false;  [文章来自:小林在线 http://www.xlin.cn YMKtl&*?}Fq# !:y]
[文章来自:小林在线 http://www.xlin.cn i Z?t'&Wp~?TE88]
function TPR_(p) {  [文章来自:小林在线 http://www.xlin.cn ^ j\+Ez?z+!";}m]
 P2.style.width = 50-(2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn fG]" rv 6`L.' ']
 setOpacity(P2i, 100-.5*(p*p));  [文章来自:小林在线 http://www.xlin.cn SN{K- %ri{/P:K]
 if (p == 20) {  [文章来自:小林在线 http://www.xlin.cn [X$l-Xb B1?=**dA]
  P2i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn ^]w A KL7?jppR ]
  setOpacity(P2i, 100);  [文章来自:小林在线 http://www.xlin.cn {{b4G 7(eG} zcH]
  P2.style.width = "50%";  [文章来自:小林在线 http://www.xlin.cn ^dql@ r5:y-4N'4p]
  for(var i=1; i<=20; i++) setTimeout("TPR__("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn \ c#mOKM-,zPK?0 ]
 }  [文章来自:小林在线 http://www.xlin.cn ; Q*(+h;[y?)o\QWI]
[文章来自:小林在线 http://www.xlin.cn Bcr*,X5oh/^):Lz]
function TPR() {  [文章来自:小林在线 http://www.xlin.cn "^ 3#9pM8* %PpF^]
 if (!run) {  [文章来自:小林在线 http://www.xlin.cn 4,D;4e\Ob!kW?4gT]
  run = true;  [文章来自:小林在线 http://www.xlin.cn Qgu%[) G&.)]
  P01i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn wJ.#6)QTuqRC){]
  P1.style.width = 0;  [文章来自:小林在线 http://www.xlin.cn Y:Ab0-ot3m/CSWDL]
  kI++;  [文章来自:小林在线 http://www.xlin.cn hldF832I!{$x#hp?']
  if (kI>=nI) kI = 0;  [文章来自:小林在线 http://www.xlin.cn L?Vw7CkAr~USk&B|=g]
  titLe(kI);  [文章来自:小林在线 http://www.xlin.cn vW^ewbw=jsx+ D x*]
  P02i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn r~GZ/yX?[ 9o!)[Q]
  P1i.src  = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn =vnYzgGk z[2W$_?2]
  for (var i=1; i<=20; i++) setTimeout("TPR_("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn  9N,Q_HH=[[F =\]
 } else setTimeout("TPR()", 100);  [文章来自:小林在线 http://www.xlin.cn =]N87!K0,J6=]
[文章来自:小林在线 http://www.xlin.cn mb{BL}P!"rfg(z]
function TPL__(p) {  [文章来自:小林在线 http://www.xlin.cn 9y8UiW@p6 LR6NE]
 P2.style.width = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn +6*7 s4@x5eSf}]
 setOpacity(P2i, .5*p*p);  [文章来自:小林在线 http://www.xlin.cn e?0`,P[sy5om?ei+]
 if (p == 20) run = false;  [文章来自:小林在线 http://www.xlin.cn qwykacYV7&bm&?c%cX]
[文章来自:小林在线 http://www.xlin.cn ?+Qk,RRH^Wm GN]
function TPL_(p) {  [文章来自:小林在线 http://www.xlin.cn yJ )DJZ^)u `]
 P1.style.left  = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn .EfV vKbVd5(ys A[]
 P1.style.width = 40+(10-2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn @pXpQ/!0IM02A %oU]
 setOpacity(P1i, 100-.5*(p*p));  [文章来自:小林在线 http://www.xlin.cn gq3Zqs b;q@[]
 if (p == 20) {  [文章来自:小林在线 http://www.xlin.cn g& r7wjSE9kj"v=]
  P1i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn t%'AP7[,SqV1p,#r]
  setOpacity(P1i, 100);  [文章来自:小林在线 http://www.xlin.cn @ :q-_BdcZt"8Jqa{(]
  P1.style.left  = 0;  [文章来自:小林在线 http://www.xlin.cn ( ; %0E1?t5g$M)+]
  P1.style.width = "50%";  [文章来自:小林在线 http://www.xlin.cn =hNpxc1P.] Wni]
  for(var i=1; i<=20; i++) setTimeout("TPL__("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn 2 !M,2V|}]xq;p]
 }  [文章来自:小林在线 http://www.xlin.cn tzIt0DL:Vm v!,m ^]
[文章来自:小林在线 http://www.xlin.cn G2g?K Kc Uj/IVY/^]
function TPL() {  [文章来自:小林在线 http://www.xlin.cn W 6-A7Jm 1asEQ\]
 if (!run) {  [文章来自:小林在线 http://www.xlin.cn ",vlBs=]A!S^G'*r]
  run = true;  [文章来自:小林在线 http://www.xlin.cn M!Q3On'U]B]$s]
  P02i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn @exVxY=t=S6?d08]
  P2.style.width = 0;  [文章来自:小林在线 http://www.xlin.cn *x?Us'7v0p8,]
  kI--;  [文章来自:小林在线 http://www.xlin.cn +wK^T] $NR3e ;9/8]
  if (kI < 0) kI = nI-1;  [文章来自:小林在线 http://www.xlin.cn ..==1tROE*%zK]
  titLe(kI);  [文章来自:小林在线 http://www.xlin.cn ~,e+_%DQ@)gy71^Wh[B]
  P01i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn ($; A1/'@msO*%[]
  P2i.src  = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn  mmD3"Xy;s$wfP/, ]
  for(var i=1; i<=20; i++) setTimeout("TPL_("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn ]Uu/F8O?,?Jn]
 } else setTimeout("TPL()", 100);  [文章来自:小林在线 http://www.xlin.cn F8hJ(tvy+\\r ]
[文章来自:小林在线 http://www.xlin.cn 'Y~|,6?(c6D S[]
function titLe(p) {  [文章来自:小林在线 http://www.xlin.cn }caaM 5RL;9"6!(]
 document.getElementById("TXTBOX").innerHTML = IMGSRC[p].alt;  [文章来自:小林在线 http://www.xlin.cn LK}2* O=a@iqLu]
[文章来自:小林在线 http://www.xlin.cn "j,Pz4|zS@*=9J y]
onload = function() {  [文章来自:小林在线 http://www.xlin.cn w9/lQiPiRT9#X]
 IMGSRC  = document.getElementById("imgsrc").getElementsByTagName("img");  [文章来自:小林在线 http://www.xlin.cn C/&E.x.}4;_W\{n.o]
 DB      = document.getElementById("DHTMLBOOK");  [文章来自:小林在线 http://www.xlin.cn s xO6:\=?e#%fiD^L]
 P01     = DB.getElementsByTagName("span")[0];  [文章来自:小林在线 http://www.xlin.cn u@KZ88=d$M7/D\=]
 P01i    = P01.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn :_7.IG? :#"c+]
 P02     = DB.getElementsByTagName("span")[1];  [文章来自:小林在线 http://www.xlin.cn 7^,Q18eoea`=3]
 P02i    = P02.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn D?ejDn\ sTpYr u5]
 P1      = DB.getElementsByTagName("span")[2];  [文章来自:小林在线 http://www.xlin.cn lU L1 vz&#,bC1qn71z]
 P1i     = P1.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn Vt?}ar?+eUdo"%a {]
 P2      = DB.getElementsByTagName("span")[3];  [文章来自:小林在线 http://www.xlin.cn 6fIA2x7Bbv3h33S]
 P2i     = P2.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn i=5+c(:7_acZ6;]}C]
 nI      = IMGSRC.length;  [文章来自:小林在线 http://www.xlin.cn SrC~O.W_4 I"DplU{{]]
 P1i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn e: j6*N\9%w+'%, O]
 P2i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn =GG%InM Na ?`j# N]
 titLe(kI);  [文章来自:小林在线 http://www.xlin.cn gz?6WQc_/q1TQCjTo']
 DB.style.visibility = "visible";  [文章来自:小林在线 http://www.xlin.cn AA )Cx0-V9OD\f&IL6]
[文章来自:小林在线 http://www.xlin.cn |0kW5O6[0k7Fz=]
//-->  [文章来自:小林在线 http://www.xlin.cn =Z:jw3.zW@A]
</SCRIPT>  [文章来自:小林在线 http://www.xlin.cn cSmC|wmE lcy]
<META content="MSHTML 6.00.6000.16809" name=GENERATOR></HEAD>  [文章来自:小林在线 http://www.xlin.cn c?oJD, [sj[OF-?Ss]
<BODY>  [文章来自:小林在线 http://www.xlin.cn N@8{'b*=? ~8R'k}]
<DIV id=center>  [文章来自:小林在线 http://www.xlin.cn sg on(nv,Ic(B:l]
<DIV id=DHTMLBOOK><SPAN class=page onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img></SPAN>  [文章来自:小林在线 http://www.xlin.cn M(2%}C@073h{h]
<SPAN class="page right" onmousedown="return false;" ondblclick=TPR(); onclick=TPR();><IMG class=img style="LEFT: -100%"></SPAN>  [文章来自:小林在线 http://www.xlin.cn &kEOB+F.%'Va#]
<SPAN class="page turn" onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img style="FILTER: alpha(); opacity: 1"></SPAN>  [文章来自:小林在线 http://www.xlin.cn 01h^!v=`jf=S;*$]
<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 ;\\s?b7'3z=%r:0WX,]
<DIV id=TXTBOX></DIV></DIV></DIV>  [文章来自:小林在线 http://www.xlin.cn wE"$`]wk41$@bVH]
<DIV id=imgsrc style="VISIBILITY: hidden">  [文章来自:小林在线 http://www.xlin.cn I~ Ax[$ Ow(s/"ft]
<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条。评论内容只代表网友观点,与本站立场无关!)