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

JS实现图片翻书效果

数据加载中...
<html xmlns="http://www.w3.org/1999/xhtml">  [文章来自:小林在线 http://www.xlin.cn  Oh6IT@KUpN@M h]
<head>  [文章来自:小林在线 http://www.xlin.cn g?l /Vio]`xg.v= ]
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  [文章来自:小林在线 http://www.xlin.cn mYklks;lSV+v]
<title>JS实现图片翻书效果</title>  [文章来自:小林在线 http://www.xlin.cn &9NX6%XrdG,R`nx3 ]
<META http-equiv=imagetoolbar content=no>  [文章来自:小林在线 http://www.xlin.cn 8@ R a=vZo"-7P3yvP]
<STYLE type=text/css>  [文章来自:小林在线 http://www.xlin.cn $x(H0{Sk=^,D.3N#]
#center {  [文章来自:小林在线 http://www.xlin.cn @2#Yk WL+tX.2]
 LEFT: 50%; POSITION: absolute; TOP: 50%  [文章来自:小林在线 http://www.xlin.cn "G:* mX^ @'=|H]
[文章来自:小林在线 http://www.xlin.cn y#im^.Y+7EY[3J^_J]
#DHTMLBOOK {  [文章来自:小林在线 http://www.xlin.cn  5Ad!DCP(B$,^\A/]
 BACKGROUND: #000; LEFT: -210px; VISIBILITY: hidden; WIDTH: 420px; POSITION: relative; TOP: -160px; HEIGHT: 320px  [文章来自:小林在线 http://www.xlin.cn f:k l{G0fkIQDec|2]
[文章来自:小林在线 http://www.xlin.cn aW dP=sP}( jOKl]
#TXTBOX {  [文章来自:小林在线 http://www.xlin.cn !F^6QAl/J%&3]
 FONT-SIZE: 0.8em; WIDTH: 410px; COLOR: #aba193; FONT-FAMILY: verdana; POSITION: absolute; TOP: 320px; TEXT-ALIGN: center  [文章来自:小林在线 http://www.xlin.cn  n?tZ+hwo5 \c'|YE3]
[文章来自:小林在线 http://www.xlin.cn *g0,'EZt5T.05]3_ ]
.page {  [文章来自:小林在线 http://www.xlin.cn V 7 U}dd`.U"C,]
 OVERFLOW: hidden; BORDER-LEFT: #000000 1px solid; WIDTH: 50%; CURSOR: pointer; POSITION: absolute; HEIGHT: 100%  [文章来自:小林在线 http://www.xlin.cn $E= _(&xQaBF=K ]
[文章来自:小林在线 http://www.xlin.cn D$|FL!A? 6[=2WlV]
.right {  [文章来自:小林在线 http://www.xlin.cn ylC 92F\uU=-?Cmj]
 BORDER-RIGHT: #000000 1px solid; LEFT: 50%  [文章来自:小林在线 http://www.xlin.cn $X]E5A:@dLT|]
[文章来自:小林在线 http://www.xlin.cn '8i^@SZm J;_+Ulnp]
.turn {  [文章来自:小林在线 http://www.xlin.cn ,,&zrd8x}+C ^]
 BACKGROUND: #000000  [文章来自:小林在线 http://www.xlin.cn y "t6(. peQDclVB]
[文章来自:小林在线 http://www.xlin.cn VFO;U@,7?D]
.img {  [文章来自:小林在线 http://www.xlin.cn dFo:bM}Pei f=-W^P ]
 WIDTH: 200%; POSITION: absolute; HEIGHT: 100%  [文章来自:小林在线 http://www.xlin.cn jV/)%;eCm/RCf2]
[文章来自:小林在线 http://www.xlin.cn Cs !9x^8PT\**j!]
</STYLE>  [文章来自:小林在线 http://www.xlin.cn k5zwv 4;tYj/gFQ$ ']
<SCRIPT type=text/javascript><!--  [文章来自:小林在线 http://www.xlin.cn 7ZS4~sPa'*bq%4~Qz]
document.onselectstart = function () { return false; }  [文章来自:小林在线 http://www.xlin.cn q1=&76^LK Jc(.,viY]
var nI  = 0;  [文章来自:小林在线 http://www.xlin.cn  =_ ^ZX\qm#6]
var kI  = 0;  [文章来自:小林在线 http://www.xlin.cn HQ Q'Xe2fbH0V{]
var run = false;  [文章来自:小林在线 http://www.xlin.cn |';p@YiA\w\ 36vs|]
function setOpacity(obj,o) {  [文章来自:小林在线 http://www.xlin.cn 8s /^`F ;*l,1O`,4qy]
 if (o<0) o=0; else if (o>100) o = 100;  [文章来自:小林在线 http://www.xlin.cn }UO]EeLv4A[|,tM]
 if (obj.filters)obj.filters.alpha.opacity=o; else obj.style.opacity = o/100;  [文章来自:小林在线 http://www.xlin.cn 5fI4O.\Bx3$B V8]
[文章来自:小林在线 http://www.xlin.cn 3Y9Xt&Vd{*0CmTE]
function TPR__(p) {  [文章来自:小林在线 http://www.xlin.cn C|-]}%NF{36 %[0fX]
 P1.style.left  = 50-(2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn n-#,VFkZO!/0,W]
 P1.style.width = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn N}Mzz^bnH^ ._=+=s]
 setOpacity(P1i, .5*p*p);  [文章来自:小林在线 http://www.xlin.cn 4;f`V?E*cuCM8s ;77]
 if (p == 20) run = false;  [文章来自:小林在线 http://www.xlin.cn ESW|Pd{]zfQ\=R]]
[文章来自:小林在线 http://www.xlin.cn 70M9N%+%7=V(v]b]
function TPR_(p) {  [文章来自:小林在线 http://www.xlin.cn rM^!oZRDj0 Rdwd]
 P2.style.width = 50-(2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn ~ m`IM.;u6gcv{F]
 setOpacity(P2i, 100-.5*(p*p));  [文章来自:小林在线 http://www.xlin.cn 4u"4}%~3gM.sM\]
 if (p == 20) {  [文章来自:小林在线 http://www.xlin.cn 14:=o?MLQ;ov }b]
  P2i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn MIPN+g3h6[8Q3dBj`]
  setOpacity(P2i, 100);  [文章来自:小林在线 http://www.xlin.cn U059i@A^00 xkLw!Z]
  P2.style.width = "50%";  [文章来自:小林在线 http://www.xlin.cn dIaledS{aqtl:sM]
  for(var i=1; i<=20; i++) setTimeout("TPR__("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn nS@ [1'z^0I vES]
 }  [文章来自:小林在线 http://www.xlin.cn Fb XLJ8J8["XN|=4_]
[文章来自:小林在线 http://www.xlin.cn |C/_IECO Fn? 9Ip]
function TPR() {  [文章来自:小林在线 http://www.xlin.cn y\Jsy]h_ El:a/=a2]
 if (!run) {  [文章来自:小林在线 http://www.xlin.cn @9u%b[:?)b)Uv]
  run = true;  [文章来自:小林在线 http://www.xlin.cn (KP0Px3BG8u1#SMv]
  P01i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn  |iQ%;ytDpuL 4D]
  P1.style.width = 0;  [文章来自:小林在线 http://www.xlin.cn 9fXIweM:Z5 5 mj'P]
  kI++;  [文章来自:小林在线 http://www.xlin.cn "ITYn~9?upbyf]
  if (kI>=nI) kI = 0;  [文章来自:小林在线 http://www.xlin.cn @.$8qdNtr| )c L*O]]
  titLe(kI);  [文章来自:小林在线 http://www.xlin.cn UJ\^HqBH`1%qC7]
  P02i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn  81'Df -h/;Fq@u]
  P1i.src  = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn ONBIeqDjq5;^p::r[]
  for (var i=1; i<=20; i++) setTimeout("TPR_("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn EbP2n#j}I0P, ri]
 } else setTimeout("TPR()", 100);  [文章来自:小林在线 http://www.xlin.cn nw( 7Jvn-t-AuF]
[文章来自:小林在线 http://www.xlin.cn gA1uEq3;NIi_i_5"F]
function TPL__(p) {  [文章来自:小林在线 http://www.xlin.cn q$$MMw3)AQ/*rRT]
 P2.style.width = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn J=l0F?`5D=}0OA]
 setOpacity(P2i, .5*p*p);  [文章来自:小林在线 http://www.xlin.cn "jpGOz!K+H-`Yjl]
 if (p == 20) run = false;  [文章来自:小林在线 http://www.xlin.cn 1qo1Mvp="-=6 ]
[文章来自:小林在线 http://www.xlin.cn "P) /?s8:~/}'zp?]
function TPL_(p) {  [文章来自:小林在线 http://www.xlin.cn p.J;Q.0ym}fFgm]
 P1.style.left  = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn |-;'=$R '.c;*tgS]
 P1.style.width = 40+(10-2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn Dz6@__{.y 3xd#i+]
 setOpacity(P1i, 100-.5*(p*p));  [文章来自:小林在线 http://www.xlin.cn ,9wF{s/e@L+ X]
 if (p == 20) {  [文章来自:小林在线 http://www.xlin.cn K & 0b3e=_ 32]
  P1i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn Wm2+^LfM0:p _iHn]
  setOpacity(P1i, 100);  [文章来自:小林在线 http://www.xlin.cn wg5i9_'8eZmF-3*]
  P1.style.left  = 0;  [文章来自:小林在线 http://www.xlin.cn }Wi y1#:g&LHK$K;R]
  P1.style.width = "50%";  [文章来自:小林在线 http://www.xlin.cn Num]O,q=fB:hq6]
  for(var i=1; i<=20; i++) setTimeout("TPL__("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn Ih%=w{38=6 2]?Pt`]
 }  [文章来自:小林在线 http://www.xlin.cn aP : Oo@OW1]
[文章来自:小林在线 http://www.xlin.cn !D"Iv&%OTXKGNeX.FB]
function TPL() {  [文章来自:小林在线 http://www.xlin.cn g#VT$y%HD9^9?p]
 if (!run) {  [文章来自:小林在线 http://www.xlin.cn Ep /8BjvB*FM$l9`]F]
  run = true;  [文章来自:小林在线 http://www.xlin.cn COF]tlR- be,F c}]
  P02i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn Ez_ v "R~xf .-P]
  P2.style.width = 0;  [文章来自:小林在线 http://www.xlin.cn hL?dm]Qs*kO P4 w]
  kI--;  [文章来自:小林在线 http://www.xlin.cn C;]l`,_K^Luq`]
  if (kI < 0) kI = nI-1;  [文章来自:小林在线 http://www.xlin.cn t [bI=^kuQ~LI[ ]
  titLe(kI);  [文章来自:小林在线 http://www.xlin.cn 4-STKM RhR&-gC&M]
  P01i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn B!`G qG 1r.UJC]
  P2i.src  = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn 3N7!i\ e`bB3#, ]
  for(var i=1; i<=20; i++) setTimeout("TPL_("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn W2}DL?4 mftWO]
 } else setTimeout("TPL()", 100);  [文章来自:小林在线 http://www.xlin.cn ]LKP;|MFvqU?z60Tg]
[文章来自:小林在线 http://www.xlin.cn pZ% 6n2f.q.1^f]
function titLe(p) {  [文章来自:小林在线 http://www.xlin.cn Wb@^2$sy[s'og*~/G]
 document.getElementById("TXTBOX").innerHTML = IMGSRC[p].alt;  [文章来自:小林在线 http://www.xlin.cn rz^rQ[`WG?5EoHA3s]
[文章来自:小林在线 http://www.xlin.cn J~MZ&BTBI#F=S^,o5l]
onload = function() {  [文章来自:小林在线 http://www.xlin.cn s.m['8yQ=]{4}P6]
 IMGSRC  = document.getElementById("imgsrc").getElementsByTagName("img");  [文章来自:小林在线 http://www.xlin.cn s4$Y5cs% #=1]
 DB      = document.getElementById("DHTMLBOOK");  [文章来自:小林在线 http://www.xlin.cn gyEe8}) 0{p'wt=]
 P01     = DB.getElementsByTagName("span")[0];  [文章来自:小林在线 http://www.xlin.cn )"6&!*e-9L[k=|L]
 P01i    = P01.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn JyYWYtvL1j:3 U: D5]
 P02     = DB.getElementsByTagName("span")[1];  [文章来自:小林在线 http://www.xlin.cn h1KQ|%q@YNp ]
 P02i    = P02.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn }_n4+E+z_xnK`U]
 P1      = DB.getElementsByTagName("span")[2];  [文章来自:小林在线 http://www.xlin.cn FTjx2to4"0aiw]
 P1i     = P1.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn D=f?HMJAN,wUUd n]
 P2      = DB.getElementsByTagName("span")[3];  [文章来自:小林在线 http://www.xlin.cn ZE{^9n)r|yI@{^-]
 P2i     = P2.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn li M & a Y EavvK]
 nI      = IMGSRC.length;  [文章来自:小林在线 http://www.xlin.cn O cnlHD45%j):s]
 P1i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn _ AlDjCP{Au=L$k]
 P2i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn Z}bN\PS#=bu22?I]
 titLe(kI);  [文章来自:小林在线 http://www.xlin.cn :O[ XY' +y$lM8$K1,]
 DB.style.visibility = "visible";  [文章来自:小林在线 http://www.xlin.cn ldlZ|i^"cyM#ko8]
[文章来自:小林在线 http://www.xlin.cn 3:U(vh=!wZxaD0]
//-->  [文章来自:小林在线 http://www.xlin.cn ?qJPa*vQYo:mr~)s]
</SCRIPT>  [文章来自:小林在线 http://www.xlin.cn \4x%+_d/Xy EFmV]
<META content="MSHTML 6.00.6000.16809" name=GENERATOR></HEAD>  [文章来自:小林在线 http://www.xlin.cn n&Orna ]hb^Hs"i-Q]
<BODY>  [文章来自:小林在线 http://www.xlin.cn qa7}'-*?= [wH`5q[^G]
<DIV id=center>  [文章来自:小林在线 http://www.xlin.cn hlz,#mRwSq]
<DIV id=DHTMLBOOK><SPAN class=page onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img></SPAN>  [文章来自:小林在线 http://www.xlin.cn L]^y ;S JZEdBtg= h]
<SPAN class="page right" onmousedown="return false;" ondblclick=TPR(); onclick=TPR();><IMG class=img style="LEFT: -100%"></SPAN>  [文章来自:小林在线 http://www.xlin.cn ?8`(+GU}-d=- ,"L]
<SPAN class="page turn" onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img style="FILTER: alpha(); opacity: 1"></SPAN>  [文章来自:小林在线 http://www.xlin.cn p+%#]* jCsiJQU6)h]
<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 bsrt. fTY#Pi9u]
<DIV id=TXTBOX></DIV></DIV></DIV>  [文章来自:小林在线 http://www.xlin.cn e!bu&9joA..M*S/h]
<DIV id=imgsrc style="VISIBILITY: hidden">  [文章来自:小林在线 http://www.xlin.cn /}?6x*B(Gl)$WnOy?Y]
<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条。评论内容只代表网友观点,与本站立场无关!)