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

JS实现图片翻书效果

数据加载中...
<html xmlns="http://www.w3.org/1999/xhtml">  [文章来自:小林在线 http://www.xlin.cn 'Y pk3G~VNP /*hSm]
<head>  [文章来自:小林在线 http://www.xlin.cn ,B~i\F-_+R;viT]
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  [文章来自:小林在线 http://www.xlin.cn "*veyPk.@.ReiGgpM]
<title>JS实现图片翻书效果</title>  [文章来自:小林在线 http://www.xlin.cn *2Y];ZnS}bE?^p 7z.R]
<META http-equiv=imagetoolbar content=no>  [文章来自:小林在线 http://www.xlin.cn }7oH8QPe]-|&Gj]
<STYLE type=text/css>  [文章来自:小林在线 http://www.xlin.cn *jFaK)u9nerQ6=\Wr7]
#center {  [文章来自:小林在线 http://www.xlin.cn y{6y*$*pptob)?,']
 LEFT: 50%; POSITION: absolute; TOP: 50%  [文章来自:小林在线 http://www.xlin.cn ng/v5f)]"5K7& v]
[文章来自:小林在线 http://www.xlin.cn ie4` [d?L"!rVI]
#DHTMLBOOK {  [文章来自:小林在线 http://www.xlin.cn k%y$;hbnugHD0(?\]
 BACKGROUND: #000; LEFT: -210px; VISIBILITY: hidden; WIDTH: 420px; POSITION: relative; TOP: -160px; HEIGHT: 320px  [文章来自:小林在线 http://www.xlin.cn sWE^EtQ7d4Yio^UykB]
[文章来自:小林在线 http://www.xlin.cn n9|r_RuK3j OPP}]
#TXTBOX {  [文章来自:小林在线 http://www.xlin.cn K^BtY%h 9r0XrAv h]
 FONT-SIZE: 0.8em; WIDTH: 410px; COLOR: #aba193; FONT-FAMILY: verdana; POSITION: absolute; TOP: 320px; TEXT-ALIGN: center  [文章来自:小林在线 http://www.xlin.cn T@l~j ]A45xUfpvptI]
[文章来自:小林在线 http://www.xlin.cn {P(QWe?8,!KL~2v]
.page {  [文章来自:小林在线 http://www.xlin.cn bi%|^Wze7 z u"]
 OVERFLOW: hidden; BORDER-LEFT: #000000 1px solid; WIDTH: 50%; CURSOR: pointer; POSITION: absolute; HEIGHT: 100%  [文章来自:小林在线 http://www.xlin.cn ff-yOUG7GTmxu8.E]
[文章来自:小林在线 http://www.xlin.cn k4@Zr~hd==l-^%]
.right {  [文章来自:小林在线 http://www.xlin.cn @N&q9-l{'o*\Va]
 BORDER-RIGHT: #000000 1px solid; LEFT: 50%  [文章来自:小林在线 http://www.xlin.cn kG^tLR 7LJ+L=g]
[文章来自:小林在线 http://www.xlin.cn ||R \`r8lUFFAyh`]
.turn {  [文章来自:小林在线 http://www.xlin.cn S;mOOG9B[MnNoc7]
 BACKGROUND: #000000  [文章来自:小林在线 http://www.xlin.cn !H=tZ[YU8c]1d.EZ]
[文章来自:小林在线 http://www.xlin.cn cd#Z.Bp[vh4c2m!_]
.img {  [文章来自:小林在线 http://www.xlin.cn %F&zv"!Lkg=Ou)x@`T]
 WIDTH: 200%; POSITION: absolute; HEIGHT: 100%  [文章来自:小林在线 http://www.xlin.cn QI/IpiY$bbo}-)J d]
[文章来自:小林在线 http://www.xlin.cn  Fs;oK )**\W!o?]
</STYLE>  [文章来自:小林在线 http://www.xlin.cn I1ts0,uZ=LV,Qf9C]
<SCRIPT type=text/javascript><!--  [文章来自:小林在线 http://www.xlin.cn ud#xV`+eaxMZ#2!{#]
document.onselectstart = function () { return false; }  [文章来自:小林在线 http://www.xlin.cn I/p! osZSS,j4]
var nI  = 0;  [文章来自:小林在线 http://www.xlin.cn @2Q9KmV)4p+HA=d8]
var kI  = 0;  [文章来自:小林在线 http://www.xlin.cn m.K,Zr|C6~!H9 ?i]
var run = false;  [文章来自:小林在线 http://www.xlin.cn gb*c^q@tQE_f+D]!^ok]
function setOpacity(obj,o) {  [文章来自:小林在线 http://www.xlin.cn @`6Lgezpk 3' M]
 if (o<0) o=0; else if (o>100) o = 100;  [文章来自:小林在线 http://www.xlin.cn 4()t^=Bk}r rbzwF=]
 if (obj.filters)obj.filters.alpha.opacity=o; else obj.style.opacity = o/100;  [文章来自:小林在线 http://www.xlin.cn Q5p)`p?7^6NG]
[文章来自:小林在线 http://www.xlin.cn j:8NZ`R4?B+ O3I]
function TPR__(p) {  [文章来自:小林在线 http://www.xlin.cn [olp:s.I+H;0Fsv]
 P1.style.left  = 50-(2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn Y##Y~6Z~xmJ)fst]
 P1.style.width = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn t*}!3Ox|DGHe5t]
 setOpacity(P1i, .5*p*p);  [文章来自:小林在线 http://www.xlin.cn GGu # t8B^t,mf`}]
 if (p == 20) run = false;  [文章来自:小林在线 http://www.xlin.cn ^[Gd "%c GrkJ'!]
[文章来自:小林在线 http://www.xlin.cn %(@AiKB~eYV? ]
function TPR_(p) {  [文章来自:小林在线 http://www.xlin.cn &?d.86bg=7mcn&]
 P2.style.width = 50-(2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn Lb:Y}$0c;{s"UVd]
 setOpacity(P2i, 100-.5*(p*p));  [文章来自:小林在线 http://www.xlin.cn -F;nfL i%$Y?6/]/]
 if (p == 20) {  [文章来自:小林在线 http://www.xlin.cn d=g05L+kR~M|Vl3Y3]
  P2i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn w8,PvY`TM(6fZ3]
  setOpacity(P2i, 100);  [文章来自:小林在线 http://www.xlin.cn 'G =9{lhP%2~~&,6~]
  P2.style.width = "50%";  [文章来自:小林在线 http://www.xlin.cn Mg*Q`=@A&;Jm]
  for(var i=1; i<=20; i++) setTimeout("TPR__("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn "|( =t_9P2Q}WI-%JP]
 }  [文章来自:小林在线 http://www.xlin.cn 6+GZiyLErA5T?~:.]
[文章来自:小林在线 http://www.xlin.cn s!It_Spe|ICn{?5mi]
function TPR() {  [文章来自:小林在线 http://www.xlin.cn b&cN~v5PA_Oke$]
 if (!run) {  [文章来自:小林在线 http://www.xlin.cn BiKyk6.yZGIC 68]
  run = true;  [文章来自:小林在线 http://www.xlin.cn 7!@*W9y/}Hb\]
  P01i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn m8r&?S9g"zS?Kvc]
  P1.style.width = 0;  [文章来自:小林在线 http://www.xlin.cn 2~m /!!{W g8,O=i ]
  kI++;  [文章来自:小林在线 http://www.xlin.cn mG_[p Stko@l_W l[#]
  if (kI>=nI) kI = 0;  [文章来自:小林在线 http://www.xlin.cn g=n1f{Z7-?h',pgfD]
  titLe(kI);  [文章来自:小林在线 http://www.xlin.cn qyIYpV295v|&3K]
  P02i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn DnLoJIVd..*Z]
  P1i.src  = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn 3f.iZCF]'%kRb5 /]
  for (var i=1; i<=20; i++) setTimeout("TPR_("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn )OiMfowuQoSko5HWk!]
 } else setTimeout("TPR()", 100);  [文章来自:小林在线 http://www.xlin.cn |n,m{Y qO#cV{G C#]
[文章来自:小林在线 http://www.xlin.cn 0hX&/"t{R=&|b%]
function TPL__(p) {  [文章来自:小林在线 http://www.xlin.cn jzF!*; [C7oC/-Y1yD3]
 P2.style.width = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn R*z/9U)-;|TpD\|Qk]
 setOpacity(P2i, .5*p*p);  [文章来自:小林在线 http://www.xlin.cn *@^gg06XKmVIBk'h~]
 if (p == 20) run = false;  [文章来自:小林在线 http://www.xlin.cn rPdTVo=#:tAuL943]
[文章来自:小林在线 http://www.xlin.cn ?}9Tu5"  y${IgMOJ]
function TPL_(p) {  [文章来自:小林在线 http://www.xlin.cn V"( Ts RI"uAk!Y98]
 P1.style.left  = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn 8;?L2GSDyFOv%~=B&]
 P1.style.width = 40+(10-2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn m9 l7O#{ zc$l]
 setOpacity(P1i, 100-.5*(p*p));  [文章来自:小林在线 http://www.xlin.cn } 6npg!J'~DI. vF;]
 if (p == 20) {  [文章来自:小林在线 http://www.xlin.cn tsQ62ZQa+VU ;=]
  P1i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn IMv2M,:bf}q=F@ w]
  setOpacity(P1i, 100);  [文章来自:小林在线 http://www.xlin.cn Bjm)D*1IlZDE04D8T]
  P1.style.left  = 0;  [文章来自:小林在线 http://www.xlin.cn \oU0(_rMXY 8:U]
  P1.style.width = "50%";  [文章来自:小林在线 http://www.xlin.cn !"!B;/'9 E-cS]
  for(var i=1; i<=20; i++) setTimeout("TPL__("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn t+:MKB?~DQuLCWm]
 }  [文章来自:小林在线 http://www.xlin.cn 9u X\T2?As 0@d$]
[文章来自:小林在线 http://www.xlin.cn L35f!szBr(.7?%B0]
function TPL() {  [文章来自:小林在线 http://www.xlin.cn p =Tnvwd$HEL0&x=5o]
 if (!run) {  [文章来自:小林在线 http://www.xlin.cn ^hY5@Y]]p;a*2)]
  run = true;  [文章来自:小林在线 http://www.xlin.cn n9+C,tO|1qQ-n]=eq]
  P02i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn V3^kbj1hsX#o=]
  P2.style.width = 0;  [文章来自:小林在线 http://www.xlin.cn 9M_VMVi=Yd8 4']
  kI--;  [文章来自:小林在线 http://www.xlin.cn Inw)ljymCq:\Z,eh]
  if (kI < 0) kI = nI-1;  [文章来自:小林在线 http://www.xlin.cn /^XT;o?!5%E)k7RS]
  titLe(kI);  [文章来自:小林在线 http://www.xlin.cn v@j2}K !Vn2AM[pl_]
  P01i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn k);Xb_u [rhT=33]
  P2i.src  = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn !qG1 40$wQ T4TO ]
  for(var i=1; i<=20; i++) setTimeout("TPL_("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn 3# !7#, *`Bgq\?]
 } else setTimeout("TPL()", 100);  [文章来自:小林在线 http://www.xlin.cn #?)fqLmNRklc(b]=]
[文章来自:小林在线 http://www.xlin.cn ` v#4XG] ^!(?7m^ih]
function titLe(p) {  [文章来自:小林在线 http://www.xlin.cn e|' {N=5lu'C  Kp ]
 document.getElementById("TXTBOX").innerHTML = IMGSRC[p].alt;  [文章来自:小林在线 http://www.xlin.cn }[/"Tcy,3Yom(r[]
[文章来自:小林在线 http://www.xlin.cn $3av}G~L zNmnk0]
onload = function() {  [文章来自:小林在线 http://www.xlin.cn ~3X]S/5X4B ?]
 IMGSRC  = document.getElementById("imgsrc").getElementsByTagName("img");  [文章来自:小林在线 http://www.xlin.cn 08;]^@'#+_.xF]j ]
 DB      = document.getElementById("DHTMLBOOK");  [文章来自:小林在线 http://www.xlin.cn 3Y}=wv!}LKDT)/Co*Vo]
 P01     = DB.getElementsByTagName("span")[0];  [文章来自:小林在线 http://www.xlin.cn (jw }n-rIow L=GL]
 P01i    = P01.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn NG_1el0W"7jwsJ]
 P02     = DB.getElementsByTagName("span")[1];  [文章来自:小林在线 http://www.xlin.cn ?q?ZUu}gzHb;Z* Cu}G]
 P02i    = P02.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn ap=hiD3M$A[5Ha]
 P1      = DB.getElementsByTagName("span")[2];  [文章来自:小林在线 http://www.xlin.cn ypWiqYw_Jn@i"]
 P1i     = P1.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn nh23ws]~:}GFo[W:C]
 P2      = DB.getElementsByTagName("span")[3];  [文章来自:小林在线 http://www.xlin.cn mW)'F4Cf,hm*(F~ ]
 P2i     = P2.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn 45=6=JZI:g6;p8]
 nI      = IMGSRC.length;  [文章来自:小林在线 http://www.xlin.cn .?Z V1 .p}g@^]
 P1i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn req [ :q 5+a+)h]
 P2i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn 9$B8$m 5a8VnK\fg|]
 titLe(kI);  [文章来自:小林在线 http://www.xlin.cn &  c/Nbm0gT$O]
 DB.style.visibility = "visible";  [文章来自:小林在线 http://www.xlin.cn WNr(y!mvoA+ p0&Y]s]P]
[文章来自:小林在线 http://www.xlin.cn =pWmhE?AY cx]
//-->  [文章来自:小林在线 http://www.xlin.cn ?Qn PRWk?==b0@]
</SCRIPT>  [文章来自:小林在线 http://www.xlin.cn wqfnzl.Q2fGk#'M]
<META content="MSHTML 6.00.6000.16809" name=GENERATOR></HEAD>  [文章来自:小林在线 http://www.xlin.cn \%xJk_5v`,dEFBI9qf]
<BODY>  [文章来自:小林在线 http://www.xlin.cn ,Kgh-:?ovOD@]
<DIV id=center>  [文章来自:小林在线 http://www.xlin.cn 9f5Fp&J zKX*e[Z6,c]
<DIV id=DHTMLBOOK><SPAN class=page onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img></SPAN>  [文章来自:小林在线 http://www.xlin.cn Ii-1 : Cnpyn8Un &8]
<SPAN class="page right" onmousedown="return false;" ondblclick=TPR(); onclick=TPR();><IMG class=img style="LEFT: -100%"></SPAN>  [文章来自:小林在线 http://www.xlin.cn $qiK4RK`5/0VXM/]
<SPAN class="page turn" onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img style="FILTER: alpha(); opacity: 1"></SPAN>  [文章来自:小林在线 http://www.xlin.cn (=:1rYZ Oep5K]
<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,#X&J-1PKL ;=c]]
<DIV id=TXTBOX></DIV></DIV></DIV>  [文章来自:小林在线 http://www.xlin.cn MSF6G" ?Y@Z8V1u?a]
<DIV id=imgsrc style="VISIBILITY: hidden">  [文章来自:小林在线 http://www.xlin.cn WI*pEed) f X?)@U_Y]
<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条。评论内容只代表网友观点,与本站立场无关!)