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

JS实现图片翻书效果

数据加载中...
<html xmlns="http://www.w3.org/1999/xhtml">  [文章来自:小林在线 http://www.xlin.cn X0bRMtLzC2eFH\$~]
<head>  [文章来自:小林在线 http://www.xlin.cn ;~0e=K}~$% pun&kL/*]
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  [文章来自:小林在线 http://www.xlin.cn )R}CsTs I}D#|M#==]
<title>JS实现图片翻书效果</title>  [文章来自:小林在线 http://www.xlin.cn dkt4=;P'hiWUUN g]
<META http-equiv=imagetoolbar content=no>  [文章来自:小林在线 http://www.xlin.cn CK|Jiqu .@A8rh#S]
<STYLE type=text/css>  [文章来自:小林在线 http://www.xlin.cn wjc{g=hH!eps, ]
#center {  [文章来自:小林在线 http://www.xlin.cn g$XHD`u4Nw2 l./]
 LEFT: 50%; POSITION: absolute; TOP: 50%  [文章来自:小林在线 http://www.xlin.cn 7uMF4RUm!w},NvZ%t-]
[文章来自:小林在线 http://www.xlin.cn g\w3j$3JWr-K NUv]
#DHTMLBOOK {  [文章来自:小林在线 http://www.xlin.cn r@ny Ka|b?, `BIb]
 BACKGROUND: #000; LEFT: -210px; VISIBILITY: hidden; WIDTH: 420px; POSITION: relative; TOP: -160px; HEIGHT: 320px  [文章来自:小林在线 http://www.xlin.cn gbn @l0AO\)z(z*8yH]
[文章来自:小林在线 http://www.xlin.cn |qydml82HdqFc}c]
#TXTBOX {  [文章来自:小林在线 http://www.xlin.cn KC;g9wz5RLB'9w9uU2]
 FONT-SIZE: 0.8em; WIDTH: 410px; COLOR: #aba193; FONT-FAMILY: verdana; POSITION: absolute; TOP: 320px; TEXT-ALIGN: center  [文章来自:小林在线 http://www.xlin.cn iMmU5V #Uy4MS]
[文章来自:小林在线 http://www.xlin.cn g*qFDg`&=W#DIAUx ]
.page {  [文章来自:小林在线 http://www.xlin.cn (FEs|\$Q 3W:}kb]
 OVERFLOW: hidden; BORDER-LEFT: #000000 1px solid; WIDTH: 50%; CURSOR: pointer; POSITION: absolute; HEIGHT: 100%  [文章来自:小林在线 http://www.xlin.cn g' I ^Pf#*39[ tC/]
[文章来自:小林在线 http://www.xlin.cn 4A`f|+,Y?_A1YkU.]]
.right {  [文章来自:小林在线 http://www.xlin.cn K2rE%m@~p |F'|K]
 BORDER-RIGHT: #000000 1px solid; LEFT: 50%  [文章来自:小林在线 http://www.xlin.cn OePA7qJ`J,A4X(\Ob]
[文章来自:小林在线 http://www.xlin.cn ]BHMN5wS&._*]
.turn {  [文章来自:小林在线 http://www.xlin.cn Z ?] csHp_X/ A|w]
 BACKGROUND: #000000  [文章来自:小林在线 http://www.xlin.cn Q1_Z84IvEcD( `uq]
[文章来自:小林在线 http://www.xlin.cn & L`Iz=i%X,i0]
.img {  [文章来自:小林在线 http://www.xlin.cn =homM&#,K%=xTj_]
 WIDTH: 200%; POSITION: absolute; HEIGHT: 100%  [文章来自:小林在线 http://www.xlin.cn 6TJp"T=K\=T{|r!M]
[文章来自:小林在线 http://www.xlin.cn V %0yt6.eU bGUR^I]
</STYLE>  [文章来自:小林在线 http://www.xlin.cn ^;~~s `Xccx_%CL]
<SCRIPT type=text/javascript><!--  [文章来自:小林在线 http://www.xlin.cn c^p6_Qd dNY3,D/]
document.onselectstart = function () { return false; }  [文章来自:小林在线 http://www.xlin.cn -j&RQccN?}f7=(e]
var nI  = 0;  [文章来自:小林在线 http://www.xlin.cn |IGTt81_AmM{ `fziP]
var kI  = 0;  [文章来自:小林在线 http://www.xlin.cn Uz l?; A?,Eh }+J]
var run = false;  [文章来自:小林在线 http://www.xlin.cn L@I5VYQDVuL" A(Kn]
function setOpacity(obj,o) {  [文章来自:小林在线 http://www.xlin.cn C@`w$;4LOYiJFW!eg]
 if (o<0) o=0; else if (o>100) o = 100;  [文章来自:小林在线 http://www.xlin.cn OI[Z[Ot.? /f]
 if (obj.filters)obj.filters.alpha.opacity=o; else obj.style.opacity = o/100;  [文章来自:小林在线 http://www.xlin.cn 6nP&Hi(Yg=8nw!]
[文章来自:小林在线 http://www.xlin.cn b?Cd )kQ/2bjE.~6]
function TPR__(p) {  [文章来自:小林在线 http://www.xlin.cn H??QF|V,xBtQ@]
 P1.style.left  = 50-(2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn {e9Wo cMR0(F7 n]
 P1.style.width = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn XI%?Jc6+Mo.ZU?r!f]
 setOpacity(P1i, .5*p*p);  [文章来自:小林在线 http://www.xlin.cn x@\?qgSRE#-TJ]
 if (p == 20) run = false;  [文章来自:小林在线 http://www.xlin.cn }Hw{0c 4W!K'?S@_]
[文章来自:小林在线 http://www.xlin.cn NF]47jg8?7CoRpT%]
function TPR_(p) {  [文章来自:小林在线 http://www.xlin.cn *blB[Y\Zdn.Jz4BQ]
 P2.style.width = 50-(2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn T3pbk0UF)Q.Hc02]
 setOpacity(P2i, 100-.5*(p*p));  [文章来自:小林在线 http://www.xlin.cn Kg(R-oD-oEKz&B]
 if (p == 20) {  [文章来自:小林在线 http://www.xlin.cn 38?(M*Kv"zMo^WpM]
  P2i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn U3O`+9x]='%^7]
  setOpacity(P2i, 100);  [文章来自:小林在线 http://www.xlin.cn %5 -/t\99kZ7x"u@iLl]
  P2.style.width = "50%";  [文章来自:小林在线 http://www.xlin.cn P72%6~~%B-;W Oui]
  for(var i=1; i<=20; i++) setTimeout("TPR__("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn 7DM\ aL~e5L-s]~7tb]
 }  [文章来自:小林在线 http://www.xlin.cn 7&$*`[N&=+6@h]
[文章来自:小林在线 http://www.xlin.cn K=/%loX]F|1@]
function TPR() {  [文章来自:小林在线 http://www.xlin.cn ^IC%ifR_[7pJ M1Z]
 if (!run) {  [文章来自:小林在线 http://www.xlin.cn 6U/SDq&2=6;T,v|6:S]
  run = true;  [文章来自:小林在线 http://www.xlin.cn ne;; D[& 0 qT!0?p]
  P01i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn 8?'/,szYu} IL^_}Tr]
  P1.style.width = 0;  [文章来自:小林在线 http://www.xlin.cn Y=k.m/=[CR$H9]
  kI++;  [文章来自:小林在线 http://www.xlin.cn o'Y7d#-OirF$:.]
  if (kI>=nI) kI = 0;  [文章来自:小林在线 http://www.xlin.cn Lu MNv=w(Rs1'iI-]
  titLe(kI);  [文章来自:小林在线 http://www.xlin.cn |CNtBN":HRtI5gF;;Z]
  P02i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn x#1w7d()`PUfO]
  P1i.src  = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn \S.q;#Nww b=FtF\ #]
  for (var i=1; i<=20; i++) setTimeout("TPR_("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn Hv/pA 24#a=@g8nlG]
 } else setTimeout("TPR()", 100);  [文章来自:小林在线 http://www.xlin.cn  VY)Dp /X=*hvO]
[文章来自:小林在线 http://www.xlin.cn 'lPGQ]Ra=#Raq=?|]
function TPL__(p) {  [文章来自:小林在线 http://www.xlin.cn YAXrC Ns`_?Eu8]
 P2.style.width = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn t,]{dXe`j /P [hU ]
 setOpacity(P2i, .5*p*p);  [文章来自:小林在线 http://www.xlin.cn YRhPo%LEGQ}-?U&o]
 if (p == 20) run = false;  [文章来自:小林在线 http://www.xlin.cn ?Gb(eyq'^5 bimn=u]
[文章来自:小林在线 http://www.xlin.cn cO:I '$V='B?Xz|Wx2]
function TPL_(p) {  [文章来自:小林在线 http://www.xlin.cn xndT p- dxwA(^N:_n]
 P1.style.left  = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn s]Y9EVX,80NZZhg x]
 P1.style.width = 40+(10-2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn fPG$7Umja \r Wz]
 setOpacity(P1i, 100-.5*(p*p));  [文章来自:小林在线 http://www.xlin.cn Y]%R((\zn=^0Nqg[I]
 if (p == 20) {  [文章来自:小林在线 http://www.xlin.cn S^[BNZ7W0vE-PM6$,]
  P1i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn ?~v"8#p\`Y:1FS TI]
  setOpacity(P1i, 100);  [文章来自:小林在线 http://www.xlin.cn T"1qa^$iz LcL+]
  P1.style.left  = 0;  [文章来自:小林在线 http://www.xlin.cn ;9& ?Z2+ULcLo| s]
  P1.style.width = "50%";  [文章来自:小林在线 http://www.xlin.cn N=K/FM 3v{EO z []
  for(var i=1; i<=20; i++) setTimeout("TPL__("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn 8FfQ&zAYkJe!CG`]
 }  [文章来自:小林在线 http://www.xlin.cn =ZF!)u^-WgVTT]
[文章来自:小林在线 http://www.xlin.cn TXXmFjVZ`0QYR]4`]
function TPL() {  [文章来自:小林在线 http://www.xlin.cn IUrQ-iM~I#a]}64^.]
 if (!run) {  [文章来自:小林在线 http://www.xlin.cn 'vwb)4 b,L9RyDY Y\]
  run = true;  [文章来自:小林在线 http://www.xlin.cn ^44d;!en_l?v09]
  P02i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn B.rG9 1%o.tP/Pj}H[]
  P2.style.width = 0;  [文章来自:小林在线 http://www.xlin.cn B!]X5&WskT=u.7|$]
  kI--;  [文章来自:小林在线 http://www.xlin.cn HX5e`hpV0F*2^ {]
  if (kI < 0) kI = nI-1;  [文章来自:小林在线 http://www.xlin.cn }]$R]dq?n2*N5#%mC]
  titLe(kI);  [文章来自:小林在线 http://www.xlin.cn -W:#O? xQ3!;s]
  P01i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn Dmj4jFIxZg?H9GC]
  P2i.src  = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn wXZI\~;xcT=hk.M+]
  for(var i=1; i<=20; i++) setTimeout("TPL_("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn &[uS/Sv;\=P AjZcw]
 } else setTimeout("TPL()", 100);  [文章来自:小林在线 http://www.xlin.cn ~8@:qQ8-)( $0]]
[文章来自:小林在线 http://www.xlin.cn qAJx) y0]^dnR~Q]
function titLe(p) {  [文章来自:小林在线 http://www.xlin.cn 1e{9{U E3shi`C?]
 document.getElementById("TXTBOX").innerHTML = IMGSRC[p].alt;  [文章来自:小林在线 http://www.xlin.cn hUC1Y=W2;!; $jt}]
[文章来自:小林在线 http://www.xlin.cn H00=Pi3Kx # -va~en3]
onload = function() {  [文章来自:小林在线 http://www.xlin.cn # 4vjs__ c8{;4#]
 IMGSRC  = document.getElementById("imgsrc").getElementsByTagName("img");  [文章来自:小林在线 http://www.xlin.cn x"I:/T$yD=cp{~]
 DB      = document.getElementById("DHTMLBOOK");  [文章来自:小林在线 http://www.xlin.cn \]q?gu C.h?Q+]
 P01     = DB.getElementsByTagName("span")[0];  [文章来自:小林在线 http://www.xlin.cn 14auE%/K0tkxN_J(Jm]
 P01i    = P01.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn A'9SI;C]/ |-D]
 P02     = DB.getElementsByTagName("span")[1];  [文章来自:小林在线 http://www.xlin.cn X2)q }AZv)Q da]
 P02i    = P02.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn !_Y Pmc=7Fn=o`4]
 P1      = DB.getElementsByTagName("span")[2];  [文章来自:小林在线 http://www.xlin.cn 6?+.M /~k+ Z3@xF3]
 P1i     = P1.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn A df5L+IW#{wJq6v]
 P2      = DB.getElementsByTagName("span")[3];  [文章来自:小林在线 http://www.xlin.cn ]+TX!A abZEGPv]
 P2i     = P2.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn d}^|s!3'hi JS]
 nI      = IMGSRC.length;  [文章来自:小林在线 http://www.xlin.cn =qk_eD Vh#-ZS9]
 P1i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn hYs3C;%eMk ed6u ]
 P2i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn Yj50#8gi, E({0d ]
 titLe(kI);  [文章来自:小林在线 http://www.xlin.cn KqUu%mX!!(1c$]
 DB.style.visibility = "visible";  [文章来自:小林在线 http://www.xlin.cn U?kdMnmmlNk/fO#]
[文章来自:小林在线 http://www.xlin.cn MU?6EwR?`JSKbv.D|]
//-->  [文章来自:小林在线 http://www.xlin.cn ;Ct?"%.-rrTlh&+w]
</SCRIPT>  [文章来自:小林在线 http://www.xlin.cn ZXd}PBmI ;Y]
<META content="MSHTML 6.00.6000.16809" name=GENERATOR></HEAD>  [文章来自:小林在线 http://www.xlin.cn 9e B4*H!T|! ]
<BODY>  [文章来自:小林在线 http://www.xlin.cn #8n$NdB xb;j[]]
<DIV id=center>  [文章来自:小林在线 http://www.xlin.cn l4X6k8;kjuw1{]
<DIV id=DHTMLBOOK><SPAN class=page onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img></SPAN>  [文章来自:小林在线 http://www.xlin.cn 7@AJb|')l[=wl]
<SPAN class="page right" onmousedown="return false;" ondblclick=TPR(); onclick=TPR();><IMG class=img style="LEFT: -100%"></SPAN>  [文章来自:小林在线 http://www.xlin.cn 7\QBIlfl4+Mf[ SC]
<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-l{%xkK@qoY`e]
<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 p`o;&R} qqBs.jau]
<DIV id=TXTBOX></DIV></DIV></DIV>  [文章来自:小林在线 http://www.xlin.cn Ct'u2z8ykf 3jP4!^]
<DIV id=imgsrc style="VISIBILITY: hidden">  [文章来自:小林在线 http://www.xlin.cn h~7Xo0mtmN{=,a}]
<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条。评论内容只代表网友观点,与本站立场无关!)