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

JS实现图片翻书效果

数据加载中...
<html xmlns="http://www.w3.org/1999/xhtml">  [文章来自:小林在线 http://www.xlin.cn px\r;;F:{V ) M "e w]
<head>  [文章来自:小林在线 http://www.xlin.cn fNp@o8/QoA"nR f2/]
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  [文章来自:小林在线 http://www.xlin.cn jd1*A.(oh~$c0"XN]
<title>JS实现图片翻书效果</title>  [文章来自:小林在线 http://www.xlin.cn * fau Sv?*fx"/]
<META http-equiv=imagetoolbar content=no>  [文章来自:小林在线 http://www.xlin.cn =o_00Ri]bHmUYE\:]
<STYLE type=text/css>  [文章来自:小林在线 http://www.xlin.cn '&,pYBOF@ToHo]
#center {  [文章来自:小林在线 http://www.xlin.cn )d%+.Do]#T=o]
 LEFT: 50%; POSITION: absolute; TOP: 50%  [文章来自:小林在线 http://www.xlin.cn cyRa[ W.z=9H Tcei]
[文章来自:小林在线 http://www.xlin.cn Gib/1\_fVSi|Z?]
#DHTMLBOOK {  [文章来自:小林在线 http://www.xlin.cn c o;%O@B1"M*vQ]
 BACKGROUND: #000; LEFT: -210px; VISIBILITY: hidden; WIDTH: 420px; POSITION: relative; TOP: -160px; HEIGHT: 320px  [文章来自:小林在线 http://www.xlin.cn jj'r`p0H5 %T*RXf]
[文章来自:小林在线 http://www.xlin.cn y ~e=!N#`N)j}?U]
#TXTBOX {  [文章来自:小林在线 http://www.xlin.cn i9H|6Y$Gi9R"L c]
 FONT-SIZE: 0.8em; WIDTH: 410px; COLOR: #aba193; FONT-FAMILY: verdana; POSITION: absolute; TOP: 320px; TEXT-ALIGN: center  [文章来自:小林在线 http://www.xlin.cn =A ;AB?w) JWxrGt\]
[文章来自:小林在线 http://www.xlin.cn ll;7%(F =snVfUDx]
.page {  [文章来自:小林在线 http://www.xlin.cn 6f0{tuFXwg*Ch:{H]
 OVERFLOW: hidden; BORDER-LEFT: #000000 1px solid; WIDTH: 50%; CURSOR: pointer; POSITION: absolute; HEIGHT: 100%  [文章来自:小林在线 http://www.xlin.cn b0?{=G6;1CeM(v%]
[文章来自:小林在线 http://www.xlin.cn "bn?eAz? Igbbm#6]
.right {  [文章来自:小林在线 http://www.xlin.cn DEV!|wS^6" W=]
 BORDER-RIGHT: #000000 1px solid; LEFT: 50%  [文章来自:小林在线 http://www.xlin.cn .XGktig`h Xk_:]
[文章来自:小林在线 http://www.xlin.cn ZZPG1|cdl,@rl;%]
.turn {  [文章来自:小林在线 http://www.xlin.cn :: Y!-w"![^6&%]
 BACKGROUND: #000000  [文章来自:小林在线 http://www.xlin.cn osr-O #My L}.sx~f]
[文章来自:小林在线 http://www.xlin.cn D,$xvD5%Y1#U?@]
.img {  [文章来自:小林在线 http://www.xlin.cn [8~C&|.S-_Cwy_/]
 WIDTH: 200%; POSITION: absolute; HEIGHT: 100%  [文章来自:小林在线 http://www.xlin.cn G^uC ,=ju;=:]
[文章来自:小林在线 http://www.xlin.cn ]v]ZdWk)%r[h]
</STYLE>  [文章来自:小林在线 http://www.xlin.cn B+%SP8w (9{De|=1]
<SCRIPT type=text/javascript><!--  [文章来自:小林在线 http://www.xlin.cn b("t9P iRCP w2t]
document.onselectstart = function () { return false; }  [文章来自:小林在线 http://www.xlin.cn /uTY=1`rVwe{?Vt{}]
var nI  = 0;  [文章来自:小林在线 http://www.xlin.cn B-2))J]t XXJ{KDO]
var kI  = 0;  [文章来自:小林在线 http://www.xlin.cn '0|y-g&hzUH:r]
var run = false;  [文章来自:小林在线 http://www.xlin.cn lM*2zMPNVlutE!]
function setOpacity(obj,o) {  [文章来自:小林在线 http://www.xlin.cn v8FS`n.xn-EQ+@Q#1]
 if (o<0) o=0; else if (o>100) o = 100;  [文章来自:小林在线 http://www.xlin.cn  ]aT)6O\b H~Jj]
 if (obj.filters)obj.filters.alpha.opacity=o; else obj.style.opacity = o/100;  [文章来自:小林在线 http://www.xlin.cn Y[Oz\&6R/w^`GNfW]
[文章来自:小林在线 http://www.xlin.cn nFLiI[=~OfC E]
function TPR__(p) {  [文章来自:小林在线 http://www.xlin.cn @9'; F (&gG6WaT@D]
 P1.style.left  = 50-(2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn E8nP"^NkD=z0 `$&]
 P1.style.width = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn =q c%Ql\S=?OO[K]
 setOpacity(P1i, .5*p*p);  [文章来自:小林在线 http://www.xlin.cn DoU:[COZ)FKDrrO=]
 if (p == 20) run = false;  [文章来自:小林在线 http://www.xlin.cn R)`=yGou?F!^'f%?v]
[文章来自:小林在线 http://www.xlin.cn YS+u=/Sh:NLf*y ]
function TPR_(p) {  [文章来自:小林在线 http://www.xlin.cn +/jOpgGlg,%'0^j]
 P2.style.width = 50-(2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn W9.94fQ[LaG".is"C ]
 setOpacity(P2i, 100-.5*(p*p));  [文章来自:小林在线 http://www.xlin.cn \y[g%Y*I+`i2'me|.F/]
 if (p == 20) {  [文章来自:小林在线 http://www.xlin.cn ?%GFO,b,vgz V`]
  P2i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn k5nJTGu g U=E]
  setOpacity(P2i, 100);  [文章来自:小林在线 http://www.xlin.cn JXr hWX,"L&?:h ]
  P2.style.width = "50%";  [文章来自:小林在线 http://www.xlin.cn Egrvt}ZsU v%j]
  for(var i=1; i<=20; i++) setTimeout("TPR__("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn n sSGP1 $\SJ)7"Z]
 }  [文章来自:小林在线 http://www.xlin.cn dVg/M-wF3Y,S]
[文章来自:小林在线 http://www.xlin.cn Kc^x`c @]m# jd:]
function TPR() {  [文章来自:小林在线 http://www.xlin.cn Eu &Puj$#rTCo]
 if (!run) {  [文章来自:小林在线 http://www.xlin.cn U]1+.CD=?pL]zW5 p]
  run = true;  [文章来自:小林在线 http://www.xlin.cn f CJog}#:2 Z([)]
  P01i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn ^\ VqRfx*;?2aZ]
  P1.style.width = 0;  [文章来自:小林在线 http://www.xlin.cn $8/x_ V?}5n9m)$]
  kI++;  [文章来自:小林在线 http://www.xlin.cn ~ *2E|/uFE^ 1]
  if (kI>=nI) kI = 0;  [文章来自:小林在线 http://www.xlin.cn *=I)w_hf\v v'c~]
  titLe(kI);  [文章来自:小林在线 http://www.xlin.cn vj/Z_S,X)LV70;nqG]
  P02i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn &D[?0?D8| 2YD]
  P1i.src  = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn k4\.h\A tW0,J]
  for (var i=1; i<=20; i++) setTimeout("TPR_("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn "xy"|k="513npoY{)]
 } else setTimeout("TPR()", 100);  [文章来自:小林在线 http://www.xlin.cn =$!GVp=5lQ~=%]
[文章来自:小林在线 http://www.xlin.cn bLK!Tln|+fpwjX]
function TPL__(p) {  [文章来自:小林在线 http://www.xlin.cn *18]!x|TT8x+Ld ]
 P2.style.width = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn ;!@ScWM7?q7# } ]
 setOpacity(P2i, .5*p*p);  [文章来自:小林在线 http://www.xlin.cn bF2gtUvun&]
 if (p == 20) run = false;  [文章来自:小林在线 http://www.xlin.cn jT Aj{=VI(yn/FdVBC]
[文章来自:小林在线 http://www.xlin.cn f~NJhS^fY;$8,wwKmc]
function TPL_(p) {  [文章来自:小林在线 http://www.xlin.cn BT*?\Q*OI:#MQqg`z]
 P1.style.left  = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn HyRxj3WcH#X?q;t]
 P1.style.width = 40+(10-2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn ]`1mFxLhD5N"o\9]
 setOpacity(P1i, 100-.5*(p*p));  [文章来自:小林在线 http://www.xlin.cn l5OZ(x{k*XEt|8AGL_]
 if (p == 20) {  [文章来自:小林在线 http://www.xlin.cn `Gp-P(CKN=)L0?n]
  P1i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn Jl|!AeFC0A,%F{^I]
  setOpacity(P1i, 100);  [文章来自:小林在线 http://www.xlin.cn "C|489=;sz SK@]
  P1.style.left  = 0;  [文章来自:小林在线 http://www.xlin.cn ) AhoDkf1)R/]
  P1.style.width = "50%";  [文章来自:小林在线 http://www.xlin.cn l6jPn'xV~q3 ,NQ]
  for(var i=1; i<=20; i++) setTimeout("TPL__("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn dQ-krgy"J(b-xHKW&]
 }  [文章来自:小林在线 http://www.xlin.cn ;ni9O4jj0-Cn`q}]
[文章来自:小林在线 http://www.xlin.cn )is,XDG M]YK? ^0]
function TPL() {  [文章来自:小林在线 http://www.xlin.cn {cQPS@/rP=TQe"?Bj]
 if (!run) {  [文章来自:小林在线 http://www.xlin.cn 4^,m0~(i[;Nu ,F']
  run = true;  [文章来自:小林在线 http://www.xlin.cn Mv?Q(w*dbu{?#"`8]
  P02i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn =krLdiyBf9_a ]
  P2.style.width = 0;  [文章来自:小林在线 http://www.xlin.cn B1}vrBAQoB~?CTu `]
  kI--;  [文章来自:小林在线 http://www.xlin.cn v]AIFN-rw@09l ]
  if (kI < 0) kI = nI-1;  [文章来自:小林在线 http://www.xlin.cn  i P\ya-lM6/$9V]
  titLe(kI);  [文章来自:小林在线 http://www.xlin.cn C#'lQ3({i?X4@]
  P01i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn #fy  X{^}NEY]
  P2i.src  = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn :2]/WA59 K/J+h)1]
  for(var i=1; i<=20; i++) setTimeout("TPL_("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn L_C#4:y 9~F`]
 } else setTimeout("TPL()", 100);  [文章来自:小林在线 http://www.xlin.cn Xt?_yM" tIpCI2,]
[文章来自:小林在线 http://www.xlin.cn i['?&8&J^ymU\]
function titLe(p) {  [文章来自:小林在线 http://www.xlin.cn a~8?{&;XHDDe=?yy~]
 document.getElementById("TXTBOX").innerHTML = IMGSRC[p].alt;  [文章来自:小林在线 http://www.xlin.cn +Kw^#o\:lmDed=Pz]
[文章来自:小林在线 http://www.xlin.cn !6o&wYio5u=)b '4]
onload = function() {  [文章来自:小林在线 http://www.xlin.cn RuZN|X/B5/d5_]
 IMGSRC  = document.getElementById("imgsrc").getElementsByTagName("img");  [文章来自:小林在线 http://www.xlin.cn $T^'qD# bsJ5wb ]]
 DB      = document.getElementById("DHTMLBOOK");  [文章来自:小林在线 http://www.xlin.cn zMY~(zLSC}dK=_u?k]
 P01     = DB.getElementsByTagName("span")[0];  [文章来自:小林在线 http://www.xlin.cn 7(-l@.]5wo ~@H1G]
 P01i    = P01.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn E+=QYe+ZGwzOi,)vy]
 P02     = DB.getElementsByTagName("span")[1];  [文章来自:小林在线 http://www.xlin.cn  $']_2,@v@]
 P02i    = P02.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn A7))~|! WbQL]
 P1      = DB.getElementsByTagName("span")[2];  [文章来自:小林在线 http://www.xlin.cn $vPf5%vwryHK+(Q r]
 P1i     = P1.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn V^A_ZLT6W}k`]
 P2      = DB.getElementsByTagName("span")[3];  [文章来自:小林在线 http://www.xlin.cn p"yGI;V,JG(ql2Vr]
 P2i     = P2.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn os,-&atG$ -`/ n{c]
 nI      = IMGSRC.length;  [文章来自:小林在线 http://www.xlin.cn W-7-hZ5JqHu =;2,|O&d]
 P1i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn :O!z}\?r@6k`8)( =1k]
 P2i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn TL`byVmVl3Y*H3;sP,x]
 titLe(kI);  [文章来自:小林在线 http://www.xlin.cn RL%/r;?rYoG hdn]
 DB.style.visibility = "visible";  [文章来自:小林在线 http://www.xlin.cn 27NKgPx~ bMgMYxgk]
[文章来自:小林在线 http://www.xlin.cn DXwBL)8?XK ]
//-->  [文章来自:小林在线 http://www.xlin.cn PS0EZ0w\=E)- /`i]
</SCRIPT>  [文章来自:小林在线 http://www.xlin.cn RRy-M.$k1HLS8o~]
<META content="MSHTML 6.00.6000.16809" name=GENERATOR></HEAD>  [文章来自:小林在线 http://www.xlin.cn `%1w\%e7}SPst gw]
<BODY>  [文章来自:小林在线 http://www.xlin.cn +0V|58{K"$OO=He]
<DIV id=center>  [文章来自:小林在线 http://www.xlin.cn #! %l0QB+uou]O3]
<DIV id=DHTMLBOOK><SPAN class=page onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img></SPAN>  [文章来自:小林在线 http://www.xlin.cn 4"!AnQeH^a&i']
<SPAN class="page right" onmousedown="return false;" ondblclick=TPR(); onclick=TPR();><IMG class=img style="LEFT: -100%"></SPAN>  [文章来自:小林在线 http://www.xlin.cn .NlMM^ei~s-5|'W=]
<SPAN class="page turn" onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img style="FILTER: alpha(); opacity: 1"></SPAN>  [文章来自:小林在线 http://www.xlin.cn B #=W Wugh9BObOX"]
<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 '`v,}*[T=EDY~odY2]
<DIV id=TXTBOX></DIV></DIV></DIV>  [文章来自:小林在线 http://www.xlin.cn \8,tAn+vkdf,2u#Ln]
<DIV id=imgsrc style="VISIBILITY: hidden">  [文章来自:小林在线 http://www.xlin.cn /u.=YB"8MdM G!u]
<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条。评论内容只代表网友观点,与本站立场无关!)