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

JS实现图片翻书效果

数据加载中...
<html xmlns="http://www.w3.org/1999/xhtml">  [文章来自:小林在线 http://www.xlin.cn  @[FLv|8jakvm{POr^]
<head>  [文章来自:小林在线 http://www.xlin.cn tb[BU? ?.?ry[]
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  [文章来自:小林在线 http://www.xlin.cn c(n(*Gb5j}3(k*]
<title>JS实现图片翻书效果</title>  [文章来自:小林在线 http://www.xlin.cn 0J OB1%:})Xn 'QKQW.]
<META http-equiv=imagetoolbar content=no>  [文章来自:小林在线 http://www.xlin.cn CNe4gbQI[G $C]~Jq]
<STYLE type=text/css>  [文章来自:小林在线 http://www.xlin.cn \r"ve %=t'6IX]
#center {  [文章来自:小林在线 http://www.xlin.cn q~h1oE,n?"gXx`]
 LEFT: 50%; POSITION: absolute; TOP: 50%  [文章来自:小林在线 http://www.xlin.cn 77;^A/3yd-PdkbQ$]
[文章来自:小林在线 http://www.xlin.cn ?_a3!dGrDM1".F?.]
#DHTMLBOOK {  [文章来自:小林在线 http://www.xlin.cn 7TP"1k$zFlv-e)LpVB[]
 BACKGROUND: #000; LEFT: -210px; VISIBILITY: hidden; WIDTH: 420px; POSITION: relative; TOP: -160px; HEIGHT: 320px  [文章来自:小林在线 http://www.xlin.cn Q'??7*i|L ?l703|b]
[文章来自:小林在线 http://www.xlin.cn AfNIp."1_r7Umw]
#TXTBOX {  [文章来自:小林在线 http://www.xlin.cn _ p5yrN^ ?'FaAE%6?]
 FONT-SIZE: 0.8em; WIDTH: 410px; COLOR: #aba193; FONT-FAMILY: verdana; POSITION: absolute; TOP: 320px; TEXT-ALIGN: center  [文章来自:小林在线 http://www.xlin.cn lf \S0 v3[`My ]
[文章来自:小林在线 http://www.xlin.cn p[CLHaVjD@[cC2S`]
.page {  [文章来自:小林在线 http://www.xlin.cn Ax]HC2gZV=mD@]
 OVERFLOW: hidden; BORDER-LEFT: #000000 1px solid; WIDTH: 50%; CURSOR: pointer; POSITION: absolute; HEIGHT: 100%  [文章来自:小林在线 http://www.xlin.cn yxqb*\s^*y8[]
[文章来自:小林在线 http://www.xlin.cn })\UiYHF~Hp]{*Z40]
.right {  [文章来自:小林在线 http://www.xlin.cn Zve4sugaW]hh#q(]
 BORDER-RIGHT: #000000 1px solid; LEFT: 50%  [文章来自:小林在线 http://www.xlin.cn M1!0=de7r$}]Q4ez]
[文章来自:小林在线 http://www.xlin.cn z\5$,}^wORC?:z6I]
.turn {  [文章来自:小林在线 http://www.xlin.cn 0 X gv~^G%;V)o]
 BACKGROUND: #000000  [文章来自:小林在线 http://www.xlin.cn =s =Lw5?g{5\? o']
[文章来自:小林在线 http://www.xlin.cn sry/,p*A# ug7ryERY]
.img {  [文章来自:小林在线 http://www.xlin.cn `|[p")88m {k]
 WIDTH: 200%; POSITION: absolute; HEIGHT: 100%  [文章来自:小林在线 http://www.xlin.cn h.|lb+d34`fn]y S9s:]
[文章来自:小林在线 http://www.xlin.cn akh\qA4 v&AER`66m]
</STYLE>  [文章来自:小林在线 http://www.xlin.cn w@I8$04lPu,I)XlB#]
<SCRIPT type=text/javascript><!--  [文章来自:小林在线 http://www.xlin.cn d ?599;,L { i!]
document.onselectstart = function () { return false; }  [文章来自:小林在线 http://www.xlin.cn ks=qzlNpLNLqU+9]
var nI  = 0;  [文章来自:小林在线 http://www.xlin.cn 7Ht'cJ| 70Y:wuQX(]
var kI  = 0;  [文章来自:小林在线 http://www.xlin.cn _;?%z[*yArwx=1H|m~]
var run = false;  [文章来自:小林在线 http://www.xlin.cn t0PI5 )*nm,!`ps*]
function setOpacity(obj,o) {  [文章来自:小林在线 http://www.xlin.cn tu J-?MtEW ?jhD/]
 if (o<0) o=0; else if (o>100) o = 100;  [文章来自:小林在线 http://www.xlin.cn KZ4"D,Cj&{7iUF)Vf']
 if (obj.filters)obj.filters.alpha.opacity=o; else obj.style.opacity = o/100;  [文章来自:小林在线 http://www.xlin.cn d' -85 ZzhE=9t)s]
[文章来自:小林在线 http://www.xlin.cn `r:B&?[:_g2;Zh:]
function TPR__(p) {  [文章来自:小林在线 http://www.xlin.cn #Ck'PU} T6$}E]
 P1.style.left  = 50-(2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn G${i$X`7V,E}G,hI^X]
 P1.style.width = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn ;eYqSiJ2l!2j8(xCd]
 setOpacity(P1i, .5*p*p);  [文章来自:小林在线 http://www.xlin.cn RUB" P8)Tqzz'X]
 if (p == 20) run = false;  [文章来自:小林在线 http://www.xlin.cn @ tI-]"kBm740kB]
[文章来自:小林在线 http://www.xlin.cn zczJCK.ogheB%*J]
function TPR_(p) {  [文章来自:小林在线 http://www.xlin.cn 8y){;P%\Iq=u },]
 P2.style.width = 50-(2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn o0HKTVOcA-"pu ]
 setOpacity(P2i, 100-.5*(p*p));  [文章来自:小林在线 http://www.xlin.cn Z4XB QV o?xbH8*]
 if (p == 20) {  [文章来自:小林在线 http://www.xlin.cn Pf(1B7:yt3ZQc *]
  P2i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn P =/AmZ S'x3=6{0?]
  setOpacity(P2i, 100);  [文章来自:小林在线 http://www.xlin.cn `es~?[|uRYt.m$]
  P2.style.width = "50%";  [文章来自:小林在线 http://www.xlin.cn u~|L5$1rVmo_$-&]
  for(var i=1; i<=20; i++) setTimeout("TPR__("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn Tq::=o{B#uU SO)xH]
 }  [文章来自:小林在线 http://www.xlin.cn Kh2M gh7!+-ZT]]
[文章来自:小林在线 http://www.xlin.cn KWZY6fxr-Z*OZ" )]
function TPR() {  [文章来自:小林在线 http://www.xlin.cn 5YF1/l+EHCcn8hjQ0{]
 if (!run) {  [文章来自:小林在线 http://www.xlin.cn 42SWp3YP !0a&k]]
  run = true;  [文章来自:小林在线 http://www.xlin.cn B.a|UK\i=. }IK C]
  P01i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn 1Ey`=%Pk=9}Ug]]
  P1.style.width = 0;  [文章来自:小林在线 http://www.xlin.cn _!?cCaR$w}bk`'XL]
  kI++;  [文章来自:小林在线 http://www.xlin.cn =C&R* O |5CNDu!x]
  if (kI>=nI) kI = 0;  [文章来自:小林在线 http://www.xlin.cn $1 1weh(/"W K@~]
  titLe(kI);  [文章来自:小林在线 http://www.xlin.cn uN?e"))q| Ig35s]
  P02i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn XFzRL-[2*!KwAr-(l]
  P1i.src  = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn Y^9@HCl(n+?@GdmI]
  for (var i=1; i<=20; i++) setTimeout("TPR_("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn 4ue1Q__B=s9%~R 8D$]
 } else setTimeout("TPR()", 100);  [文章来自:小林在线 http://www.xlin.cn P]sc?R;Oz=Et_4,]
[文章来自:小林在线 http://www.xlin.cn $;U|a;MVm.* a 5]
function TPL__(p) {  [文章来自:小林在线 http://www.xlin.cn ^W;x{^.'ye. I)kVv +]
 P2.style.width = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn ?YimB=V=!upN#UC$]
 setOpacity(P2i, .5*p*p);  [文章来自:小林在线 http://www.xlin.cn ]_gi =}ICs`V+=]
 if (p == 20) run = false;  [文章来自:小林在线 http://www.xlin.cn g8 |\ mp6fP[6(d1]
[文章来自:小林在线 http://www.xlin.cn "=6'|H#,@!57Wmw]
function TPL_(p) {  [文章来自:小林在线 http://www.xlin.cn KnAPeU cA5h|6:Ls]
 P1.style.left  = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn zbG_l`jpix2tDf]
 P1.style.width = 40+(10-2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn f{D=!e`0r-w=2WS5G]
 setOpacity(P1i, 100-.5*(p*p));  [文章来自:小林在线 http://www.xlin.cn HPk&`3G1z$RJ@w]
 if (p == 20) {  [文章来自:小林在线 http://www.xlin.cn \{xcg%rUBK{f(n1]
  P1i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn 4GR:aiD,k1uZj]
  setOpacity(P1i, 100);  [文章来自:小林在线 http://www.xlin.cn LD/LR;J@|v-sV(}]
  P1.style.left  = 0;  [文章来自:小林在线 http://www.xlin.cn t#uF|$(Mf?#$'Ba*u[]
  P1.style.width = "50%";  [文章来自:小林在线 http://www.xlin.cn +,k!U\R{te[4*ClL]
  for(var i=1; i<=20; i++) setTimeout("TPL__("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn u h_@aoG-M3v{#tb]
 }  [文章来自:小林在线 http://www.xlin.cn Iva -bzFx02*@k/B{]
[文章来自:小林在线 http://www.xlin.cn 3?U }8HkDNi-qp]
function TPL() {  [文章来自:小林在线 http://www.xlin.cn N |8mLO*(XD&GoME^]
 if (!run) {  [文章来自:小林在线 http://www.xlin.cn l*MTyod&n*}lE]T]
  run = true;  [文章来自:小林在线 http://www.xlin.cn W b=k"O e#fJ-n+OJ8]
  P02i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn 1dCy8T zF$8Az:f%]
  P2.style.width = 0;  [文章来自:小林在线 http://www.xlin.cn xD(Y4!72rB:q`4Iq|]
  kI--;  [文章来自:小林在线 http://www.xlin.cn %D0J= \&)r?U {V#;0]
  if (kI < 0) kI = nI-1;  [文章来自:小林在线 http://www.xlin.cn s?12 Jdz1qMMJ7AE]
  titLe(kI);  [文章来自:小林在线 http://www.xlin.cn =--nA{Ml_+ 0N?" ]
  P01i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn ~_x^O;|!Y P%`X ^]
  P2i.src  = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn }Ktt\hiA OR5Cz "]
  for(var i=1; i<=20; i++) setTimeout("TPL_("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn dVhO?BkS%=L;GlX~]
 } else setTimeout("TPL()", 100);  [文章来自:小林在线 http://www.xlin.cn ?T#DWYioQ9-&u7[CJ]
[文章来自:小林在线 http://www.xlin.cn UJ=,]E8(dt4~tc=HY]
function titLe(p) {  [文章来自:小林在线 http://www.xlin.cn oIzb"Dy P@'Z6@e]
 document.getElementById("TXTBOX").innerHTML = IMGSRC[p].alt;  [文章来自:小林在线 http://www.xlin.cn kzM/o2 Zw?fsWBe7]
[文章来自:小林在线 http://www.xlin.cn H5)K@0'8yT} W6]
onload = function() {  [文章来自:小林在线 http://www.xlin.cn yLN=' 8X8m ^\d]
 IMGSRC  = document.getElementById("imgsrc").getElementsByTagName("img");  [文章来自:小林在线 http://www.xlin.cn jAuA==0saHu@]
 DB      = document.getElementById("DHTMLBOOK");  [文章来自:小林在线 http://www.xlin.cn 'iee^{$cQ}5L,bwnWL]
 P01     = DB.getElementsByTagName("span")[0];  [文章来自:小林在线 http://www.xlin.cn HluZCtu,s*qeb=]
 P01i    = P01.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn hQlNf[]mX:?m 6A&963]
 P02     = DB.getElementsByTagName("span")[1];  [文章来自:小林在线 http://www.xlin.cn 6wk#XP{P};d[v]
 P02i    = P02.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn (w ]\$O=Fqk=GeBj]
 P1      = DB.getElementsByTagName("span")[2];  [文章来自:小林在线 http://www.xlin.cn :)[{R&74Pw }4!?l]
 P1i     = P1.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn ,II79SxRah nr%]
 P2      = DB.getElementsByTagName("span")[3];  [文章来自:小林在线 http://www.xlin.cn $[7SE7D?g=CU#bu8a]
 P2i     = P2.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn m.Qi|.md=zY`#f/{X]
 nI      = IMGSRC.length;  [文章来自:小林在线 http://www.xlin.cn \,d1O" ^y]!Sr]
 P1i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn Sn{sL/f"B^nFxh]
 P2i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn ^ `WQtfFno9L:V]
 titLe(kI);  [文章来自:小林在线 http://www.xlin.cn {=A#)'/j:b]fVNTk@.]
 DB.style.visibility = "visible";  [文章来自:小林在线 http://www.xlin.cn v_{W tndP:),)803]]]
[文章来自:小林在线 http://www.xlin.cn q/g#%JH`Z?OBqf5!V]
//-->  [文章来自:小林在线 http://www.xlin.cn r[,nE3'RmvJ~0s8t]
</SCRIPT>  [文章来自:小林在线 http://www.xlin.cn vI_& *{6P~5[Lb5o@]
<META content="MSHTML 6.00.6000.16809" name=GENERATOR></HEAD>  [文章来自:小林在线 http://www.xlin.cn 3[!l/2Y#V Z8wn^]
<BODY>  [文章来自:小林在线 http://www.xlin.cn ;5,O"l_Pv; HL=IZ]
<DIV id=center>  [文章来自:小林在线 http://www.xlin.cn LSq2\f"r0F :i hz]
<DIV id=DHTMLBOOK><SPAN class=page onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img></SPAN>  [文章来自:小林在线 http://www.xlin.cn #M^a)yFg6:;(Ju_]
<SPAN class="page right" onmousedown="return false;" ondblclick=TPR(); onclick=TPR();><IMG class=img style="LEFT: -100%"></SPAN>  [文章来自:小林在线 http://www.xlin.cn `*|1eG=EMG=c2~Zk6@]
<SPAN class="page turn" onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img style="FILTER: alpha(); opacity: 1"></SPAN>  [文章来自:小林在线 http://www.xlin.cn CZkreMGVo(he G)]
<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 1?]`V/Lv O] E]
<DIV id=TXTBOX></DIV></DIV></DIV>  [文章来自:小林在线 http://www.xlin.cn gLTQqCRO0zmX!$BpHO]
<DIV id=imgsrc style="VISIBILITY: hidden">  [文章来自:小林在线 http://www.xlin.cn j}.Hiv=z3oC'moEt]
<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条。评论内容只代表网友观点,与本站立场无关!)