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

JS实现图片翻书效果

数据加载中...
<html xmlns="http://www.w3.org/1999/xhtml">  [文章来自:小林在线 http://www.xlin.cn }\ UNN)=oKIw#0)\]
<head>  [文章来自:小林在线 http://www.xlin.cn e5{",$Sh?-aF-k]
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  [文章来自:小林在线 http://www.xlin.cn 1UY=T`2]*353d*CSJ]
<title>JS实现图片翻书效果</title>  [文章来自:小林在线 http://www.xlin.cn HQX6MSAHtP$=-Hi]
<META http-equiv=imagetoolbar content=no>  [文章来自:小林在线 http://www.xlin.cn T?@oaDI(R:)`G)+"]
<STYLE type=text/css>  [文章来自:小林在线 http://www.xlin.cn c3{=&q2e_Tbc]
#center {  [文章来自:小林在线 http://www.xlin.cn InwE=`*CF$P$1V_]
 LEFT: 50%; POSITION: absolute; TOP: 50%  [文章来自:小林在线 http://www.xlin.cn 1dnv(i512\[yc&S]
[文章来自:小林在线 http://www.xlin.cn @T k+nTq+_W SrrR*r]
#DHTMLBOOK {  [文章来自:小林在线 http://www.xlin.cn }s6qHgzi74dW yb/m]
 BACKGROUND: #000; LEFT: -210px; VISIBILITY: hidden; WIDTH: 420px; POSITION: relative; TOP: -160px; HEIGHT: 320px  [文章来自:小林在线 http://www.xlin.cn {OeE94q A'"xxk 4/!]
[文章来自:小林在线 http://www.xlin.cn |NN!MC{?k5J*A M&_]
#TXTBOX {  [文章来自:小林在线 http://www.xlin.cn yWK~693 94`K]IR]
 FONT-SIZE: 0.8em; WIDTH: 410px; COLOR: #aba193; FONT-FAMILY: verdana; POSITION: absolute; TOP: 320px; TEXT-ALIGN: center  [文章来自:小林在线 http://www.xlin.cn +@6oK UO=l{i =aT]
[文章来自:小林在线 http://www.xlin.cn {S1@_4uluGf?%^I7{?]
.page {  [文章来自:小林在线 http://www.xlin.cn | WIi[D|v: b]
 OVERFLOW: hidden; BORDER-LEFT: #000000 1px solid; WIDTH: 50%; CURSOR: pointer; POSITION: absolute; HEIGHT: 100%  [文章来自:小林在线 http://www.xlin.cn 3^q!aJIy]jOND%k7vg@]
[文章来自:小林在线 http://www.xlin.cn dHWHTnZz,; UNJ;q]
.right {  [文章来自:小林在线 http://www.xlin.cn r, M =vmr YFY]
 BORDER-RIGHT: #000000 1px solid; LEFT: 50%  [文章来自:小林在线 http://www.xlin.cn *0\X?wwc =Zu9S]
[文章来自:小林在线 http://www.xlin.cn T?e Jak(4==(rh"[]
.turn {  [文章来自:小林在线 http://www.xlin.cn RO :ztn-p+0\NX]
 BACKGROUND: #000000  [文章来自:小林在线 http://www.xlin.cn zR(@"0b Kr85"e]
[文章来自:小林在线 http://www.xlin.cn WMX 3n4$A|PJI]
.img {  [文章来自:小林在线 http://www.xlin.cn =^wPlpss/=_O[=b]
 WIDTH: 200%; POSITION: absolute; HEIGHT: 100%  [文章来自:小林在线 http://www.xlin.cn =J`N]. !:x;8Kk+]
[文章来自:小林在线 http://www.xlin.cn 9?l!gR3z=l(#j]
</STYLE>  [文章来自:小林在线 http://www.xlin.cn xV?.9 \J.rn\CsIOHz]
<SCRIPT type=text/javascript><!--  [文章来自:小林在线 http://www.xlin.cn $Z5g`@V.0|T D5l2]
document.onselectstart = function () { return false; }  [文章来自:小林在线 http://www.xlin.cn 1;'Ow$aU7u,+h9p]
var nI  = 0;  [文章来自:小林在线 http://www.xlin.cn (`/6O?y?sFl9Qa$E]
var kI  = 0;  [文章来自:小林在线 http://www.xlin.cn mb(i9Ki Q2@}'?DC=]
var run = false;  [文章来自:小林在线 http://www.xlin.cn ?_&c'T,8|4VCQB1K]
function setOpacity(obj,o) {  [文章来自:小林在线 http://www.xlin.cn 4H38,@Ow\fGGS#{N]
 if (o<0) o=0; else if (o>100) o = 100;  [文章来自:小林在线 http://www.xlin.cn e#{vRLM7jg.uGrG zC]
 if (obj.filters)obj.filters.alpha.opacity=o; else obj.style.opacity = o/100;  [文章来自:小林在线 http://www.xlin.cn T;ZTYzNW*?Ihk[ ]
[文章来自:小林在线 http://www.xlin.cn )?1y+"!MF~) 7W;V+J]
function TPR__(p) {  [文章来自:小林在线 http://www.xlin.cn kgto[) ^|a/&X ]
 P1.style.left  = 50-(2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn kQ-+V[M,L-^,QGq(X[T]
 P1.style.width = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn @n$|ZLU}2'K-\M`f1r]
 setOpacity(P1i, .5*p*p);  [文章来自:小林在线 http://www.xlin.cn Bv78_ c e9'P@Fo]
 if (p == 20) run = false;  [文章来自:小林在线 http://www.xlin.cn #"Fk^{RFzG]OD]
[文章来自:小林在线 http://www.xlin.cn u#v`Mu"p|`UkC ]
function TPR_(p) {  [文章来自:小林在线 http://www.xlin.cn =u9${G ;1s)f62]
 P2.style.width = 50-(2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn }U6sus(O{/!{R=mbab]
 setOpacity(P2i, 100-.5*(p*p));  [文章来自:小林在线 http://www.xlin.cn &in'}pW+R yT*n`]
 if (p == 20) {  [文章来自:小林在线 http://www.xlin.cn 'y%o\!0?XU6f[r&t]
  P2i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn 8d%I\Q+P@h@&!?qY]
  setOpacity(P2i, 100);  [文章来自:小林在线 http://www.xlin.cn @QZ5?eX)7ccjeC]
  P2.style.width = "50%";  [文章来自:小林在线 http://www.xlin.cn \r VP+bwvB*: #]
  for(var i=1; i<=20; i++) setTimeout("TPR__("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn U ,;zr u7gQ "k|-#]
 }  [文章来自:小林在线 http://www.xlin.cn &|3BPpJA*}o4s*]
[文章来自:小林在线 http://www.xlin.cn rH1 xx+[Kp5'A]
function TPR() {  [文章来自:小林在线 http://www.xlin.cn wt]y;lLOx@a3A ]
 if (!run) {  [文章来自:小林在线 http://www.xlin.cn ?-Wgd~9Bp(q="`fL]
  run = true;  [文章来自:小林在线 http://www.xlin.cn e)-AK@JYDTJ&}p]
  P01i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn q=m}\+.,B7Ns\e:]
  P1.style.width = 0;  [文章来自:小林在线 http://www.xlin.cn ?f)?S).gYFg&}Q*fZ=]
  kI++;  [文章来自:小林在线 http://www.xlin.cn 0#1a,r)T=F| m]
  if (kI>=nI) kI = 0;  [文章来自:小林在线 http://www.xlin.cn 1#ncWw:B_]qa_? w%]
  titLe(kI);  [文章来自:小林在线 http://www.xlin.cn "immt/CuH&)MDL#]
  P02i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn )jFtHae:HN%wGF]
  P1i.src  = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn @X (|;G[.d-+\\4]
  for (var i=1; i<=20; i++) setTimeout("TPR_("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn bu[K ??b? M D-kb]
 } else setTimeout("TPR()", 100);  [文章来自:小林在线 http://www.xlin.cn Ue:f5J|u{ouT!PywI]
[文章来自:小林在线 http://www.xlin.cn GjA.g8k8tKYQ?Pf7]
function TPL__(p) {  [文章来自:小林在线 http://www.xlin.cn }C_z5^k^Y}=T2(IKC]
 P2.style.width = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn 4Gvk`=pm%H&dOV]
 setOpacity(P2i, .5*p*p);  [文章来自:小林在线 http://www.xlin.cn =&iZQ$?^x8DI]
 if (p == 20) run = false;  [文章来自:小林在线 http://www.xlin.cn ;,,%Xp7)N |FQNx+3]
[文章来自:小林在线 http://www.xlin.cn eT[c+ 3q`q\Embo]
function TPL_(p) {  [文章来自:小林在线 http://www.xlin.cn \RK 21x"[MBz']_dM`]
 P1.style.left  = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn 1P9Q2:=  Jc:c]
 P1.style.width = 40+(10-2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn LaIPZXI,GI|!yW`OyQ]
 setOpacity(P1i, 100-.5*(p*p));  [文章来自:小林在线 http://www.xlin.cn !"d 3ahWS6?k~ K/]
 if (p == 20) {  [文章来自:小林在线 http://www.xlin.cn .'lK~g??YF -,Lus]
  P1i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn 56yn^,`[*HMhtt]
  setOpacity(P1i, 100);  [文章来自:小林在线 http://www.xlin.cn ]^GTUl J/Gb?WbN]Jo]
  P1.style.left  = 0;  [文章来自:小林在线 http://www.xlin.cn Ss&rs{n|aH5gu1]
  P1.style.width = "50%";  [文章来自:小林在线 http://www.xlin.cn hpi! $Tu:T?lZ$f]
  for(var i=1; i<=20; i++) setTimeout("TPL__("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn )Yh!|%A]Jv3|]
 }  [文章来自:小林在线 http://www.xlin.cn rAA~AJfe 1;5e4]
[文章来自:小林在线 http://www.xlin.cn r5R"1KF6YQBHGrF]
function TPL() {  [文章来自:小林在线 http://www.xlin.cn CW8C#y );3V8 G/]
 if (!run) {  [文章来自:小林在线 http://www.xlin.cn q3jK- cBSS?'o]
  run = true;  [文章来自:小林在线 http://www.xlin.cn 2=eK -u :FQ:l 5g]
  P02i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn {7u=aMWuYn~0q[]
  P2.style.width = 0;  [文章来自:小林在线 http://www.xlin.cn OW)0zswJNg!s/?AAe]
  kI--;  [文章来自:小林在线 http://www.xlin.cn d!S:d?7lQc9U@}f ]
  if (kI < 0) kI = nI-1;  [文章来自:小林在线 http://www.xlin.cn _l66\ b@;g_mF+@m]
  titLe(kI);  [文章来自:小林在线 http://www.xlin.cn {VJ&cLnMTjd $:(GC~]
  P01i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn j-g 'PsV,dce} k=]
  P2i.src  = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn U[|3R VsT|+lz+]
  for(var i=1; i<=20; i++) setTimeout("TPL_("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn _d=cC^OP wrzL0N]
 } else setTimeout("TPL()", 100);  [文章来自:小林在线 http://www.xlin.cn HRb_7;#M70?~x~F=fY^]
[文章来自:小林在线 http://www.xlin.cn 38# =0d+f]xBQ5MS]
function titLe(p) {  [文章来自:小林在线 http://www.xlin.cn @mGPC8 8R6h;UR{V~]
 document.getElementById("TXTBOX").innerHTML = IMGSRC[p].alt;  [文章来自:小林在线 http://www.xlin.cn 5wcfcqs@TA8nqd$FL0]
[文章来自:小林在线 http://www.xlin.cn z6Ldc :tK,lCOjrwCJ]
onload = function() {  [文章来自:小林在线 http://www.xlin.cn Mu @'h|GUr"tpWmG{S]
 IMGSRC  = document.getElementById("imgsrc").getElementsByTagName("img");  [文章来自:小林在线 http://www.xlin.cn D4rbf"ZQT)Hkt]
 DB      = document.getElementById("DHTMLBOOK");  [文章来自:小林在线 http://www.xlin.cn `8C?rvD'-n^iY]
 P01     = DB.getElementsByTagName("span")[0];  [文章来自:小林在线 http://www.xlin.cn =-$&?J8#=|Oq3 e20]
 P01i    = P01.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn bC(.Q#rQZ3 \y]
 P02     = DB.getElementsByTagName("span")[1];  [文章来自:小林在线 http://www.xlin.cn acGea)=x{i1\+CM]
 P02i    = P02.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn Qp|s7'MK;I#h{O1]
 P1      = DB.getElementsByTagName("span")[2];  [文章来自:小林在线 http://www.xlin.cn _Q}=+%caiDqeuwv]
 P1i     = P1.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn SVXYuhbZ5p/f#]
 P2      = DB.getElementsByTagName("span")[3];  [文章来自:小林在线 http://www.xlin.cn "yqfV8(=%2 q~h]
 P2i     = P2.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn P@uOLK#uguZU\s_b{f=]
 nI      = IMGSRC.length;  [文章来自:小林在线 http://www.xlin.cn K^=tVx@Y2k.q{E]
 P1i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn Slws ORt2NBIay?]
 P2i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn VR+nZ~Ru%b} 0_@/)~l]
 titLe(kI);  [文章来自:小林在线 http://www.xlin.cn /5P4@k.eb"vbnm: #]
 DB.style.visibility = "visible";  [文章来自:小林在线 http://www.xlin.cn .FO cx?ZT2-c'_p]
[文章来自:小林在线 http://www.xlin.cn sBe L_t)gq{Ae: c]
//-->  [文章来自:小林在线 http://www.xlin.cn S$(qOmr?c~HWL5)z]
</SCRIPT>  [文章来自:小林在线 http://www.xlin.cn \.iaQodUlalE#EDQ_ ),]
<META content="MSHTML 6.00.6000.16809" name=GENERATOR></HEAD>  [文章来自:小林在线 http://www.xlin.cn U;{| -AY aUcnE]
<BODY>  [文章来自:小林在线 http://www.xlin.cn #baG2G4v{`V(]
<DIV id=center>  [文章来自:小林在线 http://www.xlin.cn V"]H-$[]yup&%B?O]
<DIV id=DHTMLBOOK><SPAN class=page onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img></SPAN>  [文章来自:小林在线 http://www.xlin.cn 8tA1R7e& |fi;F=]
<SPAN class="page right" onmousedown="return false;" ondblclick=TPR(); onclick=TPR();><IMG class=img style="LEFT: -100%"></SPAN>  [文章来自:小林在线 http://www.xlin.cn l R V &^zXB+Q9 41]
<SPAN class="page turn" onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img style="FILTER: alpha(); opacity: 1"></SPAN>  [文章来自:小林在线 http://www.xlin.cn ),}8R6PX[7J$OEz0E]
<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 =/eK[[dg[2sw =  J]
<DIV id=TXTBOX></DIV></DIV></DIV>  [文章来自:小林在线 http://www.xlin.cn P'x;*/EM/Vw=kz3/B []
<DIV id=imgsrc style="VISIBILITY: hidden">  [文章来自:小林在线 http://www.xlin.cn ?-{i.m`j?'N0@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条。评论内容只代表网友观点,与本站立场无关!)