JS实现图片翻书效果 热
JS实现图片翻书效果
数据加载中...
<html xmlns="http://www.w3.org/1999/xhtml"> [文章来自:小林在线 http://www.xlin.cn nh\?
Z~6^LF&QG|48]<head> [文章来自:小林在线 http://www.xlin.cn !dn0E Ty&o -.�2F]
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> [文章来自:小林在线 http://www.xlin.cn cz:zuo|?2=) &t:J#]
<title>JS实现图片翻书效果</title> [文章来自:小林在线 http://www.xlin.cn pB/ 2k %d K=T?a]
<META http-equiv=imagetoolbar content=no> [文章来自:小林在线 http://www.xlin.cn %=fR'Ri uZ*65 n v!]
<STYLE type=text/css> [文章来自:小林在线 http://www.xlin.cn ==|=ygjOJxE.~7$^A]
#center { [文章来自:小林在线 http://www.xlin.cn fq~H;"u;%GyuC(F]
LEFT: 50%; POSITION: absolute; TOP: 50% [文章来自:小林在线 http://www.xlin.cn ]8bm ]r[gBAo[MD l+]
} [文章来自:小林在线 http://www.xlin.cn :#C JE;|EcUs/S w=}C]
#DHTMLBOOK { [文章来自:小林在线 http://www.xlin.cn 4P`.d :Yw (,e="I]
BACKGROUND: #000; LEFT: -210px; VISIBILITY: hidden; WIDTH: 420px; POSITION: relative; TOP: -160px; HEIGHT: 320px [文章来自:小林在线 http://www.xlin.cn bkQa �zr/� lN3 ]
} [文章来自:小林在线 http://www.xlin.cn fimp2 (Qj#AC ]
#TXTBOX { [文章来自:小林在线 http://www.xlin.cn ; ?nhX7H =q:Z_)}]
FONT-SIZE: 0.8em; WIDTH: 410px; COLOR: #aba193; FONT-FAMILY: verdana; POSITION: absolute; TOP: 320px; TEXT-ALIGN: center [文章来自:小林在线 http://www.xlin.cn Kz9Ph6Yo)!{|E 9Q=u]
} [文章来自:小林在线 http://www.xlin.cn (H 0?Vy(MeACLS-F Z]
.page { [文章来自:小林在线 http://www.xlin.cn -'|njW`Rpn?h7!6vU]
OVERFLOW: hidden; BORDER-LEFT: #000000 1px solid; WIDTH: 50%; CURSOR: pointer; POSITION: absolute; HEIGHT: 100% [文章来自:小林在线 http://www.xlin.cn %9[N6qC9("8`C=CK{M]
} [文章来自:小林在线 http://www.xlin.cn =A&-.B;Ig !zO@ l]
.right { [文章来自:小林在线 http://www.xlin.cn _;!5z *0a" = `c%G]
BORDER-RIGHT: #000000 1px solid; LEFT: 50% [文章来自:小林在线 http://www.xlin.cn H2H? | ?_ 41`e{]
} [文章来自:小林在线 http://www.xlin.cn 34Qr |oXJq=eZ_ S]
.turn { [文章来自:小林在线 http://www.xlin.cn jGw~:J']is"%f atO]
BACKGROUND: #000000 [文章来自:小林在线 http://www.xlin.cn Ux0F46Fk~iV=[T]
} [文章来自:小林在线 http://www.xlin.cn jo)V hc0_|c?+Jq]
.img { [文章来自:小林在线 http://www.xlin.cn EeOmR_!X. :=p:i|2K]
WIDTH: 200%; POSITION: absolute; HEIGHT: 100% [文章来自:小林在线 http://www.xlin.cn !6N86l{4R:uA^ ]|p:&]
} [文章来自:小林在线 http://www.xlin.cn XY(}.nT'7#cWI$u]
</STYLE> [文章来自:小林在线 http://www.xlin.cn h^M^N?r?7kYl0$bR+]
<SCRIPT type=text/javascript><!-- [文章来自:小林在线 http://www.xlin.cn Koj? r%`RINuy?Oo9]
document.onselectstart = function () { return false; } [文章来自:小林在线 http://www.xlin.cn 'r+iKJv1 {ctB3)`x]
var nI = 0; [文章来自:小林在线 http://www.xlin.cn SV+[9pIO0g,+fcXN)]
var kI = 0; [文章来自:小林在线 http://www.xlin.cn 7$.ZU]orQ A3W:P~]
var run = false; [文章来自:小林在线 http://www.xlin.cn 5 J%Uy &q{T="'1]
function setOpacity(obj,o) { [文章来自:小林在线 http://www.xlin.cn $&#'y5\pS&3HD j]
if (o<0) o=0; else if (o>100) o = 100; [文章来自:小林在线 http://www.xlin.cn Ti]o(?sGj:X, m]
if (obj.filters)obj.filters.alpha.opacity=o; else obj.style.opacity = o/100; [文章来自:小林在线 http://www.xlin.cn l"Rq~+[j5y8Pa]
} [文章来自:小林在线 http://www.xlin.cn R=sGv4f:=` :]
function TPR__(p) { [文章来自:小林在线 http://www.xlin.cn ='*J8osf}X NhD]
P1.style.left = 50-(2.5*p)+"%"; [文章来自:小林在线 http://www.xlin.cn ==.,LZE=A'p * L]
P1.style.width = (2.5*p)+"%"; [文章来自:小林在线 http://www.xlin.cn :[M,N$x6! =-#xlk]
setOpacity(P1i, .5*p*p); [文章来自:小林在线 http://www.xlin.cn 6wj&vu gl2xL23^q]
if (p == 20) run = false; [文章来自:小林在线 http://www.xlin.cn 5e|�m1_ in/6tk: Psl]
} [文章来自:小林在线 http://www.xlin.cn 656jxSf7;?MwHfrS]
function TPR_(p) { [文章来自:小林在线 http://www.xlin.cn v2()h[Q jJNlGoHcS]
P2.style.width = 50-(2.5*p)+"%"; [文章来自:小林在线 http://www.xlin.cn sn.3O- W=hkFG4]
setOpacity(P2i, 100-.5*(p*p)); [文章来自:小林在线 http://www.xlin.cn r JW(3ND#v,Mz?dh]
if (p == 20) { [文章来自:小林在线 http://www.xlin.cn P7?,13 bJ!EWBP~?1]
P2i.src = IMGSRC[kI].src; [文章来自:小林在线 http://www.xlin.cn (K^E*j4.Rkf !UH9!n]
setOpacity(P2i, 100); [文章来自:小林在线 http://www.xlin.cn NQv4F%fA/]F8p6T"Z]
P2.style.width = "50%"; [文章来自:小林在线 http://www.xlin.cn xBqzw.Wt ;Sv qj)_]
for(var i=1; i<=20; i++) setTimeout("TPR__("+i+")", i*32); [文章来自:小林在线 http://www.xlin.cn bFv+8%[(1DZ UY7Q�5]
} [文章来自:小林在线 http://www.xlin.cn +pk5[% 3p^ aDb,~3]
} [文章来自:小林在线 http://www.xlin.cn j:7LjM[j%t` RS0s7w]
function TPR() { [文章来自:小林在线 http://www.xlin.cn lg7WF&5Qs="]CE=]
if (!run) { [文章来自:小林在线 http://www.xlin.cn ]^awx NI1h x{iM]
run = true; [文章来自:小林在线 http://www.xlin.cn m m je;4Uh� %$s9]
P01i.src = IMGSRC[kI].src; [文章来自:小林在线 http://www.xlin.cn +z2Tj0ax }(f+$ U]
P1.style.width = 0; [文章来自:小林在线 http://www.xlin.cn ?)H%^\ zyX\J 7 cy]
kI++; [文章来自:小林在线 http://www.xlin.cn =7�w]btO$.P$4_4H]
if (kI>=nI) kI = 0; [文章来自:小林在线 http://www.xlin.cn /=#+1(%;A4Ek$OE6]
titLe(kI); [文章来自:小林在线 http://www.xlin.cn o|GKc+=tf%i2TM=sx]
P02i.src = IMGSRC[kI].src; [文章来自:小林在线 http://www.xlin.cn Mi-m~"$nU) ^0?w5]
P1i.src = IMGSRC[kI].src; [文章来自:小林在线 http://www.xlin.cn ?!=RKO2&RYf22[Y]
for (var i=1; i<=20; i++) setTimeout("TPR_("+i+")", i*32); [文章来自:小林在线 http://www.xlin.cn eSuUe;`Y+yK@5)P%]
} else setTimeout("TPR()", 100); [文章来自:小林在线 http://www.xlin.cn 2H"z ,*ds)g vA(k2`]
} [文章来自:小林在线 http://www.xlin.cn $mj [(e JL 73 fm]
function TPL__(p) { [文章来自:小林在线 http://www.xlin.cn )z } 1d U3`O:#bP?]
P2.style.width = (2.5*p)+"%"; [文章来自:小林在线 http://www.xlin.cn %ORMdB:y0 ZX(t]
setOpacity(P2i, .5*p*p); [文章来自:小林在线 http://www.xlin.cn B_ 'UV 2O?Pw~*]
if (p == 20) run = false; [文章来自:小林在线 http://www.xlin.cn :Jw=I�c#ne1gl]
} [文章来自:小林在线 http://www.xlin.cn )z 9Wy#lYpadu2l8x]
function TPL_(p) { [文章来自:小林在线 http://www.xlin.cn #Y) -LHD P D.O}z]
P1.style.left = (2.5*p)+"%"; [文章来自:小林在线 http://www.xlin.cn FI-;7f A \v6#L]
P1.style.width = 40+(10-2.5*p)+"%"; [文章来自:小林在线 http://www.xlin.cn Tbw/~'!UnD"&I=n]
setOpacity(P1i, 100-.5*(p*p)); [文章来自:小林在线 http://www.xlin.cn J`*? HIeJ!g/N]
if (p == 20) { [文章来自:小林在线 http://www.xlin.cn 3ut\Oo7 \17pL["hXu]
P1i.src = IMGSRC[kI].src; [文章来自:小林在线 http://www.xlin.cn 1=weq#"@ [*mD u]]
setOpacity(P1i, 100); [文章来自:小林在线 http://www.xlin.cn V sbkHc39; 5s=*x]
P1.style.left = 0; [文章来自:小林在线 http://www.xlin.cn = _"T :hXmw,]do]
P1.style.width = "50%"; [文章来自:小林在线 http://www.xlin.cn IEKY_Bs%44fB3F6?X]
for(var i=1; i<=20; i++) setTimeout("TPL__("+i+")", i*32); [文章来自:小林在线 http://www.xlin.cn L!,$CF70@#E+^Y Ql]
} [文章来自:小林在线 http://www.xlin.cn F30qhpFSw? |jL _1]
} [文章来自:小林在线 http://www.xlin.cn INt pz;R`JJp)*]
function TPL() { [文章来自:小林在线 http://www.xlin.cn { ha e..| 'u,+P]
if (!run) { [文章来自:小林在线 http://www.xlin.cn 4diT ii#=2?0P s]
run = true; [文章来自:小林在线 http://www.xlin.cn Go"? aHlf�x7KT`]
P02i.src = IMGSRC[kI].src; [文章来自:小林在线 http://www.xlin.cn ]3_g7 2d?!2dTMl]
P2.style.width = 0; [文章来自:小林在线 http://www.xlin.cn |*!q:.{J2Cs7,O]
kI--; [文章来自:小林在线 http://www.xlin.cn &SN~ vtbyL`wM1..eU]
if (kI < 0) kI = nI-1; [文章来自:小林在线 http://www.xlin.cn qV-tG,[GQ(=KtR"k]
titLe(kI); [文章来自:小林在线 http://www.xlin.cn Ee*hy| )o!]wF]
P01i.src = IMGSRC[kI].src; [文章来自:小林在线 http://www.xlin.cn "$pHjLh usp. RE0]
P2i.src = IMGSRC[kI].src; [文章来自:小林在线 http://www.xlin.cn V yBj a{ i=w &q]
for(var i=1; i<=20; i++) setTimeout("TPL_("+i+")", i*32); [文章来自:小林在线 http://www.xlin.cn / FZ3f,r4(9vCGc2x%X]
} else setTimeout("TPL()", 100); [文章来自:小林在线 http://www.xlin.cn m TwX?%?, *]8,[d]
} [文章来自:小林在线 http://www.xlin.cn ` n P_E8gUSY@;n? ]
function titLe(p) { [文章来自:小林在线 http://www.xlin.cn :y4UX+B6%e�VwdVVF]
document.getElementById("TXTBOX").innerHTML = IMGSRC[p].alt; [文章来自:小林在线 http://www.xlin.cn 3SXH4S5#7LkN]
} [文章来自:小林在线 http://www.xlin.cn c6 xwho=Lj|e -]
onload = function() { [文章来自:小林在线 http://www.xlin.cn KVRC ?nU]CpB["l$Un]
IMGSRC = document.getElementById("imgsrc").getElementsByTagName("img"); [文章来自:小林在线 http://www.xlin.cn uf7!qlo``my6u Qq]
DB = document.getElementById("DHTMLBOOK"); [文章来自:小林在线 http://www.xlin.cn 3w%g-g S8N9/c+9]
P01 = DB.getElementsByTagName("span")[0]; [文章来自:小林在线 http://www.xlin.cn R*!12'U jPs|}\-J]
P01i = P01.getElementsByTagName("img")[0]; [文章来自:小林在线 http://www.xlin.cn 1u5-pV6S`L'0]5f X]
P02 = DB.getElementsByTagName("span")[1]; [文章来自:小林在线 http://www.xlin.cn khaawnvIk2jPIZP)Gh)1]
P02i = P02.getElementsByTagName("img")[0]; [文章来自:小林在线 http://www.xlin.cn s\O.rLaQ(] (]
P1 = DB.getElementsByTagName("span")[2]; [文章来自:小林在线 http://www.xlin.cn &}% vXO D`x L,)]
P1i = P1.getElementsByTagName("img")[0]; [文章来自:小林在线 http://www.xlin.cn 2Q (6r%e3T!#}]
P2 = DB.getElementsByTagName("span")[3]; [文章来自:小林在线 http://www.xlin.cn ziX ?2j?]?y'lf]
P2i = P2.getElementsByTagName("img")[0]; [文章来自:小林在线 http://www.xlin.cn wB# fZ1 yx|bv!?G]
nI = IMGSRC.length; [文章来自:小林在线 http://www.xlin.cn o.d 9 ,;T?f!Qf e]
P1i.src = IMGSRC[kI].src; [文章来自:小林在线 http://www.xlin.cn J||q[2s2e`A[nP1n+Q]
P2i.src = IMGSRC[kI].src; [文章来自:小林在线 http://www.xlin.cn sZ+}2(=v\^ 5R8a ]
titLe(kI); [文章来自:小林在线 http://www.xlin.cn px%0U/|_MQ;h:*b]
DB.style.visibility = "visible"; [文章来自:小林在线 http://www.xlin.cn S*,bl_Wrj ?[m{$]
} [文章来自:小林在线 http://www.xlin.cn 7O0H%;; -=Kd�.]
//--> [文章来自:小林在线 http://www.xlin.cn s1h'?�D/B(N-^2f)E]
</SCRIPT> [文章来自:小林在线 http://www.xlin.cn &EN@ \mk1h0g N&]
<META content="MSHTML 6.00.6000.16809" name=GENERATOR></HEAD> [文章来自:小林在线 http://www.xlin.cn (}|5Hn.7/HMG\M=2]
<BODY> [文章来自:小林在线 http://www.xlin.cn F~k*P2=D q3Cu4]
<DIV id=center> [文章来自:小林在线 http://www.xlin.cn 6n"&sS;w~od# = L]
<DIV id=DHTMLBOOK><SPAN class=page onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img></SPAN> [文章来自:小林在线 http://www.xlin.cn GOabn5vKxTZoVaW**z]
<SPAN class="page right" onmousedown="return false;" ondblclick=TPR(); onclick=TPR();><IMG class=img style="LEFT: -100%"></SPAN> [文章来自:小林在线 http://www.xlin.cn rG/ze; VGg? ODgm(J]
<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?5:N ~dnzXz"]
<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 CJf+/Fu 3�)GaQ]
<DIV id=TXTBOX></DIV></DIV></DIV> [文章来自:小林在线 http://www.xlin.cn NIE@]P3 RtFR$_MdVe]
<DIV id=imgsrc style="VISIBILITY: hidden"> [文章来自:小林在线 http://www.xlin.cn ako4G_?fy?mdyafyR.]
<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>
- 下篇文章:
- 去除flash边框虚框的方法代码
- 引用地址:
- http://www.xlin.cn/linsw/Article/ShowArticle.asp?ArticleID=2249 (点击复制)
数据加载中...
网友评论（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）