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

JS实现图片翻书效果

数据加载中...
<html xmlns="http://www.w3.org/1999/xhtml">  [文章来自:小林在线 http://www.xlin.cn zD3:3|0HYoLRe]
<head>  [文章来自:小林在线 http://www.xlin.cn 8E&=G8`=al i$g]
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  [文章来自:小林在线 http://www.xlin.cn p/?z"nUsxF_?|+y7]
<title>JS实现图片翻书效果</title>  [文章来自:小林在线 http://www.xlin.cn `3iq3VNw@+,=F PsV ]
<META http-equiv=imagetoolbar content=no>  [文章来自:小林在线 http://www.xlin.cn F?+\zYh-$#MTK~rf5z]
<STYLE type=text/css>  [文章来自:小林在线 http://www.xlin.cn o?^"l"'Ij%l(XZw+ 5]
#center {  [文章来自:小林在线 http://www.xlin.cn 30l\ufwM PTE0]
 LEFT: 50%; POSITION: absolute; TOP: 50%  [文章来自:小林在线 http://www.xlin.cn 'bSMJ/;W##fJ ]
[文章来自:小林在线 http://www.xlin.cn 9 Y]Z?? 5vc%]T@]
#DHTMLBOOK {  [文章来自:小林在线 http://www.xlin.cn zY=9JDBq=*f?E] B]
 BACKGROUND: #000; LEFT: -210px; VISIBILITY: hidden; WIDTH: 420px; POSITION: relative; TOP: -160px; HEIGHT: 320px  [文章来自:小林在线 http://www.xlin.cn {!;Sprx^.lUAq[)1{]
[文章来自:小林在线 http://www.xlin.cn P2fx W j~mY%g,PA]
#TXTBOX {  [文章来自:小林在线 http://www.xlin.cn 1~D"onu,/gta(%S]
 FONT-SIZE: 0.8em; WIDTH: 410px; COLOR: #aba193; FONT-FAMILY: verdana; POSITION: absolute; TOP: 320px; TEXT-ALIGN: center  [文章来自:小林在线 http://www.xlin.cn ?g!K|Mh?=RpPHLUvt ]
[文章来自:小林在线 http://www.xlin.cn bn}\kqP*B{:2kN]
.page {  [文章来自:小林在线 http://www.xlin.cn OF rjb h~.?@[yZ]
 OVERFLOW: hidden; BORDER-LEFT: #000000 1px solid; WIDTH: 50%; CURSOR: pointer; POSITION: absolute; HEIGHT: 100%  [文章来自:小林在线 http://www.xlin.cn )]z.L@ `s[ jRz]
[文章来自:小林在线 http://www.xlin.cn ?\] F=zr.]a|1jE]
.right {  [文章来自:小林在线 http://www.xlin.cn s$thOz]@Q)]gw^ZpK]
 BORDER-RIGHT: #000000 1px solid; LEFT: 50%  [文章来自:小林在线 http://www.xlin.cn :`,HL/U,&5&+n)xXUb]
[文章来自:小林在线 http://www.xlin.cn ?N]%)}ujPHyUL= ]
.turn {  [文章来自:小林在线 http://www.xlin.cn !tVX6dPg9;+skI1i ]
 BACKGROUND: #000000  [文章来自:小林在线 http://www.xlin.cn \ ^}( XK1;1lf =o`]
[文章来自:小林在线 http://www.xlin.cn Ec9^U0zCOqM'*e 6I]n]
.img {  [文章来自:小林在线 http://www.xlin.cn . y/_kj)0ir6P]
 WIDTH: 200%; POSITION: absolute; HEIGHT: 100%  [文章来自:小林在线 http://www.xlin.cn )ct=Hq,n+x $\?r`*]
[文章来自:小林在线 http://www.xlin.cn iL]3ro]6iA5bi9]
</STYLE>  [文章来自:小林在线 http://www.xlin.cn DR+KBNrj-U%pN?G*5]
<SCRIPT type=text/javascript><!--  [文章来自:小林在线 http://www.xlin.cn T, eCHB,y*,dAXN]
document.onselectstart = function () { return false; }  [文章来自:小林在线 http://www.xlin.cn =zAH{s[b.cCF/F]
var nI  = 0;  [文章来自:小林在线 http://www.xlin.cn $A@ (+ ]H&7?,]
var kI  = 0;  [文章来自:小林在线 http://www.xlin.cn +OEps|aDk^edTs]
var run = false;  [文章来自:小林在线 http://www.xlin.cn ,w?'O =fP Fi@U? ]]
function setOpacity(obj,o) {  [文章来自:小林在线 http://www.xlin.cn ]-d"=9X{Th$*dhz]
 if (o<0) o=0; else if (o>100) o = 100;  [文章来自:小林在线 http://www.xlin.cn Am{Uf_bf+=*Qa%a]
 if (obj.filters)obj.filters.alpha.opacity=o; else obj.style.opacity = o/100;  [文章来自:小林在线 http://www.xlin.cn C#Z)z=})h0j9Qo]
[文章来自:小林在线 http://www.xlin.cn Tx`H+g\{@B[K?kBHR]
function TPR__(p) {  [文章来自:小林在线 http://www.xlin.cn 2 &doYn-,VvT5sL]
 P1.style.left  = 50-(2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn F"@v\-mj5' 8qQiw_']
 P1.style.width = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn &z[kXV S~v_ B}o]
 setOpacity(P1i, .5*p*p);  [文章来自:小林在线 http://www.xlin.cn fk8" ,D9XWCYB`qm]
 if (p == 20) run = false;  [文章来自:小林在线 http://www.xlin.cn Mo8t$"U3O {:hYnnGh]
[文章来自:小林在线 http://www.xlin.cn `\QotFD$Q\{a  )g{]
function TPR_(p) {  [文章来自:小林在线 http://www.xlin.cn CQ8wqtxBxN:#{qpIOD]
 P2.style.width = 50-(2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn $?Yp^Y=M'KBK/Y[ ]
 setOpacity(P2i, 100-.5*(p*p));  [文章来自:小林在线 http://www.xlin.cn )@Iwm~ aApi~# o]
 if (p == 20) {  [文章来自:小林在线 http://www.xlin.cn }Vopa(Xl{&tM&.PTD]
  P2i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn Z_TC~Lead)H5nz(@E]
  setOpacity(P2i, 100);  [文章来自:小林在线 http://www.xlin.cn %1"FON 1~+/9{Jv"(-]
  P2.style.width = "50%";  [文章来自:小林在线 http://www.xlin.cn 3Y[1ojr%fJ[K 'o-%?']
  for(var i=1; i<=20; i++) setTimeout("TPR__("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn )kdr4$P[O M~ywi%-|]
 }  [文章来自:小林在线 http://www.xlin.cn N"}d\&8UK|SF]B)i]
[文章来自:小林在线 http://www.xlin.cn 'hH|:fLD%LW,a]po]
function TPR() {  [文章来自:小林在线 http://www.xlin.cn C)npJK9Q4?[Dnz]
 if (!run) {  [文章来自:小林在线 http://www.xlin.cn BD|RW*Nb:Z"x]
  run = true;  [文章来自:小林在线 http://www.xlin.cn k+7cCo#U7rZ.&nD]
  P01i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn g-iFT7z"1j*_8={%h]
  P1.style.width = 0;  [文章来自:小林在线 http://www.xlin.cn cj{*t')6xTU*[ l]
  kI++;  [文章来自:小林在线 http://www.xlin.cn p8UyG[iXY&$km :Ir]
  if (kI>=nI) kI = 0;  [文章来自:小林在线 http://www.xlin.cn mOJ0Qk?r]} ]"Qa]
  titLe(kI);  [文章来自:小林在线 http://www.xlin.cn BkH`bu hK%f.P2T}p]
  P02i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn $YY7\&5|'xo9B BH#]]
  P1i.src  = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn d41tl\@Ls8vkx*@QL6]
  for (var i=1; i<=20; i++) setTimeout("TPR_("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn |?BrNKsOgN + ]
 } else setTimeout("TPR()", 100);  [文章来自:小林在线 http://www.xlin.cn 3,D+Hq ;Z9cj@SNV ]
[文章来自:小林在线 http://www.xlin.cn `b,MeFc$Wzdt0i l]
function TPL__(p) {  [文章来自:小林在线 http://www.xlin.cn J?P f(m9^K{yt?bKQ]
 P2.style.width = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn ,?ndV,H7,d+d =m]
 setOpacity(P2i, .5*p*p);  [文章来自:小林在线 http://www.xlin.cn W]# 3{D'\[Oz_]
 if (p == 20) run = false;  [文章来自:小林在线 http://www.xlin.cn rgN Jw+m!s&) "e]
[文章来自:小林在线 http://www.xlin.cn ]r*d 3k*343ku=Vr]
function TPL_(p) {  [文章来自:小林在线 http://www.xlin.cn 21fK@*k!,;Y1{p ]
 P1.style.left  = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn l6iP .$\ l?=cru]
 P1.style.width = 40+(10-2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn !By=ST/qh" ;lY]
 setOpacity(P1i, 100-.5*(p*p));  [文章来自:小林在线 http://www.xlin.cn i)0!w^|@(1d=X-h]
 if (p == 20) {  [文章来自:小林在线 http://www.xlin.cn bkpps{gjgcZ,%#F6]
  P1i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn LO :[wA? QFJHi ]]
  setOpacity(P1i, 100);  [文章来自:小林在线 http://www.xlin.cn Oe4P}=a!OGRKM]
  P1.style.left  = 0;  [文章来自:小林在线 http://www.xlin.cn ]_Y$rn_&K`dq,BF!]
  P1.style.width = "50%";  [文章来自:小林在线 http://www.xlin.cn 1R$P_!Y_aTggR[}X?]
  for(var i=1; i<=20; i++) setTimeout("TPL__("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn vCu'D}u_cTAcJ]
 }  [文章来自:小林在线 http://www.xlin.cn @\LSsJH#.,o'RPth]
[文章来自:小林在线 http://www.xlin.cn D]9LV~@h;Zqr0k]
function TPL() {  [文章来自:小林在线 http://www.xlin.cn 3gB \8$uLag:nHm]
 if (!run) {  [文章来自:小林在线 http://www.xlin.cn YYt=aZ?=t Z4)7^)]
  run = true;  [文章来自:小林在线 http://www.xlin.cn agggA 7$+e&U,!JQp]
  P02i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn JMC)$hSgIQY6]
  P2.style.width = 0;  [文章来自:小林在线 http://www.xlin.cn M&&Pd(8gWLuV6HSe5i]
  kI--;  [文章来自:小林在线 http://www.xlin.cn 5 pB+JvFq:erx8wY]
  if (kI < 0) kI = nI-1;  [文章来自:小林在线 http://www.xlin.cn , a8jJ,c | (qkM]
  titLe(kI);  [文章来自:小林在线 http://www.xlin.cn =&Z !Mi gq_xO4^]
  P01i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn CFyctKERCp .c~uIX]
  P2i.src  = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn d H2{VPeE( 4Td8,(]
  for(var i=1; i<=20; i++) setTimeout("TPL_("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn Jne?\6}_fDit=h]
 } else setTimeout("TPL()", 100);  [文章来自:小林在线 http://www.xlin.cn wUi{OFB}7uslZ`Yb&]
[文章来自:小林在线 http://www.xlin.cn uR%JtB2-MPXh8`V=bA]
function titLe(p) {  [文章来自:小林在线 http://www.xlin.cn dAEFfaj++YZnE%p]
 document.getElementById("TXTBOX").innerHTML = IMGSRC[p].alt;  [文章来自:小林在线 http://www.xlin.cn ?=!=?;t =%9T3y=]
[文章来自:小林在线 http://www.xlin.cn 6`-#+~ Mg1d oq9p:G]
onload = function() {  [文章来自:小林在线 http://www.xlin.cn 5i2&W9i/V:*;}Y]
 IMGSRC  = document.getElementById("imgsrc").getElementsByTagName("img");  [文章来自:小林在线 http://www.xlin.cn O?[z_O?.0SEX|-@]
 DB      = document.getElementById("DHTMLBOOK");  [文章来自:小林在线 http://www.xlin.cn .KWFU/{aDvF8WO?]S;]
 P01     = DB.getElementsByTagName("span")[0];  [文章来自:小林在线 http://www.xlin.cn x]r?u Y #%3$z%&d]
 P01i    = P01.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn K #-4\',#bU$%y]
 P02     = DB.getElementsByTagName("span")[1];  [文章来自:小林在线 http://www.xlin.cn de9qXXNMSRWT2,]
 P02i    = P02.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn ^bVE *r?ecSi%DF2h]
 P1      = DB.getElementsByTagName("span")[2];  [文章来自:小林在线 http://www.xlin.cn W@[9G`?:;:2 {|H]
 P1i     = P1.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn /W*}=1YQ6V_X=iR_]
 P2      = DB.getElementsByTagName("span")[3];  [文章来自:小林在线 http://www.xlin.cn )Bgb:ka@XkX C;HW=]
 P2i     = P2.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn 3Sz%;_FkeZ (B"2K VJ]
 nI      = IMGSRC.length;  [文章来自:小林在线 http://www.xlin.cn +0/2` lEhHE@d]
 P1i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn U`?b"* i_| '') AG]
 P2i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn a\: Jz]KNggF7]
 titLe(kI);  [文章来自:小林在线 http://www.xlin.cn 0:`9FV:&p6t ]
 DB.style.visibility = "visible";  [文章来自:小林在线 http://www.xlin.cn Cq^g1 [uygIB* E]
[文章来自:小林在线 http://www.xlin.cn S^TU_rqYDT (!]
//-->  [文章来自:小林在线 http://www.xlin.cn Vmj (pkYj?cjdcYv^:]
</SCRIPT>  [文章来自:小林在线 http://www.xlin.cn {1@=iTd+m r6Oz5e]
<META content="MSHTML 6.00.6000.16809" name=GENERATOR></HEAD>  [文章来自:小林在线 http://www.xlin.cn ft "@`Ki#m|a]
<BODY>  [文章来自:小林在线 http://www.xlin.cn \Iy}T=mx||Z.Rd*y]]
<DIV id=center>  [文章来自:小林在线 http://www.xlin.cn ./hR[?A|:(Q*+"]
<DIV id=DHTMLBOOK><SPAN class=page onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img></SPAN>  [文章来自:小林在线 http://www.xlin.cn XaXs{S*.VZ FaRaL]
<SPAN class="page right" onmousedown="return false;" ondblclick=TPR(); onclick=TPR();><IMG class=img style="LEFT: -100%"></SPAN>  [文章来自:小林在线 http://www.xlin.cn nF ,jlm-R]?^(P s]
<SPAN class="page turn" onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img style="FILTER: alpha(); opacity: 1"></SPAN>  [文章来自:小林在线 http://www.xlin.cn E89e,mgKbGEO'4b]
<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 ; y0= =7h0t*%21v]
<DIV id=TXTBOX></DIV></DIV></DIV>  [文章来自:小林在线 http://www.xlin.cn +wkCs5H*s~ha]4A]
<DIV id=imgsrc style="VISIBILITY: hidden">  [文章来自:小林在线 http://www.xlin.cn ml{f/-ARu{O{yRTf|]
<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条。评论内容只代表网友观点,与本站立场无关!)