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

JS实现图片翻书效果

数据加载中...
<html xmlns="http://www.w3.org/1999/xhtml">  [文章来自:小林在线 http://www.xlin.cn j$ S\OE$Iq,yMyy]
<head>  [文章来自:小林在线 http://www.xlin.cn ~~PDMHQX~st JxLk]
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  [文章来自:小林在线 http://www.xlin.cn pdG8a1mM)}C?_obY]
<title>JS实现图片翻书效果</title>  [文章来自:小林在线 http://www.xlin.cn `"he;wCyBfb-jROq]
<META http-equiv=imagetoolbar content=no>  [文章来自:小林在线 http://www.xlin.cn v|D5}n|Ad\GHY]Fd]
<STYLE type=text/css>  [文章来自:小林在线 http://www.xlin.cn W0 r|}!@bwa[Ory]
#center {  [文章来自:小林在线 http://www.xlin.cn lsWz @W ^-{Eh;]
 LEFT: 50%; POSITION: absolute; TOP: 50%  [文章来自:小林在线 http://www.xlin.cn dx&BTQr _`[Fk_//7?]
[文章来自:小林在线 http://www.xlin.cn &q2]Jrul%t+lr ]
#DHTMLBOOK {  [文章来自:小林在线 http://www.xlin.cn ;OKeG ]]m!iTj`1b2]
 BACKGROUND: #000; LEFT: -210px; VISIBILITY: hidden; WIDTH: 420px; POSITION: relative; TOP: -160px; HEIGHT: 320px  [文章来自:小林在线 http://www.xlin.cn +T~=P4"/_DHZ$=.a]
[文章来自:小林在线 http://www.xlin.cn iqWNep'YLs6f9C]
#TXTBOX {  [文章来自:小林在线 http://www.xlin.cn q+\cj\#G;L.Bp]]
 FONT-SIZE: 0.8em; WIDTH: 410px; COLOR: #aba193; FONT-FAMILY: verdana; POSITION: absolute; TOP: 320px; TEXT-ALIGN: center  [文章来自:小林在线 http://www.xlin.cn +o0:HWWBXJ36NE]
[文章来自:小林在线 http://www.xlin.cn @R,%}+6P3&oJLf0&{]
.page {  [文章来自:小林在线 http://www.xlin.cn .w(= k *mmg/k;9Y]
 OVERFLOW: hidden; BORDER-LEFT: #000000 1px solid; WIDTH: 50%; CURSOR: pointer; POSITION: absolute; HEIGHT: 100%  [文章来自:小林在线 http://www.xlin.cn t* a,b&'s!:y5S]
[文章来自:小林在线 http://www.xlin.cn Yw;:Nzz@?yzfn&czbZ]
.right {  [文章来自:小林在线 http://www.xlin.cn 8BQ[twyhM XvDuJm`V]
 BORDER-RIGHT: #000000 1px solid; LEFT: 50%  [文章来自:小林在线 http://www.xlin.cn ~c;Z\,UJr^?&DK u]
[文章来自:小林在线 http://www.xlin.cn L7|UK~]3O7kFAO`]
.turn {  [文章来自:小林在线 http://www.xlin.cn =0wqq"u oWOLChS#7]
 BACKGROUND: #000000  [文章来自:小林在线 http://www.xlin.cn @LQyd`pgtz6S9 b]
[文章来自:小林在线 http://www.xlin.cn &KeD43$zIv^_2-]
.img {  [文章来自:小林在线 http://www.xlin.cn 7$UR2*00o iG8bHbCN]
 WIDTH: 200%; POSITION: absolute; HEIGHT: 100%  [文章来自:小林在线 http://www.xlin.cn }tV1 M\;{Q*]
[文章来自:小林在线 http://www.xlin.cn $ ^@SI LhW !b},]
</STYLE>  [文章来自:小林在线 http://www.xlin.cn y9^PQ]EC 8JZY'V9]
<SCRIPT type=text/javascript><!--  [文章来自:小林在线 http://www.xlin.cn '%WJnERmo(lZ" -o]
document.onselectstart = function () { return false; }  [文章来自:小林在线 http://www.xlin.cn 9ZQ8UI:v( M?rQ]
var nI  = 0;  [文章来自:小林在线 http://www.xlin.cn Q4G GJs=IR1f(AS!c]
var kI  = 0;  [文章来自:小林在线 http://www.xlin.cn nU|=?sK$O\]{4gn]
var run = false;  [文章来自:小林在线 http://www.xlin.cn S2sIdQcb,5!yNp]
function setOpacity(obj,o) {  [文章来自:小林在线 http://www.xlin.cn Kqmh (Wi7U;?0!]
 if (o<0) o=0; else if (o>100) o = 100;  [文章来自:小林在线 http://www.xlin.cn R)'d{MlF*eWMd V]
 if (obj.filters)obj.filters.alpha.opacity=o; else obj.style.opacity = o/100;  [文章来自:小林在线 http://www.xlin.cn T1F1~}KKC 9ZP[ D]
[文章来自:小林在线 http://www.xlin.cn nx!+t~mQ I=NL Hp]
function TPR__(p) {  [文章来自:小林在线 http://www.xlin.cn /CjmG "IJB_ )=@5]
 P1.style.left  = 50-(2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn V`0 ktNP/= GMz2er]
 P1.style.width = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn *]L# }=#2^M@]xMqP]
 setOpacity(P1i, .5*p*p);  [文章来自:小林在线 http://www.xlin.cn ,'@# ;-(?a"0(1+[-]
 if (p == 20) run = false;  [文章来自:小林在线 http://www.xlin.cn g$@'2 w1%r')K']
[文章来自:小林在线 http://www.xlin.cn 'v9e?o_eM=0g~XIuH]
function TPR_(p) {  [文章来自:小林在线 http://www.xlin.cn |tf8!EUhAs=+=di-8I]
 P2.style.width = 50-(2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn [H5u\r zJ{&LlQh]
 setOpacity(P2i, 100-.5*(p*p));  [文章来自:小林在线 http://www.xlin.cn a%r{jxTc HMQ.~]
 if (p == 20) {  [文章来自:小林在线 http://www.xlin.cn 3$=ehb% |;[ ^]
  P2i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn ; _V9pH{YW3Q7?]
  setOpacity(P2i, 100);  [文章来自:小林在线 http://www.xlin.cn 'Z k:+fcWV||!ZlU2ny]
  P2.style.width = "50%";  [文章来自:小林在线 http://www.xlin.cn t"TE:wU\8k6m:reV`]
  for(var i=1; i<=20; i++) setTimeout("TPR__("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn DNwk|]w o?Fd i{v]
 }  [文章来自:小林在线 http://www.xlin.cn KtvE;Kw6+Q 24_ba~]
[文章来自:小林在线 http://www.xlin.cn ,_TYMu8y; *&]
function TPR() {  [文章来自:小林在线 http://www.xlin.cn E0/, O8vID-99e]
 if (!run) {  [文章来自:小林在线 http://www.xlin.cn LRCXA];d Jw/ ]
  run = true;  [文章来自:小林在线 http://www.xlin.cn Imm }RP}5$8-]F]
  P01i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn 'hdbxqfcaHl I]
  P1.style.width = 0;  [文章来自:小林在线 http://www.xlin.cn kw;0*i|Fwt& |=d~]
  kI++;  [文章来自:小林在线 http://www.xlin.cn RgE!2X9~lBEkU]
  if (kI>=nI) kI = 0;  [文章来自:小林在线 http://www.xlin.cn *gI  :E/ ~ I]
  titLe(kI);  [文章来自:小林在线 http://www.xlin.cn t{ez9lx#OvY" A*:AC]
  P02i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn Pc d}eH*a=_.= |']
  P1i.src  = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn ?,P~cjADo&Ugv}]
  for (var i=1; i<=20; i++) setTimeout("TPR_("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn F x(7#MTfv6C]
 } else setTimeout("TPR()", 100);  [文章来自:小林在线 http://www.xlin.cn By)r,SLK5`$n,3]
[文章来自:小林在线 http://www.xlin.cn tNJq/={WJ"2u)t6]
function TPL__(p) {  [文章来自:小林在线 http://www.xlin.cn r4#nQ'\_M\ \KXY]
 P2.style.width = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn ;byDDW?Ts)BX-A?4E]
 setOpacity(P2i, .5*p*p);  [文章来自:小林在线 http://www.xlin.cn  5~UN`\=@;UP R]
 if (p == 20) run = false;  [文章来自:小林在线 http://www.xlin.cn (S^N& ?xeL!BV*n|\6p]
[文章来自:小林在线 http://www.xlin.cn C@{nZe_BjXT( 1,P]
function TPL_(p) {  [文章来自:小林在线 http://www.xlin.cn ~bbLH@G;@'G:` omf=1]
 P1.style.left  = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn G!V%CDFnAZr=~V j+FoD]
 P1.style.width = 40+(10-2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn /$6gyJ^F}EO4]FJ=]
 setOpacity(P1i, 100-.5*(p*p));  [文章来自:小林在线 http://www.xlin.cn G~g?Z1*phL.u3aHt]
 if (p == 20) {  [文章来自:小林在线 http://www.xlin.cn #ylgP~MJ7b]Zf?]
  P1i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn zs8{ RsbZ~cXF]
  setOpacity(P1i, 100);  [文章来自:小林在线 http://www.xlin.cn oY%GH)vXARj:8R@Y ]
  P1.style.left  = 0;  [文章来自:小林在线 http://www.xlin.cn j(5lb F/N' I*6t]
  P1.style.width = "50%";  [文章来自:小林在线 http://www.xlin.cn S_dR+k"$ N_= }kC]
  for(var i=1; i<=20; i++) setTimeout("TPL__("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn / 0M-]ug?/xru2fd?V]
 }  [文章来自:小林在线 http://www.xlin.cn lq ~Tqw%U(B%%~[*C]
[文章来自:小林在线 http://www.xlin.cn 7W(gpmJ}"sSr.*?]
function TPL() {  [文章来自:小林在线 http://www.xlin.cn ?N!M:;7C?"JUCo$6]
 if (!run) {  [文章来自:小林在线 http://www.xlin.cn  c:N_{43_s&E]
  run = true;  [文章来自:小林在线 http://www.xlin.cn J9FF*I'_% &J'l]
  P02i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn \K^?#Y*I0,cUu XZ^]
  P2.style.width = 0;  [文章来自:小林在线 http://www.xlin.cn O7#G{~\ A B]WCIP/]
  kI--;  [文章来自:小林在线 http://www.xlin.cn ,VRdr$f.`S?N|X)=]
  if (kI < 0) kI = nI-1;  [文章来自:小林在线 http://www.xlin.cn N4Ax!\Dj;iL/`Y]
  titLe(kI);  [文章来自:小林在线 http://www.xlin.cn %Xy iK LXCrHrk9Y1z@E]
  P01i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn I|pR6zufD $![0b]
  P2i.src  = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn ?*):R?"MYKN6mM.]
  for(var i=1; i<=20; i++) setTimeout("TPL_("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn ]Xif4w?m&&ARR-$af]
 } else setTimeout("TPL()", 100);  [文章来自:小林在线 http://www.xlin.cn }yZ j .=ycHC)kb]
[文章来自:小林在线 http://www.xlin.cn jRRbZu5u DC{nuv sU']
function titLe(p) {  [文章来自:小林在线 http://www.xlin.cn "UewWk'CYSKecxUWy1i]
 document.getElementById("TXTBOX").innerHTML = IMGSRC[p].alt;  [文章来自:小林在线 http://www.xlin.cn zh9J "{R=eeki)]
[文章来自:小林在线 http://www.xlin.cn uOYEol@_)k{!%Pb]
onload = function() {  [文章来自:小林在线 http://www.xlin.cn K+V,wOF=:294 ?(@}Ot]
 IMGSRC  = document.getElementById("imgsrc").getElementsByTagName("img");  [文章来自:小林在线 http://www.xlin.cn F9-!_ 43W=q"5@)Hu ]
 DB      = document.getElementById("DHTMLBOOK");  [文章来自:小林在线 http://www.xlin.cn K7G&r *( Xn)W"Y)]
 P01     = DB.getElementsByTagName("span")[0];  [文章来自:小林在线 http://www.xlin.cn 6 2a[oe?s-=0e*geC;U]
 P01i    = P01.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn ]7hP5]CSPl[&=Hy`]
 P02     = DB.getElementsByTagName("span")[1];  [文章来自:小林在线 http://www.xlin.cn v\H_`1@Hm}&.ZDZQ]
 P02i    = P02.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn O,&XTDo"BthyO /n]
 P1      = DB.getElementsByTagName("span")[2];  [文章来自:小林在线 http://www.xlin.cn ] [Qbcf;VB-arh]
 P1i     = P1.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn vxez q8M~_o F!]
 P2      = DB.getElementsByTagName("span")[3];  [文章来自:小林在线 http://www.xlin.cn NRX5O) x!nwewA]
 P2i     = P2.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn 9NanI*FoXk]=PyuX}D]
 nI      = IMGSRC.length;  [文章来自:小林在线 http://www.xlin.cn e^:D?n&B8.S="5hJ]
 P1i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn =!0v]ZCHZ40uw]
 P2i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn @8FKa=v$zh )i]
 titLe(kI);  [文章来自:小林在线 http://www.xlin.cn @rOcJ^muISg[_]
 DB.style.visibility = "visible";  [文章来自:小林在线 http://www.xlin.cn M?(hG&Meqd#JCDU]+J]
[文章来自:小林在线 http://www.xlin.cn +EQZb"s%MWn3TW]
//-->  [文章来自:小林在线 http://www.xlin.cn IBy(wophg-,v#;N4W]
</SCRIPT>  [文章来自:小林在线 http://www.xlin.cn LN??X?-L EHc=c0jD]
<META content="MSHTML 6.00.6000.16809" name=GENERATOR></HEAD>  [文章来自:小林在线 http://www.xlin.cn q6!fZ+H{~-zGFmU]
<BODY>  [文章来自:小林在线 http://www.xlin.cn v96B0F%\^a e]
<DIV id=center>  [文章来自:小林在线 http://www.xlin.cn ES7 M{a4M5w@K*e'"$]
<DIV id=DHTMLBOOK><SPAN class=page onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img></SPAN>  [文章来自:小林在线 http://www.xlin.cn !5:6%!IJ3O+^jn#]
<SPAN class="page right" onmousedown="return false;" ondblclick=TPR(); onclick=TPR();><IMG class=img style="LEFT: -100%"></SPAN>  [文章来自:小林在线 http://www.xlin.cn \3"PNUpkj2ATqRb~|]
<SPAN class="page turn" onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img style="FILTER: alpha(); opacity: 1"></SPAN>  [文章来自:小林在线 http://www.xlin.cn &A_=Zjw4 12s#DH]
<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 \]1dh7Qh '!?b:8"S/]
<DIV id=TXTBOX></DIV></DIV></DIV>  [文章来自:小林在线 http://www.xlin.cn %a^(`:.F6tklK=}(]
<DIV id=imgsrc style="VISIBILITY: hidden">  [文章来自:小林在线 http://www.xlin.cn =m.+G3FA ye.m _43Ok]
<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条。评论内容只代表网友观点,与本站立场无关!)