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

JS实现图片翻书效果

数据加载中...
<html xmlns="http://www.w3.org/1999/xhtml">  [文章来自:小林在线 http://www.xlin.cn U3e$AS{%pm;~m39L]
<head>  [文章来自:小林在线 http://www.xlin.cn P{*k=Ri^'Kvh]
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  [文章来自:小林在线 http://www.xlin.cn UK?k'E.EO@lo %]
<title>JS实现图片翻书效果</title>  [文章来自:小林在线 http://www.xlin.cn E^n%`A?^S4$*v'MJD]
<META http-equiv=imagetoolbar content=no>  [文章来自:小林在线 http://www.xlin.cn YU q:'pZ2%W[\&w4]
<STYLE type=text/css>  [文章来自:小林在线 http://www.xlin.cn @K69'i8c9/_1M 0ze]
#center {  [文章来自:小林在线 http://www.xlin.cn "cR+ (3(0EX=Hp. ]
 LEFT: 50%; POSITION: absolute; TOP: 50%  [文章来自:小林在线 http://www.xlin.cn 'R=59wLC51;9$@n\]
[文章来自:小林在线 http://www.xlin.cn *{w ,MQMl, )Q4k?]
#DHTMLBOOK {  [文章来自:小林在线 http://www.xlin.cn h)M]dr7i$vO=f*]]
 BACKGROUND: #000; LEFT: -210px; VISIBILITY: hidden; WIDTH: 420px; POSITION: relative; TOP: -160px; HEIGHT: 320px  [文章来自:小林在线 http://www.xlin.cn "-f &|Kf/8*AqZ,']
[文章来自:小林在线 http://www.xlin.cn tCN=x"QXQUhg{d64]
#TXTBOX {  [文章来自:小林在线 http://www.xlin.cn 3w 4e[ U=un]
 FONT-SIZE: 0.8em; WIDTH: 410px; COLOR: #aba193; FONT-FAMILY: verdana; POSITION: absolute; TOP: 320px; TEXT-ALIGN: center  [文章来自:小林在线 http://www.xlin.cn $i7Rg .l6fc#8nn,Tn]
[文章来自:小林在线 http://www.xlin.cn @cDNn)/ avosSM Y]
.page {  [文章来自:小林在线 http://www.xlin.cn ,/P'MW\V4xN=FJ:pUG]
 OVERFLOW: hidden; BORDER-LEFT: #000000 1px solid; WIDTH: 50%; CURSOR: pointer; POSITION: absolute; HEIGHT: 100%  [文章来自:小林在线 http://www.xlin.cn d, xm^5ix?%D&eKH}]
[文章来自:小林在线 http://www.xlin.cn 8qK0{Wi=gpYHVB=]
.right {  [文章来自:小林在线 http://www.xlin.cn `B(%% x+W(M U]
 BORDER-RIGHT: #000000 1px solid; LEFT: 50%  [文章来自:小林在线 http://www.xlin.cn O!hg^GV&3.5T~EP)f]
[文章来自:小林在线 http://www.xlin.cn 1AXy6:)H! (ye[)&]
.turn {  [文章来自:小林在线 http://www.xlin.cn Rb0-Bm=/M %:N[]
 BACKGROUND: #000000  [文章来自:小林在线 http://www.xlin.cn +$,+tw,JU;LCtW'GMF]
[文章来自:小林在线 http://www.xlin.cn }lC(8dGM')hu([[) ]
.img {  [文章来自:小林在线 http://www.xlin.cn Y |wLWy@&9Lfu.j:]
 WIDTH: 200%; POSITION: absolute; HEIGHT: 100%  [文章来自:小林在线 http://www.xlin.cn ($-wdR!C,SVF~0(S]
[文章来自:小林在线 http://www.xlin.cn p8yiq\iP ?NufHu]
</STYLE>  [文章来自:小林在线 http://www.xlin.cn IDWHM-SE0')to1mj]
<SCRIPT type=text/javascript><!--  [文章来自:小林在线 http://www.xlin.cn 7.6RQ`Ewz|Nj]
document.onselectstart = function () { return false; }  [文章来自:小林在线 http://www.xlin.cn ]i'/F6 5VR*mH(+R]
var nI  = 0;  [文章来自:小林在线 http://www.xlin.cn Fhw~TjUmF. }=r C]
var kI  = 0;  [文章来自:小林在线 http://www.xlin.cn h@Z3*VT.tZK2.[]
var run = false;  [文章来自:小林在线 http://www.xlin.cn G&1QVuNy=EHf*?]
function setOpacity(obj,o) {  [文章来自:小林在线 http://www.xlin.cn 6"&A`OV,nL& ?[Q R]
 if (o<0) o=0; else if (o>100) o = 100;  [文章来自:小林在线 http://www.xlin.cn 8 )L1cWC=3m_a08V]
 if (obj.filters)obj.filters.alpha.opacity=o; else obj.style.opacity = o/100;  [文章来自:小林在线 http://www.xlin.cn =_PU8K[Z;rPkET]
[文章来自:小林在线 http://www.xlin.cn '$bE+g[~6`Cl\AJM]
function TPR__(p) {  [文章来自:小林在线 http://www.xlin.cn CZ?Q: }0j6wYmnh[V|~]
 P1.style.left  = 50-(2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn uANK])yD$Yw@u9ypbm]
 P1.style.width = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn S P5zo=gi2bL]4)l]
 setOpacity(P1i, .5*p*p);  [文章来自:小林在线 http://www.xlin.cn EMOc'4,vCI ]
 if (p == 20) run = false;  [文章来自:小林在线 http://www.xlin.cn HslGG* +w6 z# np]
[文章来自:小林在线 http://www.xlin.cn G'o8Hd#D}ZYKh+1l]
function TPR_(p) {  [文章来自:小林在线 http://www.xlin.cn (#D`bT3.HOPGQ_I-sY]
 P2.style.width = 50-(2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn gv3vcKHo3u`jJM6]
 setOpacity(P2i, 100-.5*(p*p));  [文章来自:小林在线 http://www.xlin.cn )?Q`4) g.)cm&-oyd.]
 if (p == 20) {  [文章来自:小林在线 http://www.xlin.cn y.&Y Y# A%{%l;]
  P2i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn wHfknG4:-{oJ\r]
  setOpacity(P2i, 100);  [文章来自:小林在线 http://www.xlin.cn AtP0,hX |S//I*p]
  P2.style.width = "50%";  [文章来自:小林在线 http://www.xlin.cn l.[2nnhC-xwv )j?sW_]
  for(var i=1; i<=20; i++) setTimeout("TPR__("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn grI1-4d^F$g?&ZT !&]
 }  [文章来自:小林在线 http://www.xlin.cn UJ.XSCu)Qg ==-]
[文章来自:小林在线 http://www.xlin.cn ZOS,v~({J\ Z{xxJ]
function TPR() {  [文章来自:小林在线 http://www.xlin.cn 3Vf o9R{"^Mq).R$i~J]
 if (!run) {  [文章来自:小林在线 http://www.xlin.cn iG34]r?_;:FCAb@]
  run = true;  [文章来自:小林在线 http://www.xlin.cn x+V6LNL1lH\dSk !]
  P01i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn Rl+%ERG%xuu9"?]B]
  P1.style.width = 0;  [文章来自:小林在线 http://www.xlin.cn EhZ+' b+krDoU]
  kI++;  [文章来自:小林在线 http://www.xlin.cn G5[fM_\b }a @Ym-1]
  if (kI>=nI) kI = 0;  [文章来自:小林在线 http://www.xlin.cn 26l a-2_;5t)MS?{e]
  titLe(kI);  [文章来自:小林在线 http://www.xlin.cn e3kZ\`|T[Pk^ cOz]
  P02i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn 7A2bt4,T Jty]]
  P1i.src  = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn c8 P}(]wr:q|EBx'Z ]
  for (var i=1; i<=20; i++) setTimeout("TPR_("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn y: 4`#?t(b,~-]
 } else setTimeout("TPR()", 100);  [文章来自:小林在线 http://www.xlin.cn v .RcFwTB\}6 .]
[文章来自:小林在线 http://www.xlin.cn x4B ,Ha(DVk!]
function TPL__(p) {  [文章来自:小林在线 http://www.xlin.cn =?C1mA"BO2ZeW]
 P2.style.width = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn a!JPN/w9"pxQqc0]
 setOpacity(P2i, .5*p*p);  [文章来自:小林在线 http://www.xlin.cn jc&4\tS?z.g+eU=]
 if (p == 20) run = false;  [文章来自:小林在线 http://www.xlin.cn Ct&x F ?u56]y4']
[文章来自:小林在线 http://www.xlin.cn K:XyyMoh5?41;T=gTx]
function TPL_(p) {  [文章来自:小林在线 http://www.xlin.cn jeYsJ DL\x:G]@!uI]
 P1.style.left  = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn 7$W}Du%@  gA  /d]
 P1.style.width = 40+(10-2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn )(V $5HP  \|T!]
 setOpacity(P1i, 100-.5*(p*p));  [文章来自:小林在线 http://www.xlin.cn 4jn:BqX}1d;\#]
 if (p == 20) {  [文章来自:小林在线 http://www.xlin.cn }K r}b{Q1(3yC c ]
  P1i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn OG'lC=q/:D9TpKDue]
  setOpacity(P1i, 100);  [文章来自:小林在线 http://www.xlin.cn "Y';OG}vP&T6`&`*-]
  P1.style.left  = 0;  [文章来自:小林在线 http://www.xlin.cn =C/"w` 1*evQw c3W]
  P1.style.width = "50%";  [文章来自:小林在线 http://www.xlin.cn {X36 4"q$v:Xv^4+]
  for(var i=1; i<=20; i++) setTimeout("TPL__("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn 1XU?1Dl\g6.l=Hf!*t]
 }  [文章来自:小林在线 http://www.xlin.cn |VYW Q/jTl1b#]L`]
[文章来自:小林在线 http://www.xlin.cn Z@+P ]zQwvZd w `&:]
function TPL() {  [文章来自:小林在线 http://www.xlin.cn H(}VJNb,] e@[@"]
 if (!run) {  [文章来自:小林在线 http://www.xlin.cn xczM]yaS3O=FptWD]
  run = true;  [文章来自:小林在线 http://www.xlin.cn U@819TN/YI**/!]
  P02i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn '@8J@Nv u{9M{]
  P2.style.width = 0;  [文章来自:小林在线 http://www.xlin.cn jfZ{yXMjq=WLtY,gwv]
  kI--;  [文章来自:小林在线 http://www.xlin.cn ` r==HoVM;nsB]
  if (kI < 0) kI = nI-1;  [文章来自:小林在线 http://www.xlin.cn R(?]p*d_|Z[ZP3u]
  titLe(kI);  [文章来自:小林在线 http://www.xlin.cn Cc9 5DQS eX.3]
  P01i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn H8%`*'lCF:'{[_ ]
  P2i.src  = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn GdBDC)f tjKA0Ps{-r]
  for(var i=1; i<=20; i++) setTimeout("TPL_("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn k :v|0]5iqy v61(D]
 } else setTimeout("TPL()", 100);  [文章来自:小林在线 http://www.xlin.cn F: G`!RpR?rEDRw/=]
[文章来自:小林在线 http://www.xlin.cn V?v9 +$VS@ WlF%~ ]
function titLe(p) {  [文章来自:小林在线 http://www.xlin.cn )2oG npK h1.s8(/R]
 document.getElementById("TXTBOX").innerHTML = IMGSRC[p].alt;  [文章来自:小林在线 http://www.xlin.cn 1A1[cQ3aQ)bS$[ndgK]
[文章来自:小林在线 http://www.xlin.cn -|Z"./s.e!mq?v]
onload = function() {  [文章来自:小林在线 http://www.xlin.cn *?_!f s4oQF[xh6 ~]
 IMGSRC  = document.getElementById("imgsrc").getElementsByTagName("img");  [文章来自:小林在线 http://www.xlin.cn "FE=L5N?1&qjjHIH?]
 DB      = document.getElementById("DHTMLBOOK");  [文章来自:小林在线 http://www.xlin.cn ?ojP=R^NZYH/q("+]
 P01     = DB.getElementsByTagName("span")[0];  [文章来自:小林在线 http://www.xlin.cn 'Q*we{We7^M-~T*]
 P01i    = P01.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn x,FUwVu\q E*# Qv]
 P02     = DB.getElementsByTagName("span")[1];  [文章来自:小林在线 http://www.xlin.cn oDKv5P2M3v*= },,?]
 P02i    = P02.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn '-&Ts0`tF?@W86g6Yq]
 P1      = DB.getElementsByTagName("span")[2];  [文章来自:小林在线 http://www.xlin.cn ~Sufh\-ksd?2GI;R?~g]
 P1i     = P1.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn QchSl*^NuC&R&+]
 P2      = DB.getElementsByTagName("span")[3];  [文章来自:小林在线 http://www.xlin.cn lzsY @[/ g9mNQUxIf]
 P2i     = P2.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn 4Q ff]MX. i,$vk]
 nI      = IMGSRC.length;  [文章来自:小林在线 http://www.xlin.cn ?A]u`S gy2Jr!mZ]
 P1i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn r AV59dsrl/ Y:^U-\s]
 P2i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn q.Em'xBW,~hQKmNoy]
 titLe(kI);  [文章来自:小林在线 http://www.xlin.cn ih; c&^W"WQ r0R"@]
 DB.style.visibility = "visible";  [文章来自:小林在线 http://www.xlin.cn ll=.'q/x !+~,G9p3T]
[文章来自:小林在线 http://www.xlin.cn ' 9CJ3Y[/xE8!5F]
//-->  [文章来自:小林在线 http://www.xlin.cn TN #]PK8NboVVx@]
</SCRIPT>  [文章来自:小林在线 http://www.xlin.cn l^8UUEB{1TUI"ME6]
<META content="MSHTML 6.00.6000.16809" name=GENERATOR></HEAD>  [文章来自:小林在线 http://www.xlin.cn WU)r_y]r$KucPA]
<BODY>  [文章来自:小林在线 http://www.xlin.cn i#zgoq==@c0I|9]
<DIV id=center>  [文章来自:小林在线 http://www.xlin.cn nqPPu*TVKwq#fmb|x]
<DIV id=DHTMLBOOK><SPAN class=page onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img></SPAN>  [文章来自:小林在线 http://www.xlin.cn gH#j{xB[$vHbOi4]
<SPAN class="page right" onmousedown="return false;" ondblclick=TPR(); onclick=TPR();><IMG class=img style="LEFT: -100%"></SPAN>  [文章来自:小林在线 http://www.xlin.cn cD#@q E[@r4~.Gt#1]
<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%"v &P8[= sED^f]
<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 ^(ZL9!p" K._FQ-]
<DIV id=TXTBOX></DIV></DIV></DIV>  [文章来自:小林在线 http://www.xlin.cn TS Ao.jD'bZpKHT4A]
<DIV id=imgsrc style="VISIBILITY: hidden">  [文章来自:小林在线 http://www.xlin.cn loqT? .|u}I G' +aR]
<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条。评论内容只代表网友观点,与本站立场无关!)