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

JS实现图片翻书效果

数据加载中...
<html xmlns="http://www.w3.org/1999/xhtml">  [文章来自:小林在线 http://www.xlin.cn *%w )\Vd7&]\j]
<head>  [文章来自:小林在线 http://www.xlin.cn mZK?Qr`n"]'jOh]
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  [文章来自:小林在线 http://www.xlin.cn ] Yg9p7qmj}Fd]
<title>JS实现图片翻书效果</title>  [文章来自:小林在线 http://www.xlin.cn 1R pA229% N=+;]
<META http-equiv=imagetoolbar content=no>  [文章来自:小林在线 http://www.xlin.cn zF[0 UZB_^T-,llIS]
<STYLE type=text/css>  [文章来自:小林在线 http://www.xlin.cn 'I ~N="Av}k3[9(.]
#center {  [文章来自:小林在线 http://www.xlin.cn MWf*QR$eH)B^ ]
 LEFT: 50%; POSITION: absolute; TOP: 50%  [文章来自:小林在线 http://www.xlin.cn Nw{ :e6jz"~DU;]
[文章来自:小林在线 http://www.xlin.cn len3/(ZB ?.+Bl[+"}]
#DHTMLBOOK {  [文章来自:小林在线 http://www.xlin.cn  k&-+QzJ.YK3zL]]
 BACKGROUND: #000; LEFT: -210px; VISIBILITY: hidden; WIDTH: 420px; POSITION: relative; TOP: -160px; HEIGHT: 320px  [文章来自:小林在线 http://www.xlin.cn | &$1 `K(Y=z@p]
[文章来自:小林在线 http://www.xlin.cn 3=Fn(5*L`N@ 9z,m]
#TXTBOX {  [文章来自:小林在线 http://www.xlin.cn 3~\?v&.x+R_A@_IH]
 FONT-SIZE: 0.8em; WIDTH: 410px; COLOR: #aba193; FONT-FAMILY: verdana; POSITION: absolute; TOP: 320px; TEXT-ALIGN: center  [文章来自:小林在线 http://www.xlin.cn m %b?+9c@g'E.]']
[文章来自:小林在线 http://www.xlin.cn K.UI,`fCTAWY|0o|sL@]
.page {  [文章来自:小林在线 http://www.xlin.cn ?/6Ke?+j9^|e '&]
 OVERFLOW: hidden; BORDER-LEFT: #000000 1px solid; WIDTH: 50%; CURSOR: pointer; POSITION: absolute; HEIGHT: 100%  [文章来自:小林在线 http://www.xlin.cn Klq\MK{DO;.6Pj0=0]
[文章来自:小林在线 http://www.xlin.cn a*Wq=L(CCZ /[a%p]
.right {  [文章来自:小林在线 http://www.xlin.cn 2Zv!=QW1DI$\U"I]
 BORDER-RIGHT: #000000 1px solid; LEFT: 50%  [文章来自:小林在线 http://www.xlin.cn 7 &MXf'5Szy9u$gH]]
[文章来自:小林在线 http://www.xlin.cn OZ/ H%=3xvn"P$cj V]
.turn {  [文章来自:小林在线 http://www.xlin.cn y-&O7=ZDm {a~{]
 BACKGROUND: #000000  [文章来自:小林在线 http://www.xlin.cn s;qX[&gpDt|Y5=lDeBz]
[文章来自:小林在线 http://www.xlin.cn :9_s i'-Pcs=he*]
.img {  [文章来自:小林在线 http://www.xlin.cn ~5ggoq2/3'eqYw2v]
 WIDTH: 200%; POSITION: absolute; HEIGHT: 100%  [文章来自:小林在线 http://www.xlin.cn ".yxV J ^E..l]
[文章来自:小林在线 http://www.xlin.cn 'QjJ2m9T# 2BS2}b]
</STYLE>  [文章来自:小林在线 http://www.xlin.cn 46dtK& /$#:c~$$DA]
<SCRIPT type=text/javascript><!--  [文章来自:小林在线 http://www.xlin.cn 3C1'X\ GN?0 GaSq]
document.onselectstart = function () { return false; }  [文章来自:小林在线 http://www.xlin.cn Bn_*dE;(0|cfpuwP`]
var nI  = 0;  [文章来自:小林在线 http://www.xlin.cn =ygds+l#kCGM^:zIAD/]
var kI  = 0;  [文章来自:小林在线 http://www.xlin.cn fQzH]`J'=%L-Vo?{]
var run = false;  [文章来自:小林在线 http://www.xlin.cn k/;Gk$!h-  |+ pJTD]
function setOpacity(obj,o) {  [文章来自:小林在线 http://www.xlin.cn l43mpG?iW| b3|}]
 if (o<0) o=0; else if (o>100) o = 100;  [文章来自:小林在线 http://www.xlin.cn ?m"uym.H7+'b}BF~\)(0]
 if (obj.filters)obj.filters.alpha.opacity=o; else obj.style.opacity = o/100;  [文章来自:小林在线 http://www.xlin.cn fL}R6w#*hM{1IkxR;9L]
[文章来自:小林在线 http://www.xlin.cn BF'8t C9' I / f]
function TPR__(p) {  [文章来自:小林在线 http://www.xlin.cn D (96{9S? :o ]
 P1.style.left  = 50-(2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn Y[l6Q13%&vfG WR]
 P1.style.width = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn h e[R9wXx Sr? :zL]
 setOpacity(P1i, .5*p*p);  [文章来自:小林在线 http://www.xlin.cn u p2]Z-"1 T #8 ]
 if (p == 20) run = false;  [文章来自:小林在线 http://www.xlin.cn eQIdeb}+}m?eqgpm# k]
[文章来自:小林在线 http://www.xlin.cn [_k7_9NZ10AKYB$&]
function TPR_(p) {  [文章来自:小林在线 http://www.xlin.cn @fN) xAgP_r2]
 P2.style.width = 50-(2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn a~A`/_ ]A2?Re\ ]
 setOpacity(P2i, 100-.5*(p*p));  [文章来自:小林在线 http://www.xlin.cn 1Z_AwEFUh Lgh hS )]
 if (p == 20) {  [文章来自:小林在线 http://www.xlin.cn /4yeG*|T7BX":,]#X]
  P2i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn by*nxRu3\/` 'rP1tlXS]
  setOpacity(P2i, 100);  [文章来自:小林在线 http://www.xlin.cn #WaM=^l l7g[H QE]
  P2.style.width = "50%";  [文章来自:小林在线 http://www.xlin.cn /:}^vW-Zc9Id7ok]
  for(var i=1; i<=20; i++) setTimeout("TPR__("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn b30#eDTW 8t#?k:x8]
 }  [文章来自:小林在线 http://www.xlin.cn d^4 +P^OeCE&]
[文章来自:小林在线 http://www.xlin.cn r{2QKK qz8"nA9]
function TPR() {  [文章来自:小林在线 http://www.xlin.cn oA\Q8ix^ 5O_Se[ v]
 if (!run) {  [文章来自:小林在线 http://www.xlin.cn !XBLJ:%-Xe(q9o?4]
  run = true;  [文章来自:小林在线 http://www.xlin.cn z2NN,cA7\+TjsB]
  P01i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn r oL7J;g{/8Ta]
  P1.style.width = 0;  [文章来自:小林在线 http://www.xlin.cn oDSkenL=aLZ5.c:Kp0]
  kI++;  [文章来自:小林在线 http://www.xlin.cn 8=v.1 s&Eu{DoP{%[]
  if (kI>=nI) kI = 0;  [文章来自:小林在线 http://www.xlin.cn wemd9R2'GB4NeN8^]
  titLe(kI);  [文章来自:小林在线 http://www.xlin.cn [un}VK"Tj]+sR t]
  P02i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn Zlmhr,'4o7NhwE"]
  P1i.src  = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn wgF0Ir^E7n;[]
  for (var i=1; i<=20; i++) setTimeout("TPR_("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn QIg9`0!C2CsN.HO]
 } else setTimeout("TPR()", 100);  [文章来自:小林在线 http://www.xlin.cn ,6J,ix9!y 26DT]
[文章来自:小林在线 http://www.xlin.cn Ix[0\Z/91tSp]
function TPL__(p) {  [文章来自:小林在线 http://www.xlin.cn @O@Kea&ai7& ?(2]
 P2.style.width = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn !+^$+_ayX[%N ]
 setOpacity(P2i, .5*p*p);  [文章来自:小林在线 http://www.xlin.cn  )==&juLu'`Ah ;]
 if (p == 20) run = false;  [文章来自:小林在线 http://www.xlin.cn ^VdX\V(ivx Lrb]
[文章来自:小林在线 http://www.xlin.cn jR4y?2!$2uRd\?]
function TPL_(p) {  [文章来自:小林在线 http://www.xlin.cn Qc]0mfdG?SC{)p,]
 P1.style.left  = (2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn ^Eds=W=Y`m&]
 P1.style.width = 40+(10-2.5*p)+"%";  [文章来自:小林在线 http://www.xlin.cn `8 Ccv2]E|E[^]
 setOpacity(P1i, 100-.5*(p*p));  [文章来自:小林在线 http://www.xlin.cn ^?n&zW8#O@c]4O!!]
 if (p == 20) {  [文章来自:小林在线 http://www.xlin.cn zZ|PF%~h=[y=@H e]
  P1i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn C`~ycUUJNG{Lgmg]
  setOpacity(P1i, 100);  [文章来自:小林在线 http://www.xlin.cn 2pR~'!4 AT_j]
  P1.style.left  = 0;  [文章来自:小林在线 http://www.xlin.cn O-;r"(?s.0g*':W]
  P1.style.width = "50%";  [文章来自:小林在线 http://www.xlin.cn T_O@B*7?Q7lpsZ]
  for(var i=1; i<=20; i++) setTimeout("TPL__("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn ;Nh{V?,6*3~]
 }  [文章来自:小林在线 http://www.xlin.cn Yrg!q g3B *9cSN-]
[文章来自:小林在线 http://www.xlin.cn w_s eDv{ V= cv-]
function TPL() {  [文章来自:小林在线 http://www.xlin.cn 1"tFR#h'Z!LV.{n|3]
 if (!run) {  [文章来自:小林在线 http://www.xlin.cn ?NOi8SE\I4 8]
  run = true;  [文章来自:小林在线 http://www.xlin.cn zP:NdB|,{ b "Sn]
  P02i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn Tht1*)ZDVnX=2n]
  P2.style.width = 0;  [文章来自:小林在线 http://www.xlin.cn F^D$K cGPle-vg)]
  kI--;  [文章来自:小林在线 http://www.xlin.cn y4MMro+XIG0AB[[OB]
  if (kI < 0) kI = nI-1;  [文章来自:小林在线 http://www.xlin.cn X;:4sR{(4E?6[ 2o]
  titLe(kI);  [文章来自:小林在线 http://www.xlin.cn nc^PJ&y"I_w6]
  P01i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn gqGt}Km.Y& DV i]
  P2i.src  = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn 8~!pW?g"U.E?h23*]
  for(var i=1; i<=20; i++) setTimeout("TPL_("+i+")", i*32);  [文章来自:小林在线 http://www.xlin.cn YgA 8h'WyfVh!b7bz"]
 } else setTimeout("TPL()", 100);  [文章来自:小林在线 http://www.xlin.cn 0pP \\;d-=) Sw{l]
[文章来自:小林在线 http://www.xlin.cn [b9_lFJ==,* & Y1]
function titLe(p) {  [文章来自:小林在线 http://www.xlin.cn A@Q)_y hh*4`O"e".:]
 document.getElementById("TXTBOX").innerHTML = IMGSRC[p].alt;  [文章来自:小林在线 http://www.xlin.cn 'D|mU9r,,w+iVquB]
[文章来自:小林在线 http://www.xlin.cn 'gpOiPq l){#'e[]
onload = function() {  [文章来自:小林在线 http://www.xlin.cn @1KIQ%'gyhdhjU{]
 IMGSRC  = document.getElementById("imgsrc").getElementsByTagName("img");  [文章来自:小林在线 http://www.xlin.cn 1 bovl,u$o!E;I]
 DB      = document.getElementById("DHTMLBOOK");  [文章来自:小林在线 http://www.xlin.cn u,Z\m |"4 qQvp:]
 P01     = DB.getElementsByTagName("span")[0];  [文章来自:小林在线 http://www.xlin.cn ;~ 2Nb#E)8O._;E#S]
 P01i    = P01.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn Ar~(Y1\V2z1#^tvZ]
 P02     = DB.getElementsByTagName("span")[1];  [文章来自:小林在线 http://www.xlin.cn E5kmUNi:8el7HXR"m]
 P02i    = P02.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn xIJ!f2?l zD8y2Kp]
 P1      = DB.getElementsByTagName("span")[2];  [文章来自:小林在线 http://www.xlin.cn /LzZ47uX _M Hd]
 P1i     = P1.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn ` Yx9q+1|Z vw|KV]
 P2      = DB.getElementsByTagName("span")[3];  [文章来自:小林在线 http://www.xlin.cn Y%DG*yz PpPgQxk]
 P2i     = P2.getElementsByTagName("img")[0];  [文章来自:小林在线 http://www.xlin.cn pQe9gW-p3A)puOQ2=j]
 nI      = IMGSRC.length;  [文章来自:小林在线 http://www.xlin.cn (IWJe\fz_)UEUb|~=]
 P1i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn _%;g~8.b]#G.X4,X]
 P2i.src = IMGSRC[kI].src;  [文章来自:小林在线 http://www.xlin.cn kfqR,L~]=^ H]{`iC]
 titLe(kI);  [文章来自:小林在线 http://www.xlin.cn `6'M=p:b2]&)^zO]
 DB.style.visibility = "visible";  [文章来自:小林在线 http://www.xlin.cn p]?\!e&  =x{-\)]
[文章来自:小林在线 http://www.xlin.cn jo"~f.k1Ac 5k`T7%RC]
//-->  [文章来自:小林在线 http://www.xlin.cn $qy$1VVVTxn;=+]
</SCRIPT>  [文章来自:小林在线 http://www.xlin.cn n $KUv,47XgBv'e]
<META content="MSHTML 6.00.6000.16809" name=GENERATOR></HEAD>  [文章来自:小林在线 http://www.xlin.cn js'uBPxdow[(N]
<BODY>  [文章来自:小林在线 http://www.xlin.cn 5(h5 |C:or{o!9_?_]
<DIV id=center>  [文章来自:小林在线 http://www.xlin.cn (g{'y=fb+r69w?a"]
<DIV id=DHTMLBOOK><SPAN class=page onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img></SPAN>  [文章来自:小林在线 http://www.xlin.cn _[@ngHMXgJ7iBd]
<SPAN class="page right" onmousedown="return false;" ondblclick=TPR(); onclick=TPR();><IMG class=img style="LEFT: -100%"></SPAN>  [文章来自:小林在线 http://www.xlin.cn H_)Z ^Rp$Q a2&/]
<SPAN class="page turn" onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img style="FILTER: alpha(); opacity: 1"></SPAN>  [文章来自:小林在线 http://www.xlin.cn 20Tc;=Q$oYqOG b]
<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 I]aK4+t+r0Yjf_J?]
<DIV id=TXTBOX></DIV></DIV></DIV>  [文章来自:小林在线 http://www.xlin.cn mkw2 wF2_#-c7pa]
<DIV id=imgsrc style="VISIBILITY: hidden">  [文章来自:小林在线 http://www.xlin.cn vpVlinB56 WNe&ce]
<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条。评论内容只代表网友观点,与本站立场无关!)