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

JS实现图片翻书效果

数据加载中...
<html xmlns="http://www.w3.org/1999/xhtml">  [文章来自:小林在线 http://www.xlin.cn Ja7 ucV=bI"K5"n ]
<head>  [文章来自:小林在线 http://www.xlin.cn {G; t+GjpnzO^n9j=H]
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  [文章来自:小林在线 http://www.xlin.cn xnPtXN?Nt!}6,(4:_]
<title>JS实现图片翻书效果</title>  [文章来自:小林在线 http://www.xlin.cn #4S ^r\FkJ]IlKj]
<META http-equiv=imagetoolbar content=no>  [文章来自:小林在线 http://www.xlin.cn v:DKy?8G5]\r j,Dx]
<STYLE type=text/css>  [文章来自:小林在线 http://www.xlin.cn ?f#c5 #}`Y"g 6m]
#center {  [文章来自:小林在线 http://www.xlin.cn D gbkt0p! ]
 LEFT: 50%; POSITION: absolute; TOP: 50%  [文章来自:小林在线 http://www.xlin.cn t7OA4jOg1)Q^]
[文章来自:小林在线 http://www.xlin.cn zS[Dau 5J?#sHL/OP]
#DHTMLBOOK {  [文章来自:小林在线 http://www.xlin.cn )h3i24h5DDm P]
 BACKGROUND: #000; LEFT: -210px; VISIBILITY: hidden; WIDTH: 420px; POSITION: relative; TOP: -160px; HEIGHT: 320px  [文章来自:小林在线 http://www.xlin.cn w;J?R=%,6/((c6-z]
[文章来自:小林在线 http://www.xlin.cn F`x[,a@P LUx ?]
#TXTBOX {  [文章来自:小林在线 http://www.xlin.cn 2FW&0HMC_0fe=nS]
 FONT-SIZE: 0.8em; WIDTH: 410px; COLOR: #aba193; FONT-FAMILY: verdana; POSITION: absolute; TOP: 320px; TEXT-ALIGN: center  [文章来自:小林在线 http://www.xlin.cn 8FB.`{JUFTFuL0teFE]
[文章来自:小林在线 http://www.xlin.cn 6elXVmo*tz/Pg \I!]
.page {  [文章来自:小林在线 http://www.xlin.cn L31)jqvt}${N]
 OVERFLOW: hidden; BORDER-LEFT: #000000 1px solid; WIDTH: 50%; CURSOR: pointer; POSITION: absolute; HEIGHT: 100%  [文章来自:小林在线 http://www.xlin.cn 9\|{zG[#T`9.d=+1]
[文章来自:小林在线 http://www.xlin.cn Ue]5BVb^9ZR;V?1M.$]
.right {  [文章来自:小林在线 http://www.xlin.cn PqAR4mBOx|M b]
 BORDER-RIGHT: #000000 1px solid; LEFT: 50%  [文章来自:小林在线 http://www.xlin.cn 1HIENS KD#s u/]
[文章来自:小林在线 http://www.xlin.cn Rk4QjIJ&K#aN_)0~]
.turn {  [文章来自:小林在线 http://www.xlin.cn  jz%0*@d`rz0ezry]
 BACKGROUND: #000000  [文章来自:小林在线 http://www.xlin.cn rUZwvmK1E@e WW[z+]
[文章来自:小林在线 http://www.xlin.cn '?/-_S1+8sJOJxK]
.img {  [文章来自:小林在线 http://www.xlin.cn pXV-Y+&&0g_\i']
 WIDTH: 200%; POSITION: absolute; HEIGHT: 100%  [文章来自:小林在线 http://www.xlin.cn  'Fo ) T?*]
[文章来自:小林在线 http://www.xlin.cn h] dd W%]0=" ZMc ]
</STYLE>  [文章来自:小林在线 http://www.xlin.cn 4NT|-mc~.6$s0:o]
<SCRIPT type=text/javascript><!--  [文章来自:小林在线 http://www.xlin.cn 9 d'=Y%& 2j'=,P_ ]
document.onselectstart = function () { return false; }  [文章来自:小林在线 http://www.xlin.cn H!iQ-V=! o4i6& ! N=]
var nI  = 0;  [文章来自:小林在线 http://www.xlin.cn kJay:KfHe;H0X7/]
var kI  = 0;  [文章来自:小林在线 http://www.xlin.cn `|05{?Su uJ~T([]
var run = false;  [文章来自:小林在线 http://www.xlin.cn BB9$Jfq 8K,1EZ=#]
function setOpacity(obj,o) {  [文章来自:小林在线 http://www.xlin.cn G=Op`!MvmI*z(b#isWY]
 if (o<0) o=0; else if (o>100) o = 100;  [文章来自:小林在线 http://www.xlin.cn !Z{`NBeX_Ddo2g]
 if (obj.filters)obj.filters.alpha.opacity=o; else obj.style.opacity = o/100;  [文章来自:小林在线 http://www.xlin.cn 9krCv_3G7Z0*"Apw;]
[文章来自:小林在线 http://www.xlin.cn KEYL@sEDAWZG!ilM]
function TPR__(p) {  [文章来自:小林在线 http://www.xlin.cn (w**I%"PPEBT`.*D]
 P1.style.left  = 50-(2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn $q)w&j` V1og4!]
 P1.style.width = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn u}sK$.MQY`fYX*bl]
 setOpacity(P1i, .5*p*p);  [文章来自:小林在线 http://www.xlin.cn ]c=DgmDZFCQ!Zka{P]
 if (p == 20) run = false;  [文章来自:小林在线 http://www.xlin.cn 2pE8Zn,xQ&FV+f]
[文章来自:小林在线 http://www.xlin.cn bc Yb vU[yJ/jN\Zl]
function TPR_(p) {  [文章来自:小林在线 http://www.xlin.cn f4-Sv(=\b4FOppb]
 P2.style.width = 50-(2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn ls5,G7TaVz'7aPR]
 setOpacity(P2i, 100-.5*(p*p));  [文章来自:小林在线 http://www.xlin.cn H.(VQo!?G&NY(_ek'D]
 if (p == 20) {  [文章来自:小林在线 http://www.xlin.cn WSS1\ ?m9p1 xQ*ihv]
  P2i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn 36#Q^ MKC9=(c+1]
  setOpacity(P2i, 100);  [文章来自:小林在线 http://www.xlin.cn ^X&[.BKbCw]
  P2.style.width = "50%";  [文章来自:小林在线 http://www.xlin.cn op1Zps5HY?\PgE\={Y]
  for(var i=1; i<=20; i++) setTimeout("TPR__("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn NGs3?r1YG~l[N ]
 }  [文章来自:小林在线 http://www.xlin.cn ]=H`=1Q6[duK^t]
[文章来自:小林在线 http://www.xlin.cn h$UmQ1GXGR&; ]
function TPR() {  [文章来自:小林在线 http://www.xlin.cn LZwBtW +oyjd+o]
 if (!run) {  [文章来自:小林在线 http://www.xlin.cn ,Os3-dH] &?xKc!]
  run = true;  [文章来自:小林在线 http://www.xlin.cn ,3=c}u&i}#'omh1`]
  P01i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn ;Crfacy%B!_#M]
  P1.style.width = 0;  [文章来自:小林在线 http://www.xlin.cn "Vcm87O!UN\!xq w%j]
  kI++;  [文章来自:小林在线 http://www.xlin.cn n QV P.2FSP!0sw?]
  if (kI>=nI) kI = 0;  [文章来自:小林在线 http://www.xlin.cn C d1*xYkSR/&=+]
  titLe(kI);  [文章来自:小林在线 http://www.xlin.cn mv ^K'h{7:DGUvigb.H]
  P02i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn WXgHp4k4gCc#`'oz]
  P1i.src  = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn iVa!0*WiP:jO.z]
  for (var i=1; i<=20; i++) setTimeout("TPR_("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn Hluy+? =xlFM8+]
 } else setTimeout("TPR()", 100);  [文章来自:小林在线 http://www.xlin.cn &4F2xaoW [Hz.o]
[文章来自:小林在线 http://www.xlin.cn o#$cv(P4*93d.SH]
function TPL__(p) {  [文章来自:小林在线 http://www.xlin.cn 0 _fz-@Ad8#v~u]
 P2.style.width = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn =\3A8cL 8o%-p !`~}X]
 setOpacity(P2i, .5*p*p);  [文章来自:小林在线 http://www.xlin.cn s4 X EAvG6@Bb]
 if (p == 20) run = false;  [文章来自:小林在线 http://www.xlin.cn _V/7J4us2`PlH7]
[文章来自:小林在线 http://www.xlin.cn ;vrK#L:6 y5f3J]
function TPL_(p) {  [文章来自:小林在线 http://www.xlin.cn g_ iMhvK kl w-&G]
 P1.style.left  = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn 9)# #b/`bhiLjT|*)+]]
 P1.style.width = 40+(10-2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn y]!B ?1BTlJ7hJ?&U]
 setOpacity(P1i, 100-.5*(p*p));  [文章来自:小林在线 http://www.xlin.cn q+ladoi)s-%u9h#]
 if (p == 20) {  [文章来自:小林在线 http://www.xlin.cn l }D(Mt2yXugP=ge0]
  P1i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn Z2A *SGY7W]S0X:@5I@]
  setOpacity(P1i, 100);  [文章来自:小林在线 http://www.xlin.cn `;.#T+2"j2'jt2]H]
  P1.style.left  = 0;  [文章来自:小林在线 http://www.xlin.cn =KrCRxxEoE!m.H0]
  P1.style.width = "50%";  [文章来自:小林在线 http://www.xlin.cn ?41%lBsVa;x{wGYi]
  for(var i=1; i<=20; i++) setTimeout("TPL__("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn tn_ }]`J'QIXBPxff ]
 }  [文章来自:小林在线 http://www.xlin.cn feF?cBLu?pWJ4dD]
[文章来自:小林在线 http://www.xlin.cn ,VFlqqZ*xO=y-kZl8?]
function TPL() {  [文章来自:小林在线 http://www.xlin.cn vkQ FeO6+ 8?~c8g]
 if (!run) {  [文章来自:小林在线 http://www.xlin.cn $+MR{@Y-:HX]
  run = true;  [文章来自:小林在线 http://www.xlin.cn &Fv1bs=~ vVwdd]
  P02i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn k:5H](C8_Mrq*GM|&=]
  P2.style.width = 0;  [文章来自:小林在线 http://www.xlin.cn D#As )4!BaYJbl8{C]
  kI--;  [文章来自:小林在线 http://www.xlin.cn %H4dDQ}{3f8?b j]
  if (kI < 0) kI = nI-1;  [文章来自:小林在线 http://www.xlin.cn XU#Y5]M^$:zPH]
  titLe(kI);  [文章来自:小林在线 http://www.xlin.cn FqGK" =?mYc8V?wKKs:]
  P01i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn ^Nkq-FouRs~h:1]
  P2i.src  = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn UFwgG)USk$T)ZShB]
  for(var i=1; i<=20; i++) setTimeout("TPL_("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn "Eft\16bZs8s|-Qw]
 } else setTimeout("TPL()", 100);  [文章来自:小林在线 http://www.xlin.cn *Ivb*A%$/ICeVFd]
[文章来自:小林在线 http://www.xlin.cn ?YpGLp%d5#-. ]
function titLe(p) {  [文章来自:小林在线 http://www.xlin.cn / '~V,*i]d?`bZsr]
 document.getElementById("TXTBOX").innerHTML = IMGSRC[p].alt;  [文章来自:小林在线 http://www.xlin.cn th8wme.0w ?$.]
[文章来自:小林在线 http://www.xlin.cn "(0 :} ]u%?1wC ]
onload = function() {  [文章来自:小林在线 http://www.xlin.cn +DNNi_evO:Ni p%_/B]
 IMGSRC  = document.getElementById("imgsrc").getElementsByTagName("img");  [文章来自:小林在线 http://www.xlin.cn QC(@'fc'a~R)(=]
 DB      = document.getElementById("DHTMLBOOK");  [文章来自:小林在线 http://www.xlin.cn pQaTfhQT s6GQn]
 P01     = DB.getElementsByTagName("span")[0];  [文章来自:小林在线 http://www.xlin.cn ];5@ [sGP s"M8lL+(]
 P01i    = P01.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn e??lNy= x;%f[.6r]
 P02     = DB.getElementsByTagName("span")[1];  [文章来自:小林在线 http://www.xlin.cn w82iQZP6IvM|':^]
 P02i    = P02.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn ]1J{Q LzcF[SQHGzGBc]
 P1      = DB.getElementsByTagName("span")[2];  [文章来自:小林在线 http://www.xlin.cn %k :-qGT/.:RJ9"]
 P1i     = P1.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn ~wvQ`5 I19F[N]
 P2      = DB.getElementsByTagName("span")[3];  [文章来自:小林在线 http://www.xlin.cn }SCSW%GysLVShXx9]
 P2i     = P2.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn ]zRi/B3XjHl@\8*|]
 nI      = IMGSRC.length;  [文章来自:小林在线 http://www.xlin.cn ht{v)a~*'//\iAy?Q]
 P1i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn IP --^TV jd%wu{bW/]
 P2i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn ` }C/.Z9E=7{0[9wNH]
 titLe(kI);  [文章来自:小林在线 http://www.xlin.cn 9E_DKgV:,N!@wPa]
 DB.style.visibility = "visible";  [文章来自:小林在线 http://www.xlin.cn 20}w=I'9Wz0kxQGB4Kv]
[文章来自:小林在线 http://www.xlin.cn {T+:)}5+K[q4R ]
//-->  [文章来自:小林在线 http://www.xlin.cn =IL v! ZK&^T0%?]
</SCRIPT>  [文章来自:小林在线 http://www.xlin.cn P~uJtt@VHv_6W]
<META content="MSHTML 6.00.6000.16809" name=GENERATOR></HEAD>  [文章来自:小林在线 http://www.xlin.cn /zt]8uUYp3%]
<BODY>  [文章来自:小林在线 http://www.xlin.cn im7)[nj]]Uw/Ut]
<DIV id=center>  [文章来自:小林在线 http://www.xlin.cn NN% v|eRsI7UgH~]
<DIV id=DHTMLBOOK><SPAN class=page onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img></SPAN>  [文章来自:小林在线 http://www.xlin.cn *8pWJr!ocF}o)GE]
<SPAN class="page right" onmousedown="return false;" ondblclick=TPR(); onclick=TPR();><IMG class=img style="LEFT: -100%"></SPAN>  [文章来自:小林在线 http://www.xlin.cn ,IQIl PxBm +VY{]
<SPAN class="page turn" onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img style="FILTER: alpha(); opacity: 1"></SPAN>  [文章来自:小林在线 http://www.xlin.cn h$OiBa:bNuuj$@Hwi']
<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 rxEuy.gi3bC M7}YpN ]
<DIV id=TXTBOX></DIV></DIV></DIV>  [文章来自:小林在线 http://www.xlin.cn *Goj[|sYDB?BE&zts1]
<DIV id=imgsrc style="VISIBILITY: hidden">  [文章来自:小林在线 http://www.xlin.cn |&R(;O5euWx_Q]
<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条。评论内容只代表网友观点,与本站立场无关!)