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

JS实现图片翻书效果

数据加载中...
<html xmlns="http://www.w3.org/1999/xhtml">  [文章来自:小林在线 http://www.xlin.cn vScNO i3\c~u4%~I\^c]
<head>  [文章来自:小林在线 http://www.xlin.cn t3*.RY-cG=5Yx]
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  [文章来自:小林在线 http://www.xlin.cn T 7 (zffQ(WF=h(=?]
<title>JS实现图片翻书效果</title>  [文章来自:小林在线 http://www.xlin.cn U6:neAa*?J'J;O7dg]
<META http-equiv=imagetoolbar content=no>  [文章来自:小林在线 http://www.xlin.cn Ew@pYm`E x/0R4]
<STYLE type=text/css>  [文章来自:小林在线 http://www.xlin.cn H`v7!2 9\]3YFa}]
#center {  [文章来自:小林在线 http://www.xlin.cn F9 T^kbvI?EQJ!2uYZ]
 LEFT: 50%; POSITION: absolute; TOP: 50%  [文章来自:小林在线 http://www.xlin.cn *:$Mt z,OU1)_up7r]
[文章来自:小林在线 http://www.xlin.cn mq!t0!Q,uF)uGiE,_]
#DHTMLBOOK {  [文章来自:小林在线 http://www.xlin.cn h]eMr`,]kI K0eF;]
 BACKGROUND: #000; LEFT: -210px; VISIBILITY: hidden; WIDTH: 420px; POSITION: relative; TOP: -160px; HEIGHT: 320px  [文章来自:小林在线 http://www.xlin.cn r~_h$\Py^* l1FXuK]
[文章来自:小林在线 http://www.xlin.cn iH={dw#IPjEtF]
#TXTBOX {  [文章来自:小林在线 http://www.xlin.cn M?o.n N =ghTX(~&JA]
 FONT-SIZE: 0.8em; WIDTH: 410px; COLOR: #aba193; FONT-FAMILY: verdana; POSITION: absolute; TOP: 320px; TEXT-ALIGN: center  [文章来自:小林在线 http://www.xlin.cn 3W ka_?(GLOL 7K:]
[文章来自:小林在线 http://www.xlin.cn E^'et?oGC {mf6?]
.page {  [文章来自:小林在线 http://www.xlin.cn 3pjg825nn$4cU:]
 OVERFLOW: hidden; BORDER-LEFT: #000000 1px solid; WIDTH: 50%; CURSOR: pointer; POSITION: absolute; HEIGHT: 100%  [文章来自:小林在线 http://www.xlin.cn 5:\RQvX)dz++|.Z]
[文章来自:小林在线 http://www.xlin.cn h@!Ni-:=l^Jh\ ]
.right {  [文章来自:小林在线 http://www.xlin.cn J`zS._#&gW)&I*a x]
 BORDER-RIGHT: #000000 1px solid; LEFT: 50%  [文章来自:小林在线 http://www.xlin.cn )*@i!Xj B 8 A0D]
[文章来自:小林在线 http://www.xlin.cn CiXe/FY/L5{8 ZyH]
.turn {  [文章来自:小林在线 http://www.xlin.cn 5[:\ T#%Le) V;jU`4]
 BACKGROUND: #000000  [文章来自:小林在线 http://www.xlin.cn /RA'4Gx[*Q:nZWK| ]
[文章来自:小林在线 http://www.xlin.cn Q"Vy0" d5`mAc? 1z]
.img {  [文章来自:小林在线 http://www.xlin.cn 27] 6@d'fL ixhVkI]
 WIDTH: 200%; POSITION: absolute; HEIGHT: 100%  [文章来自:小林在线 http://www.xlin.cn /t\7BEi-(]`+(E Pa[]
[文章来自:小林在线 http://www.xlin.cn AemLC=kgWqz56Ug\^]
</STYLE>  [文章来自:小林在线 http://www.xlin.cn o/0=_8(?EnmZONqU[]
<SCRIPT type=text/javascript><!--  [文章来自:小林在线 http://www.xlin.cn `g F= c 5 O'Nd=]
document.onselectstart = function () { return false; }  [文章来自:小林在线 http://www.xlin.cn =t8fbu['C9M}(RM]
var nI  = 0;  [文章来自:小林在线 http://www.xlin.cn j;64JTiKCJm{%.0]
var kI  = 0;  [文章来自:小林在线 http://www.xlin.cn +1O ,dHl#P2KW_o{h]
var run = false;  [文章来自:小林在线 http://www.xlin.cn I#6UD4!{MsCN4&e ]
function setOpacity(obj,o) {  [文章来自:小林在线 http://www.xlin.cn _I*fl H=wKjiQc7] ]
 if (o<0) o=0; else if (o>100) o = 100;  [文章来自:小林在线 http://www.xlin.cn 9H%)#2}_ .%O]M]
 if (obj.filters)obj.filters.alpha.opacity=o; else obj.style.opacity = o/100;  [文章来自:小林在线 http://www.xlin.cn V,n-1[u9)A|q Vb8l]
[文章来自:小林在线 http://www.xlin.cn H&@HCP +j+w.J(]
function TPR__(p) {  [文章来自:小林在线 http://www.xlin.cn ? GgbYS~ 8Lt&yr4~+]
 P1.style.left  = 50-(2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn Z(Bk`zxss=:(=#ZdQ$]
 P1.style.width = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn :Ad){E[lrzj{:c1 6]
 setOpacity(P1i, .5*p*p);  [文章来自:小林在线 http://www.xlin.cn ]i\x"$4v0wXL#F@ Q]
 if (p == 20) run = false;  [文章来自:小林在线 http://www.xlin.cn 4s&ox,?.;{Ih#C#]
[文章来自:小林在线 http://www.xlin.cn v?|Vp38~_SV'0ZC]
function TPR_(p) {  [文章来自:小林在线 http://www.xlin.cn -t)#B4 4I~nECU6*} ~]
 P2.style.width = 50-(2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn !J3-InH:[)d/]Z&w|=]
 setOpacity(P2i, 100-.5*(p*p));  [文章来自:小林在线 http://www.xlin.cn a9xlDrr?~GWQ]
 if (p == 20) {  [文章来自:小林在线 http://www.xlin.cn alhV:p(@g|Fn@]hZ]
  P2i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn "gWVEp?@rN PEkz u]
  setOpacity(P2i, 100);  [文章来自:小林在线 http://www.xlin.cn R,-7F z,vq L/,)x!R]
  P2.style.width = "50%";  [文章来自:小林在线 http://www.xlin.cn k==:L;Or+f145*]
  for(var i=1; i<=20; i++) setTimeout("TPR__("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn Ad3Y :Syx.r(Se 6]
 }  [文章来自:小林在线 http://www.xlin.cn /]&a:RX89iuV/+:]
[文章来自:小林在线 http://www.xlin.cn :Ls](PsS my 11]
function TPR() {  [文章来自:小林在线 http://www.xlin.cn G=L hyTRj_=Om%s|]
 if (!run) {  [文章来自:小林在线 http://www.xlin.cn eZ-S\GXrC @Vce,cxG]
  run = true;  [文章来自:小林在线 http://www.xlin.cn 7m3=1myvEo}|F]
  P01i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn ?.WPJdV=mf,C\)R"l]
  P1.style.width = 0;  [文章来自:小林在线 http://www.xlin.cn S` J%Em"iR%et?(2]
  kI++;  [文章来自:小林在线 http://www.xlin.cn h4d4@c{#rm+GC8z]
  if (kI>=nI) kI = 0;  [文章来自:小林在线 http://www.xlin.cn x' m/UFG)L5$,+$]
  titLe(kI);  [文章来自:小林在线 http://www.xlin.cn /$7?%3Fl bh@2c]
  P02i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn )f;KlaP30" -iH 2]
  P1i.src  = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn IH vJs_?R:k_RJ^]
  for (var i=1; i<=20; i++) setTimeout("TPR_("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn DkK8 ?b9//|JzuSco]
 } else setTimeout("TPR()", 100);  [文章来自:小林在线 http://www.xlin.cn quc^whQ4,,g9]
[文章来自:小林在线 http://www.xlin.cn aaE^l#y K9T/5']
function TPL__(p) {  [文章来自:小林在线 http://www.xlin.cn UC,=?y}lc ` 9&b]
 P2.style.width = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn C\rKJ$' ]Y#*$=:h}]
 setOpacity(P2i, .5*p*p);  [文章来自:小林在线 http://www.xlin.cn m]  nqF(way#`2ycF]
 if (p == 20) run = false;  [文章来自:小林在线 http://www.xlin.cn ohdHx@/?$W;1zW]
[文章来自:小林在线 http://www.xlin.cn q #l)YElI`PwS(f]
function TPL_(p) {  [文章来自:小林在线 http://www.xlin.cn W#Rs[sPq~HkpI]
 P1.style.left  = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn b$O.L?)tD:(j *n:]
 P1.style.width = 40+(10-2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn pw4x!^9H49oix&b)]
 setOpacity(P1i, 100-.5*(p*p));  [文章来自:小林在线 http://www.xlin.cn ce6~Ka6kin_'2:]
 if (p == 20) {  [文章来自:小林在线 http://www.xlin.cn I\/?-d8f& H V%]
  P1i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn *7PHOQAmmxh?D3"J&N]
  setOpacity(P1i, 100);  [文章来自:小林在线 http://www.xlin.cn y :8t@CD=:otm$]
  P1.style.left  = 0;  [文章来自:小林在线 http://www.xlin.cn Br[oS  $rbYqN #\]
  P1.style.width = "50%";  [文章来自:小林在线 http://www.xlin.cn h+ E e\o,kf]
  for(var i=1; i<=20; i++) setTimeout("TPL__("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn Dwkx{KC[oU~-]
 }  [文章来自:小林在线 http://www.xlin.cn @5v(+pnc2Wi" nI Xm]
[文章来自:小林在线 http://www.xlin.cn ;uE4?2^!trf==m (Jo]
function TPL() {  [文章来自:小林在线 http://www.xlin.cn 3Jrk{nB31~? M yj]
 if (!run) {  [文章来自:小林在线 http://www.xlin.cn KFc^v+I jt XKRyI"p]
  run = true;  [文章来自:小林在线 http://www.xlin.cn V(=!8]h.# =G0wWkM]
  P02i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn UBrwb7Rxywl=*]
  P2.style.width = 0;  [文章来自:小林在线 http://www.xlin.cn K&vC|[S/=N%Hg `]
  kI--;  [文章来自:小林在线 http://www.xlin.cn |;^ ?f,#~g8RIpPF[]
  if (kI < 0) kI = nI-1;  [文章来自:小林在线 http://www.xlin.cn w;\ 8/v9(=J](]
  titLe(kI);  [文章来自:小林在线 http://www.xlin.cn [t" 3  r pNxJ]
  P01i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn '}/21^YDc~]u_,!]
  P2i.src  = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn 3#B=qo}ul`5y ]
  for(var i=1; i<=20; i++) setTimeout("TPL_("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn ,715GS$&7RU0iv`C-N]
 } else setTimeout("TPL()", 100);  [文章来自:小林在线 http://www.xlin.cn l\&N:_i8zAfBSAcs]
[文章来自:小林在线 http://www.xlin.cn =r7g0GC?RO1 d?r]
function titLe(p) {  [文章来自:小林在线 http://www.xlin.cn mJ }gP=3koyQEpqf!==]
 document.getElementById("TXTBOX").innerHTML = IMGSRC[p].alt;  [文章来自:小林在线 http://www.xlin.cn "2Y \b]?8%2 &#L4 ]
[文章来自:小林在线 http://www.xlin.cn 05iA6V9\3^(cp(d}]
onload = function() {  [文章来自:小林在线 http://www.xlin.cn GF;lb\NWvHH2]
 IMGSRC  = document.getElementById("imgsrc").getElementsByTagName("img");  [文章来自:小林在线 http://www.xlin.cn F\}(V:YQCXlqt,Z=`/P]
 DB      = document.getElementById("DHTMLBOOK");  [文章来自:小林在线 http://www.xlin.cn "j?%j ia7Xn!Yw]
 P01     = DB.getElementsByTagName("span")[0];  [文章来自:小林在线 http://www.xlin.cn ],BU MlBCmBDR"z*]
 P01i    = P01.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn _4!p8YA}fnG=X+s3!e*]
 P02     = DB.getElementsByTagName("span")[1];  [文章来自:小林在线 http://www.xlin.cn {"{;rd^;9 M?C]]
 P02i    = P02.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn _Se-? xad-?"' N]
 P1      = DB.getElementsByTagName("span")[2];  [文章来自:小林在线 http://www.xlin.cn QU`VVq)9U9?9]
 P1i     = P1.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn ;=z4 m+|D1.l"DKE O:]
 P2      = DB.getElementsByTagName("span")[3];  [文章来自:小林在线 http://www.xlin.cn hEu48#rpsLYhs Iw]
 P2i     = P2.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn M&s {X.?M{#Uc)(Xv]
 nI      = IMGSRC.length;  [文章来自:小林在线 http://www.xlin.cn h*6N+ 7B b]32*| ! fD]
 P1i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn ?0~h#!O&q:L`K']
 P2i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn 95ead0$8A=d/kVQf]
 titLe(kI);  [文章来自:小林在线 http://www.xlin.cn mmo[=Ch"l?u! 2\og"]
 DB.style.visibility = "visible";  [文章来自:小林在线 http://www.xlin.cn ]d?*oaQHHpu1q]0.]
[文章来自:小林在线 http://www.xlin.cn #rVe w&s2]|:G]
//-->  [文章来自:小林在线 http://www.xlin.cn ~xZz%y( ~tB?-lgHK]
</SCRIPT>  [文章来自:小林在线 http://www.xlin.cn b?Ioe%vd-u0Z-6]
<META content="MSHTML 6.00.6000.16809" name=GENERATOR></HEAD>  [文章来自:小林在线 http://www.xlin.cn ^B?su/|.GY \tPKJ4]
<BODY>  [文章来自:小林在线 http://www.xlin.cn on2{]]q7vBO *9&H]
<DIV id=center>  [文章来自:小林在线 http://www.xlin.cn zGad[Gf\MPHxWCax]
<DIV id=DHTMLBOOK><SPAN class=page onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img></SPAN>  [文章来自:小林在线 http://www.xlin.cn q9kmxms[/(=Zv7L=]
<SPAN class="page right" onmousedown="return false;" ondblclick=TPR(); onclick=TPR();><IMG class=img style="LEFT: -100%"></SPAN>  [文章来自:小林在线 http://www.xlin.cn 7a)6:$_"=.rX*\(d]
<SPAN class="page turn" onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img style="FILTER: alpha(); opacity: 1"></SPAN>  [文章来自:小林在线 http://www.xlin.cn z{H) UE4Bt=UpK)^]
<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 k@*g8FS`j{AE|,8s]
<DIV id=TXTBOX></DIV></DIV></DIV>  [文章来自:小林在线 http://www.xlin.cn ~ TToyya(2jWF}S]
<DIV id=imgsrc style="VISIBILITY: hidden">  [文章来自:小林在线 http://www.xlin.cn Tz R%3/&zg]u6 Jn]
<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条。评论内容只代表网友观点,与本站立场无关!)