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

JS实现图片翻书效果

数据加载中...
<html xmlns="http://www.w3.org/1999/xhtml">  [文章来自:小林在线 http://www.xlin.cn yS(N4UUmVjF=v]
<head>  [文章来自:小林在线 http://www.xlin.cn L5KMV1=A5sR!')Yd]
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  [文章来自:小林在线 http://www.xlin.cn Lty'8/d0fnlmOn]b5 *#]
<title>JS实现图片翻书效果</title>  [文章来自:小林在线 http://www.xlin.cn #X0z?'*Jh)Oz\`od9S]
<META http-equiv=imagetoolbar content=no>  [文章来自:小林在线 http://www.xlin.cn *~] 1S J1+(54l;']
<STYLE type=text/css>  [文章来自:小林在线 http://www.xlin.cn ..8NwO/6_HHtbYe]
#center {  [文章来自:小林在线 http://www.xlin.cn JyfkMK'/!9c{d)]
 LEFT: 50%; POSITION: absolute; TOP: 50%  [文章来自:小林在线 http://www.xlin.cn prXCq3~fkZh%RW~c;R]
[文章来自:小林在线 http://www.xlin.cn gX_^.6H=#JJ1CO!]
#DHTMLBOOK {  [文章来自:小林在线 http://www.xlin.cn Jzx-{bw0I= #]
 BACKGROUND: #000; LEFT: -210px; VISIBILITY: hidden; WIDTH: 420px; POSITION: relative; TOP: -160px; HEIGHT: 320px  [文章来自:小林在线 http://www.xlin.cn 3]94E3N]iO]
[文章来自:小林在线 http://www.xlin.cn X=p-*LYt%`1=W ]
#TXTBOX {  [文章来自:小林在线 http://www.xlin.cn ?7!jFa=~2=dkW+]UXD]
 FONT-SIZE: 0.8em; WIDTH: 410px; COLOR: #aba193; FONT-FAMILY: verdana; POSITION: absolute; TOP: 320px; TEXT-ALIGN: center  [文章来自:小林在线 http://www.xlin.cn {]4tA*t $D"h*%`j]
[文章来自:小林在线 http://www.xlin.cn r[0:[/' \n@wf:T\{]
.page {  [文章来自:小林在线 http://www.xlin.cn O5ud^^O{u,P^?U1FQ]
 OVERFLOW: hidden; BORDER-LEFT: #000000 1px solid; WIDTH: 50%; CURSOR: pointer; POSITION: absolute; HEIGHT: 100%  [文章来自:小林在线 http://www.xlin.cn +%9/&Q2Di|y6Y}#TMW ]
[文章来自:小林在线 http://www.xlin.cn OYY2u?E8&u [3W]
.right {  [文章来自:小林在线 http://www.xlin.cn NNDEV'epw|UkAh]
 BORDER-RIGHT: #000000 1px solid; LEFT: 50%  [文章来自:小林在线 http://www.xlin.cn iC:zMn h^f&x%`]
[文章来自:小林在线 http://www.xlin.cn nZ!]Rr)|u(JiY8uRwm]
.turn {  [文章来自:小林在线 http://www.xlin.cn =Q4ZUWE;e?xinrk]
 BACKGROUND: #000000  [文章来自:小林在线 http://www.xlin.cn FYH?l,(8N15Y9+47.@7]
[文章来自:小林在线 http://www.xlin.cn Ze72if=*mf7^l ]
.img {  [文章来自:小林在线 http://www.xlin.cn B"zAY;/AKaI=vH5;Y+]
 WIDTH: 200%; POSITION: absolute; HEIGHT: 100%  [文章来自:小林在线 http://www.xlin.cn w-1'_vG /+b.X'9?]
[文章来自:小林在线 http://www.xlin.cn TO\}=+ @GIuNFp !b]
</STYLE>  [文章来自:小林在线 http://www.xlin.cn x#mbd8J Sfq 0yh4G]
<SCRIPT type=text/javascript><!--  [文章来自:小林在线 http://www.xlin.cn gi5MHhJv1nry$}]
document.onselectstart = function () { return false; }  [文章来自:小林在线 http://www.xlin.cn Kq=HR=8 b%UQT]
var nI  = 0;  [文章来自:小林在线 http://www.xlin.cn +F3j#SF WW}UIr{ =~?+]
var kI  = 0;  [文章来自:小林在线 http://www.xlin.cn 6l3f8k.FrPnc,4.]
var run = false;  [文章来自:小林在线 http://www.xlin.cn 24Jd1 w#AHSzk:^Yp]
function setOpacity(obj,o) {  [文章来自:小林在线 http://www.xlin.cn i88(d4%7KGb= 3[ *]
 if (o<0) o=0; else if (o>100) o = 100;  [文章来自:小林在线 http://www.xlin.cn V=dU+qV9xK=hB /]
 if (obj.filters)obj.filters.alpha.opacity=o; else obj.style.opacity = o/100;  [文章来自:小林在线 http://www.xlin.cn *=-~| h R$}C6]
[文章来自:小林在线 http://www.xlin.cn g3JJQ#T;kD2S*I52 B]
function TPR__(p) {  [文章来自:小林在线 http://www.xlin.cn )X=tvhB^d8&POXC&fcK1]
 P1.style.left  = 50-(2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn vt2&;D !yVh*Jaw^]
 P1.style.width = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn gN=])WR-1~AP3Et]
 setOpacity(P1i, .5*p*p);  [文章来自:小林在线 http://www.xlin.cn _.);S(="v .MBG ZR]
 if (p == 20) run = false;  [文章来自:小林在线 http://www.xlin.cn /?JT0G8R)^i?sv\P]
[文章来自:小林在线 http://www.xlin.cn  )J19!?b)!C'E]
function TPR_(p) {  [文章来自:小林在线 http://www.xlin.cn # \4) ylqH !}R& ]
 P2.style.width = 50-(2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn x{\/O9TR_9`& f,kt }]
 setOpacity(P2i, 100-.5*(p*p));  [文章来自:小林在线 http://www.xlin.cn KJwu z&){BnA8]]
 if (p == 20) {  [文章来自:小林在线 http://www.xlin.cn 5= vhJc,Q;g7:=d]
  P2i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn q O HdIbWo$kKjF]
  setOpacity(P2i, 100);  [文章来自:小林在线 http://www.xlin.cn .d IL$K??`pc4?`B]
  P2.style.width = "50%";  [文章来自:小林在线 http://www.xlin.cn :qLDy#4RK\R-:.1]
  for(var i=1; i<=20; i++) setTimeout("TPR__("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn 2`]-i" _  ;:Y{]
 }  [文章来自:小林在线 http://www.xlin.cn dl'T.?h:p"  9]
[文章来自:小林在线 http://www.xlin.cn TE'N |zY.7y/P}?;A]
function TPR() {  [文章来自:小林在线 http://www.xlin.cn a;&P.r"+Ibr dV]
 if (!run) {  [文章来自:小林在线 http://www.xlin.cn "o hu|q9f=5og @]
  run = true;  [文章来自:小林在线 http://www.xlin.cn 3OgS'o@ ?bdK$fQ3]
  P01i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn **k94mvyoqWUp6]
  P1.style.width = 0;  [文章来自:小林在线 http://www.xlin.cn qRb59[GWtENT,]3]
  kI++;  [文章来自:小林在线 http://www.xlin.cn SH!db:3]V\sMhN^]
  if (kI>=nI) kI = 0;  [文章来自:小林在线 http://www.xlin.cn xy@V ^ 4iU;y4]
  titLe(kI);  [文章来自:小林在线 http://www.xlin.cn 9R)y\4E^',J2iQda]
  P02i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn 4XRiloL?C67($ezNN]
  P1i.src  = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn 0ag?U7/&I ?LxO1kW]
  for (var i=1; i<=20; i++) setTimeout("TPR_("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn ??h`.[ki}M"t(h&]
 } else setTimeout("TPR()", 100);  [文章来自:小林在线 http://www.xlin.cn @Ua]_5X\a"*J~"]
[文章来自:小林在线 http://www.xlin.cn b%eA69 SZ[+v=h~0`!O]
function TPL__(p) {  [文章来自:小林在线 http://www.xlin.cn FWXn?n1!|?RlR @B]
 P2.style.width = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn ZS0?te2b$ Aqfq?G]
 setOpacity(P2i, .5*p*p);  [文章来自:小林在线 http://www.xlin.cn 1^/ms1v'{''1+K;4]
 if (p == 20) run = false;  [文章来自:小林在线 http://www.xlin.cn S,=rOX43{u={]
[文章来自:小林在线 http://www.xlin.cn Ae+jfYBB;!TA`=q L]
function TPL_(p) {  [文章来自:小林在线 http://www.xlin.cn *74 m+(9gRg|:U\:`e]
 P1.style.left  = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn J73/CeW&M8 .d(6=x]
 P1.style.width = 40+(10-2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn 1?WUpIYTca[+9]
 setOpacity(P1i, 100-.5*(p*p));  [文章来自:小林在线 http://www.xlin.cn o%bKoS-"qR=h[}#$]
 if (p == 20) {  [文章来自:小林在线 http://www.xlin.cn 5XC\}rA" OIO]jR?$$]
  P1i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn hL.k+^bM#rJM`L]
  setOpacity(P1i, 100);  [文章来自:小林在线 http://www.xlin.cn {JwWb3B" w4h`7]
  P1.style.left  = 0;  [文章来自:小林在线 http://www.xlin.cn =QY"79f,t ^Yyt]
  P1.style.width = "50%";  [文章来自:小林在线 http://www.xlin.cn _wYmY p4{ d}gG"C[]
  for(var i=1; i<=20; i++) setTimeout("TPL__("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn &|@Cf4v'Ll7G[ /]
 }  [文章来自:小林在线 http://www.xlin.cn tt%Xe]T,a$n5fY(4?%]
[文章来自:小林在线 http://www.xlin.cn 3Dup/X?#+q)=FzLpN]
function TPL() {  [文章来自:小林在线 http://www.xlin.cn ?naaPSRx 4D"=L]
 if (!run) {  [文章来自:小林在线 http://www.xlin.cn Bp*dW*:sP9BS7z=HA?]
  run = true;  [文章来自:小林在线 http://www.xlin.cn jz#P/\ PIuf 5aH@]
  P02i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn xu5A|~3y/PVU#!]
  P2.style.width = 0;  [文章来自:小林在线 http://www.xlin.cn `qq_N':Tq,?Rq_,+]
  kI--;  [文章来自:小林在线 http://www.xlin.cn WuMjz $#0b\waiT Q`8]
  if (kI < 0) kI = nI-1;  [文章来自:小林在线 http://www.xlin.cn xWx&6;F3:OK}psZ}!F]
  titLe(kI);  [文章来自:小林在线 http://www.xlin.cn u EU g)o h$D]
  P01i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn % Y # Mf b@XucYV]
  P2i.src  = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn #(Nl]?6XJu)KFo~'?}]
  for(var i=1; i<=20; i++) setTimeout("TPL_("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn ]zS   ,BZR @]
 } else setTimeout("TPL()", 100);  [文章来自:小林在线 http://www.xlin.cn y.X3(zB*MN}EF6j]
[文章来自:小林在线 http://www.xlin.cn S8@8w=|BD7 J9TdG7]
function titLe(p) {  [文章来自:小林在线 http://www.xlin.cn "xmXX9Rm!O\ ?8v\ ]
 document.getElementById("TXTBOX").innerHTML = IMGSRC[p].alt;  [文章来自:小林在线 http://www.xlin.cn 8}SLtG)f YRs6RJR]
[文章来自:小林在线 http://www.xlin.cn ET+t'{m%Nz5!zogs\]
onload = function() {  [文章来自:小林在线 http://www.xlin.cn }3]4OeSvt) 4?)]
 IMGSRC  = document.getElementById("imgsrc").getElementsByTagName("img");  [文章来自:小林在线 http://www.xlin.cn o+,Grp?4s (a\uZ}]
 DB      = document.getElementById("DHTMLBOOK");  [文章来自:小林在线 http://www.xlin.cn KKtA?GF(OMpDF!e0D]
 P01     = DB.getElementsByTagName("span")[0];  [文章来自:小林在线 http://www.xlin.cn G TK?Oeu|"LUla]
 P01i    = P01.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn Za q4!gKm!?N] $]
 P02     = DB.getElementsByTagName("span")[1];  [文章来自:小林在线 http://www.xlin.cn Iuz/8?tK]&4e}Dy]
 P02i    = P02.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn fzKj/r N2zZLC.g"1`|]
 P1      = DB.getElementsByTagName("span")[2];  [文章来自:小林在线 http://www.xlin.cn OV@_cLk\=odape{Q]
 P1i     = P1.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn =D?Qp sNH0 n:=xT]
 P2      = DB.getElementsByTagName("span")[3];  [文章来自:小林在线 http://www.xlin.cn j9Dbk,jaaNw:3]
 P2i     = P2.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn [Z#JJKeeHQ?ZO]
 nI      = IMGSRC.length;  [文章来自:小林在线 http://www.xlin.cn  s 9t}TZ^g z]
 P1i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn ?b$r;?0'.G IG;6]
 P2i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn 2jXt@"dE"  tAq=R]
 titLe(kI);  [文章来自:小林在线 http://www.xlin.cn %a";1Lr AX42znDDw]
 DB.style.visibility = "visible";  [文章来自:小林在线 http://www.xlin.cn {@+D2*Z= -:C2J ]
[文章来自:小林在线 http://www.xlin.cn UA*Bt }_V]w@_pgx]
//-->  [文章来自:小林在线 http://www.xlin.cn Z/S9eF 760 y'Or]
</SCRIPT>  [文章来自:小林在线 http://www.xlin.cn ;kXr{tM 3|H"P)(]
<META content="MSHTML 6.00.6000.16809" name=GENERATOR></HEAD>  [文章来自:小林在线 http://www.xlin.cn gsP=#sUxO=v?.^k)]
<BODY>  [文章来自:小林在线 http://www.xlin.cn 6( .&o8o)`N)]Hmgq]
<DIV id=center>  [文章来自:小林在线 http://www.xlin.cn @Ko")K\fyAB0(1]
<DIV id=DHTMLBOOK><SPAN class=page onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img></SPAN>  [文章来自:小林在线 http://www.xlin.cn GA8*f7 )1 HbZx]
<SPAN class="page right" onmousedown="return false;" ondblclick=TPR(); onclick=TPR();><IMG class=img style="LEFT: -100%"></SPAN>  [文章来自:小林在线 http://www.xlin.cn =|h' OT?{q$kb]
<SPAN class="page turn" onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img style="FILTER: alpha(); opacity: 1"></SPAN>  [文章来自:小林在线 http://www.xlin.cn z(ubejqu%8rAR=Z]
<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 AN17jXva*m]
<DIV id=TXTBOX></DIV></DIV></DIV>  [文章来自:小林在线 http://www.xlin.cn )+B[P* ]cHPF~F o]
<DIV id=imgsrc style="VISIBILITY: hidden">  [文章来自:小林在线 http://www.xlin.cn . 9?o2x a vp!]c]
<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条。评论内容只代表网友观点,与本站立场无关!)