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

JS实现图片翻书效果

数据加载中...
<html xmlns="http://www.w3.org/1999/xhtml">  [文章来自:小林在线 http://www.xlin.cn 3931T jM^d4]
<head>  [文章来自:小林在线 http://www.xlin.cn p1(M=_rM-UA(dx]
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  [文章来自:小林在线 http://www.xlin.cn [ \um6]KC `Vm+|!]
<title>JS实现图片翻书效果</title>  [文章来自:小林在线 http://www.xlin.cn G5L^;%7 &3:6GZJ]
<META http-equiv=imagetoolbar content=no>  [文章来自:小林在线 http://www.xlin.cn Kf]jd% 2#D752u43uc]
<STYLE type=text/css>  [文章来自:小林在线 http://www.xlin.cn X vc?O,;xAb) ]
#center {  [文章来自:小林在线 http://www.xlin.cn ]h[f57V"~-"(%O]
 LEFT: 50%; POSITION: absolute; TOP: 50%  [文章来自:小林在线 http://www.xlin.cn g5' ^Ct|wMM==s*u{]
[文章来自:小林在线 http://www.xlin.cn fK{%s;,,? oUI1J%S]
#DHTMLBOOK {  [文章来自:小林在线 http://www.xlin.cn eW" $X+K6Je]]7 |]
 BACKGROUND: #000; LEFT: -210px; VISIBILITY: hidden; WIDTH: 420px; POSITION: relative; TOP: -160px; HEIGHT: 320px  [文章来自:小林在线 http://www.xlin.cn SoW!@DV;?.zC9]
[文章来自:小林在线 http://www.xlin.cn 9 ?fv!+)-yOQ2IF]
#TXTBOX {  [文章来自:小林在线 http://www.xlin.cn !wL.`_Uq!7 u c]
 FONT-SIZE: 0.8em; WIDTH: 410px; COLOR: #aba193; FONT-FAMILY: verdana; POSITION: absolute; TOP: 320px; TEXT-ALIGN: center  [文章来自:小林在线 http://www.xlin.cn zGDXT6"^ -Bi:oVP]
[文章来自:小林在线 http://www.xlin.cn ~}yV'qpEN1s|]
.page {  [文章来自:小林在线 http://www.xlin.cn 22 )+4:ccs'pbB2]
 OVERFLOW: hidden; BORDER-LEFT: #000000 1px solid; WIDTH: 50%; CURSOR: pointer; POSITION: absolute; HEIGHT: 100%  [文章来自:小林在线 http://www.xlin.cn K0i}oK&O5w {=]
[文章来自:小林在线 http://www.xlin.cn X,RTf~^++sTKsQKU]
.right {  [文章来自:小林在线 http://www.xlin.cn %b?(K8+o^|+-*a;P]
 BORDER-RIGHT: #000000 1px solid; LEFT: 50%  [文章来自:小林在线 http://www.xlin.cn fq?E:8?c$O~X=N_BP]
[文章来自:小林在线 http://www.xlin.cn YF$[?U(Urg|WDcK^}]
.turn {  [文章来自:小林在线 http://www.xlin.cn o -{5NJ;o0 0wp]
 BACKGROUND: #000000  [文章来自:小林在线 http://www.xlin.cn s8eW3l0J]k'=nU]
[文章来自:小林在线 http://www.xlin.cn (.1AAKDn(nxiu#=]
.img {  [文章来自:小林在线 http://www.xlin.cn Vl F(4.*')w&n-d]
 WIDTH: 200%; POSITION: absolute; HEIGHT: 100%  [文章来自:小林在线 http://www.xlin.cn 9H 0P,5AIC?}~G(]
[文章来自:小林在线 http://www.xlin.cn 6;}81\Prku5_\JC(C]
</STYLE>  [文章来自:小林在线 http://www.xlin.cn r[T{wzF?8Aw5SRy(M]
<SCRIPT type=text/javascript><!--  [文章来自:小林在线 http://www.xlin.cn YpWVA=E;+ ybn %]
document.onselectstart = function () { return false; }  [文章来自:小林在线 http://www.xlin.cn ]+qAEVe/FjJF1!]
var nI  = 0;  [文章来自:小林在线 http://www.xlin.cn Y)} Itkr LOFM))m]
var kI  = 0;  [文章来自:小林在线 http://www.xlin.cn ,HuFD 'W2}BUs* 1X)]
var run = false;  [文章来自:小林在线 http://www.xlin.cn _4 2,hsk/{ TzB4w|=]
function setOpacity(obj,o) {  [文章来自:小林在线 http://www.xlin.cn _:geHi~=W\J"j|Vd]
 if (o<0) o=0; else if (o>100) o = 100;  [文章来自:小林在线 http://www.xlin.cn hLb}@v kwDS=gN]
 if (obj.filters)obj.filters.alpha.opacity=o; else obj.style.opacity = o/100;  [文章来自:小林在线 http://www.xlin.cn ]CY3`Gh,?Gex3 +V]
[文章来自:小林在线 http://www.xlin.cn a-YrpM3(OgWRM]
function TPR__(p) {  [文章来自:小林在线 http://www.xlin.cn f}G=^mWQ%Naej]
 P1.style.left  = 50-(2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn Q(ZuG? 'C]By|E]
 P1.style.width = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn pR'my"NusxdIZ??J=]
 setOpacity(P1i, .5*p*p);  [文章来自:小林在线 http://www.xlin.cn CWh+x`s5}@A )j+]
 if (p == 20) run = false;  [文章来自:小林在线 http://www.xlin.cn 4CR)vTGna a^]
[文章来自:小林在线 http://www.xlin.cn "k'b?ypT";:Fm0z?zG]
function TPR_(p) {  [文章来自:小林在线 http://www.xlin.cn 6 Nv?vYmv!tI .\ ]
 P2.style.width = 50-(2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn ?ELFq#,u!:&B&J k]
 setOpacity(P2i, 100-.5*(p*p));  [文章来自:小林在线 http://www.xlin.cn .Cr`{) D~1jcA&p?]
 if (p == 20) {  [文章来自:小林在线 http://www.xlin.cn 4|4wc@K_$cW]
  P2i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn G-p|.(\@hV~o^d]
  setOpacity(P2i, 100);  [文章来自:小林在线 http://www.xlin.cn -omZ6-?`Ths;|f9EiAW]
  P2.style.width = "50%";  [文章来自:小林在线 http://www.xlin.cn ZwD+gW0_}r{R^?e:j]
  for(var i=1; i<=20; i++) setTimeout("TPR__("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn EkhZ!o2n0QFT6P=]
 }  [文章来自:小林在线 http://www.xlin.cn 6y;n@pJtdRT8+loH]
[文章来自:小林在线 http://www.xlin.cn ln9!^^\ R?1*gs]
function TPR() {  [文章来自:小林在线 http://www.xlin.cn [sRx X  ~28.t]
 if (!run) {  [文章来自:小林在线 http://www.xlin.cn fU~v,Kfg&L 6`Z[?]
  run = true;  [文章来自:小林在线 http://www.xlin.cn :R(Ym.?,^KVjeH;J]
  P01i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn 9 R~M_Go/D p' eY_?]
  P1.style.width = 0;  [文章来自:小林在线 http://www.xlin.cn vi!q3bN50z?w|]
  kI++;  [文章来自:小林在线 http://www.xlin.cn 7 *qI7 Px|//aP(=@k]
  if (kI>=nI) kI = 0;  [文章来自:小林在线 http://www.xlin.cn %:M[4A\v:n,TNC^L]
  titLe(kI);  [文章来自:小林在线 http://www.xlin.cn q1xC\d7uP ^X^F,X]
  P02i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn ,$ DD`mx=Y~qo?s6j]
  P1i.src  = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn U9?n(@kS&YI1S4q]
  for (var i=1; i<=20; i++) setTimeout("TPR_("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn nT%_|'g\t;iMG#]
 } else setTimeout("TPR()", 100);  [文章来自:小林在线 http://www.xlin.cn k H!?T'eTgT4\,~]
[文章来自:小林在线 http://www.xlin.cn ,.?z3a^ul *(hM(]
function TPL__(p) {  [文章来自:小林在线 http://www.xlin.cn [_qYd|?/,kI6RiH]
 P2.style.width = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn 'cG C ~Eeu$F7%0F]
 setOpacity(P2i, .5*p*p);  [文章来自:小林在线 http://www.xlin.cn 1c xk{K2vX`~9ir`]
 if (p == 20) run = false;  [文章来自:小林在线 http://www.xlin.cn p?aK%]ud eIhc]
[文章来自:小林在线 http://www.xlin.cn 7cM lUhC$A9p -b]
function TPL_(p) {  [文章来自:小林在线 http://www.xlin.cn H UHy 4Xh??k7O0L]
 P1.style.left  = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn d+.fC!pZ`t^eVl H]
 P1.style.width = 40+(10-2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn Z8do=?PL\Y16@*eZA]
 setOpacity(P1i, 100-.5*(p*p));  [文章来自:小林在线 http://www.xlin.cn z@Iv ]~N.b=-3J]
 if (p == 20) {  [文章来自:小林在线 http://www.xlin.cn `oT(z^)Z*M~r2=3)k]
  P1i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn Wzfz,f#\uY$|+ ]
  setOpacity(P1i, 100);  [文章来自:小林在线 http://www.xlin.cn  i,RY&Kin=PKv$s]
  P1.style.left  = 0;  [文章来自:小林在线 http://www.xlin.cn NaX1G oDH+!K]
  P1.style.width = "50%";  [文章来自:小林在线 http://www.xlin.cn (B?esUC10p-iZVz]
  for(var i=1; i<=20; i++) setTimeout("TPL__("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn 'HA(oGw6ql.+^]R]
 }  [文章来自:小林在线 http://www.xlin.cn uB?{KJ/JQr T` ]]
[文章来自:小林在线 http://www.xlin.cn JGsDA}ta=~ ~(kWb]
function TPL() {  [文章来自:小林在线 http://www.xlin.cn s;jF':.bM, z"}FT p]
 if (!run) {  [文章来自:小林在线 http://www.xlin.cn saEIoi,.K^%K(?]
  run = true;  [文章来自:小林在线 http://www.xlin.cn CTe!yD0OqI]AM7$VrC]
  P02i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn 5&D:4n&@?YcH O]
  P2.style.width = 0;  [文章来自:小林在线 http://www.xlin.cn vVPNee(Nka,9_ TuIa]
  kI--;  [文章来自:小林在线 http://www.xlin.cn 1mS o].0! @B@2*]
  if (kI < 0) kI = nI-1;  [文章来自:小林在线 http://www.xlin.cn P6+m)=n1x&i386m*f]
  titLe(kI);  [文章来自:小林在线 http://www.xlin.cn \ fTh! 'Ew2iAZ]
  P01i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn VxAv@D (y ]
  P2i.src  = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn =Ur'?IH,2]?v4-C"]
  for(var i=1; i<=20; i++) setTimeout("TPL_("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn xvtgD$R789`Hs`3PC]
 } else setTimeout("TPL()", 100);  [文章来自:小林在线 http://www.xlin.cn ,Y1IYl# lzw%b*O3]
[文章来自:小林在线 http://www.xlin.cn 28uJE0k:&R!IM6]
function titLe(p) {  [文章来自:小林在线 http://www.xlin.cn %t\a4S- CYTx=ut]
 document.getElementById("TXTBOX").innerHTML = IMGSRC[p].alt;  [文章来自:小林在线 http://www.xlin.cn U qUSOj`g, 7Lg?Z5 ]
[文章来自:小林在线 http://www.xlin.cn 2C#w0Ck 3Xh6k']
onload = function() {  [文章来自:小林在线 http://www.xlin.cn :#L=eM&?J^tTx&e]
 IMGSRC  = document.getElementById("imgsrc").getElementsByTagName("img");  [文章来自:小林在线 http://www.xlin.cn StJNGk~]J\49]T^&]
 DB      = document.getElementById("DHTMLBOOK");  [文章来自:小林在线 http://www.xlin.cn vbY?%C3_`ib( #gyA']
 P01     = DB.getElementsByTagName("span")[0];  [文章来自:小林在线 http://www.xlin.cn P8H~L|6z 9'%]
 P01i    = P01.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn )o2wt/"523{LD\Y&*]
 P02     = DB.getElementsByTagName("span")[1];  [文章来自:小林在线 http://www.xlin.cn 5FE."LqsU[KkN7QAu]
 P02i    = P02.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn '3FV@N|Fe(7V1:]
 P1      = DB.getElementsByTagName("span")[2];  [文章来自:小林在线 http://www.xlin.cn -!W:y\"3ZTN}=]
 P1i     = P1.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn 6~!_B6:bHrm2^hgd=]
 P2      = DB.getElementsByTagName("span")[3];  [文章来自:小林在线 http://www.xlin.cn L%K+VC& I$K=|?]
 P2i     = P2.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn Mlf;b2KXC2V eeJ#]
 nI      = IMGSRC.length;  [文章来自:小林在线 http://www.xlin.cn \^dhxjE[{gW&3X|M]
 P1i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn VrKnQ9kSt{Gw}!-[2t]
 P2i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn v#smkU9 Y|WEbC]
 titLe(kI);  [文章来自:小林在线 http://www.xlin.cn lu5ZPOfB?2[*V)?79.]
 DB.style.visibility = "visible";  [文章来自:小林在线 http://www.xlin.cn 3tVr3-#L7 !@w)H&Q]
[文章来自:小林在线 http://www.xlin.cn 9&RJc,MNWp49jnE]
//-->  [文章来自:小林在线 http://www.xlin.cn owi-f'6MhW5 ."b]
</SCRIPT>  [文章来自:小林在线 http://www.xlin.cn (?X)?ZD 7 vSgA-Q(pj]
<META content="MSHTML 6.00.6000.16809" name=GENERATOR></HEAD>  [文章来自:小林在线 http://www.xlin.cn ]X Dl QmAFPUL]
<BODY>  [文章来自:小林在线 http://www.xlin.cn ?4 "fk|$ukd/%RZogG]
<DIV id=center>  [文章来自:小林在线 http://www.xlin.cn ? r TS n+1?1' \hm]
<DIV id=DHTMLBOOK><SPAN class=page onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img></SPAN>  [文章来自:小林在线 http://www.xlin.cn F,=}ATy +o)t v?]
<SPAN class="page right" onmousedown="return false;" ondblclick=TPR(); onclick=TPR();><IMG class=img style="LEFT: -100%"></SPAN>  [文章来自:小林在线 http://www.xlin.cn '#,LRy{hBi 8xvzGH*]
<SPAN class="page turn" onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img style="FILTER: alpha(); opacity: 1"></SPAN>  [文章来自:小林在线 http://www.xlin.cn gptbzy LxJOhY+;0]
<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 ?[D?$- tea8,a%gR|T]
<DIV id=TXTBOX></DIV></DIV></DIV>  [文章来自:小林在线 http://www.xlin.cn *j{.W1] pROUu2]
<DIV id=imgsrc style="VISIBILITY: hidden">  [文章来自:小林在线 http://www.xlin.cn }=AFr Jb \[]
<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条。评论内容只代表网友观点,与本站立场无关!)