zoukankan
html css js c++ java
图片轮显效果大全
综合各种效果的图片轮显
<
SCRIPT language
=
"
VBScript
"
>
Dim FileList,FileListArr,TxtList,TxtListArr
FileList
=
"
http://et.21cn.com/portray/images/if/01.jpg,http://et.21cn.com/portray/images/if/02.jpg,http://et.21cn.com/portray/images/if/03.jpg
"
TxtList
=
"
<a href=http://www.licns.com/ target=_blank>在这里加入你的连接1</a>,<a href=http://www.licns.com/ target=_blank>在这里加入你的连接2</a>,<a href=http://www.licns.com/ target=_blank>在这里加入你的连接3</a>
"
FileListArr
=
Split(FileList,
"
,
"
)
TxtListArr
=
Split(TxtList,
"
,
"
)
Dim CanPlay
CanPlay
=
CInt(Split(Split(navigator.appVersion,
"
;
"
)(
1
),
"
"
)(
2
))
>
5
Dim FilterStr
FilterStr
=
"
RevealTrans(duration=2,transition=23)
"
FilterStr
=
FilterStr
+
"
;BlendTrans(duration=2)
"
If CanPlay Then
FilterStr
=
FilterStr
+
"
;progid:DXImageTransform.Microsoft.Pixelate(,enabled=false,duration=2,maxSquare=25)
"
FilterStr
=
FilterStr
+
"
;progid:DXImageTransform.Microsoft.Fade(duration=2,overlap=0)
"
FilterStr
=
FilterStr
+
"
;progid:DXImageTransform.Microsoft.GradientWipe(duration=2,gradientSize=0.25,motion=forward )
"
FilterStr
=
FilterStr
+
"
;progid:DXImageTransform.Microsoft.Stretch(duration=2,stretchStyle=PUSH)
"
FilterStr
=
FilterStr
+
"
;progid:DXImageTransform.Microsoft.Wheel(duration=2,spokes=16)
"
FilterStr
=
FilterStr
+
"
;progid:DXImageTransform.Microsoft.RandomDissolve(duration=2)
"
FilterStr
=
FilterStr
+
"
;progid:DXImageTransform.Microsoft.Spiral(duration=2,gridSizeX=50,gridSizeY=50)
"
FilterStr
=
FilterStr
+
"
;progid:DXImageTransform.Microsoft.Slide(duration=2,bands=1,slideStyle=SWAP)
"
FilterStr
=
FilterStr
+
"
;progid:DXImageTransform.Microsoft.RadialWipe(duration=2,wipeStyle=CLOCK)
"
FilterStr
=
FilterStr
+
"
;progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=15,Duration=1)
"
FilterStr
=
FilterStr
+
"
;progid:DXImageTransform.Microsoft.Wipe(duration=3,gradientsize=0.25,motion=reverse)
"
Else
Msgbox
"
幻灯片播放具有多种动态图片切换效果,但此功能须要您的浏览器为IE5.5或以上版本号,否则您将仅仅能看到部分的切换效果。
"
,
64
End If
Dim FilterArr
FilterArr
=
Split(FilterStr,
"
;
"
)
Dim PlayImg_M
PlayImg_M
=
5
*
1000
'
切换时间(毫秒)
Dim I
I = 1
Sub ChangeImg
Do While FileListArr(I)=""
I = I + 1
If I>UBound(FileListArr) Then I = 0
Loop
Dim J
If I>UBound(FileListArr) Then I = 0
Randomize
J = Int(Rnd * (UBound(FilterArr)+1))
Img.style.filter = FilterArr(J)
Img.filters(0).Apply
Img.Src = FileListArr(I)
Img.filters(0).play
Txt.filters(0).Apply
Txt.innerHTML = TxtListArr(I)
Txt.filters(0).play()
I = I + 1
If I>UBound(FileListArr) Then I = 0
TempImg.Src = FileListArr(I)
SetTimeout "ChangeImg", PlayImg_M,"VBScript"
End Sub
</SCRIPT>
<TABLE WIDTH="100%" height="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0"><TR ID="NoScript"><TD Align="Center" Style="Color:White">对不起,图片浏览功能需脚本支持,但您的浏览器已经设置了禁止脚本执行。请您在浏览器设置中调整有关安全选项。</TD></TR><TR Style="Display:none" ID="CanRunScript"><TD HEIGHT="100%" Align="Center" vAlign="Center"><Img ID="Img" height="290" width="300" Border="0" ></TD></TR><TR Style="Display:none"><TD><Img ID="TempImg" Border="0"></TD></TR><TR><TD HEIGHT="100%" Align="Center" vAlign="Center"><div ID="Txt" style="PADDING-LEFT: 5px; Z-INDEX: 1; FILTER: progid:DXImageTransform.Microsoft.Fade(duration=1,overlap=0); POSITION:"><a href=http://www.licns.com/ target=_blank>在这里加入你的连接1</a></div></TD></TR></TABLE>
<Script Language="VBScript">
NoScript.Style.Display = "none"
CanRunScript.Style.Display = ""
Img.Src = FileListArr(0)
SetTimeout "ChangeImg", PlayImg_M,"VBScript"
</Script>
腾讯的用Flash调用图片轮显
<
script type
=
"
text/javascript
"
>
<!--
var
focus_width
=
255
var
focus_height
=
200
var
text_height
=
18
var
swf_height
=
focus_height
+
text_height
var
pics
=
'
http://img1.qq.com/sports/20060102/2958063.jpg|http://img1.qq.com/sports/20060101/2955633.jpg|http://img1.qq.com/sports/20051229/2936827.jpg|http://img1.qq.com/sports/20051227/2920636.jpg
'
var
links
=
'
http://sports.qq.com/a/20060101/000514.htm|http://sports.qq.com/a/20060101/000053.htm|http://sports.qq.com/a/20051229/000159.htm|http://sports.qq.com/a/20051227/000023.htm
'
var
texts
=
'
曲圣卿打进一球两次助攻 阿德莱德大胜|曼城客场被逼平 继海首发多次制造杀机|继海打满全场表现尚可 曼城不敌切尔西|曼城落败 孙继海险助攻
'
document.write(
'
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="
'
+
focus_width
+
'
" height="
'
+
swf_height
+
'
">
'
);
document.write(
'
<param name="allowScriptAccess" value="sameDomain"><param name="movie" value="http://sports.qq.com/flash/playswf.swf"><param name=wmode value=transparent><param name="quality" value="high">
'
);
document.write(
'
<param name="menu" value="false"><param name=wmode value="opaque">
'
);
document.write(
'
<param name="FlashVars" value="pics=
'
+
pics
+
'
&links=
'
+
links
+
'
&texts=
'
+
texts
+
'
&borderwidth=
'
+
focus_width
+
'
&borderheight=
'
+
focus_height
+
'
&textheight=
'
+
text_height
+
'
">
'
);
document.write(
'
<embed src="http://sports.qq.com/flash/playswf.swf" wmode="opaque" FlashVars="pics=
'
+
pics
+
'
&links=
'
+
links
+
'
&texts=
'
+
texts
+
'
&borderwidth=
'
+
focus_width
+
'
&borderheight=
'
+
focus_height
+
'
&textheight=
'
+
text_height
+
'
" menu="false" bgcolor="#DADADA" quality="high" width="
'
+
focus_width
+
'
" height="
'
+
swf_height
+
'
" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
'
); document.write(
'
</object>
'
);
//
-->
</
script
>
最主要的图片轮显
<
script language
=
JavaScript
>
var
imgUrl
=
new
Array();
var
imgLink
=
new
Array();
var
adNum
=
0
;
imgUrl[
1
]
=
"
http://image2.sina.com.cn/lx/nx/2006/0207/U1275P8T1D227041F918DT20060220173712.jpg
"
;
imgLink[
1
]
=
"
http://eladies.sina.com.cn/bbs/p/2006/0220/17268791.html
"
;
imgUrl[
2
]
=
"
http://image2.sina.com.cn/lx/nx/2006/0128/U1275P8T1D226214F918DT20060128200332.jpg
"
;
imgLink[
2
]
=
"
http://eladies.sina.com.cn/pic/special/198/554.html
"
;
imgUrl[
3
]
=
"
http://image2.sina.com.cn/lx/beauty1/2006/0218/U1275P8T1D229151F916DT20060220180508.jpg
"
;
imgLink[
3
]
=
"
http://blog.sina.com.cn/u/45f2dd64010001yg
"
;
imgUrl[
4
]
=
"
http://image2.sina.com.cn/lx/nx/2006/0210/U1275P8T1D227877F1086DT20060213161341.jpg
"
;
imgLink[
4
]
=
"
http://eladies.sina.com.cn/bbs/2006/0213/16048576.html
"
;
var
imgPre
=
new
Array();
for
(i
=
1
;i
<
4
;i
++
)
...
{
imgPre[i]
=
new
Image();
imgPre[i].src
=
imgUrl[i];
}
function
setTransition()
...
{
if
(document.all)
...
{
imgUrlrotator.filters.revealTrans.Transition
=
Math.floor(Math.random()
*
20
);
imgUrlrotator.filters.revealTrans.apply();
}
}
function
playTransition()
...
{
if
(document.all)
imgUrlrotator.filters.revealTrans.play()
}
function
nextAd()
...
{
if
(adNum
<
imgUrl.length
-
1
)adNum
++
;
else
adNum
=
1
;
setTransition();
document.images.imgUrlrotator.src
=
imgUrl[adNum];
playTransition();
theTimer
=
setTimeout(
"
nextAd()
"
,
6000
);
}
function
jump2url()
...
{
jumpUrl
=
imgLink[adNum];
jumpTarget
=
'
_blank
'
;
if
(jumpUrl
!=
''
)
...
{
if
(jumpTarget
!=
''
)window.open(jumpUrl,jumpTarget);
else
location.href
=
jumpUrl;
}
}
function
displayStatusMsg()
...
{
status
=
imgLink[adNum];
document.returnValue
=
true
;
}
</
script
>
<
a onMouseOver
=
"
displayStatusMsg();return document.returnValue
"
href
=
"
javascript:jump2url()
"
><
img
style
=
"
FILTER: revealTrans(duration=2,transition=20);border:1 solid gray;
"
height
=
242
src
=
"
javascript:nextAd()
"
width
=
191
name
=
imgUrlrotator
></
a
>
21cn写真频道图片切换代码
<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
>
<
html
>
<
head
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=gb2312"
>
<
title
>
无标题文档
</
title
>
<
META
http-equiv
=Content-Type
content
="text/html; charset=gb2312"
>
<
META
content
="MSHTML 6.00.2800.1476"
name
=GENERATOR
></
HEAD
>
<
BODY
leftMargin
=0
topMargin
=0
marginheight
="0"
marginwidth
="0"
>
<
TABLE
width
=330
height
="250"
border
=0
cellPadding
=0
cellSpacing
=0
bgcolor
="434343"
>
<
TBODY
>
<
TR
>
<
TD
width
=330
bgcolor
="434343"
>
<
CENTER
>
<
DIV
id
=oTransContainer
style
="FILTER: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,
wipeStyle=0, motion='forward'); WIDTH: 330px; HEIGHT: 250px"
><
a
href
="?SenFe=List&Id=466298"
target
=_blank
><
img
src
="http://et.21cn.com/portray/images/if/01.jpg"
width
=330
height
=250
border
=0
align
="absmiddle"
id
=oDIV1
></
a
>
<
a
href
="?SenFe=List&Id=399878"
target
=_blank
><
img
src
="http://et.21cn.com/portray/images/if/02.jpg"
width
=330
height
=250
border
=0
align
="absmiddle"
id
=oDIV2
style
="DISPLAY: none"
></
a
><
a
href
="?SenFe=List&Id=466294"
target
=_blank
><
img
src
="http://et.21cn.com/portray/images/if/03.jpg"
width
=330
height
=250
border
=0
align
="absmiddle"
id
=oDIV3
style
="DISPLAY: none"
></
a
><
a
href
="?SenFe=List&Id=466296"
target
=_blank
><
img
src
="http://et.21cn.com/portray/images/if/04.jpg"
width
=330
height
=250
border
=0
align
="absmiddle"
id
=oDIV4
style
="DISPLAY: none"
></
a
></
DIV
>
</
CENTER
>
<
SCRIPT
>
...
var
NowFrame
=
1
;
var
MaxFrame
=
4
;
var
bStart
=
0
;
function
fnToggle()
...
{
var
next
=
NowFrame
+
1
;
if
(next
==
MaxFrame
+
1
)
...
{
NowFrame
=
MaxFrame;
next
=
1
;
}
if
(bStart
==
0
)
...
{
bStart
=
1
;
setTimeout(
'
fnToggle()
'
,
6000
);
return
;
}
else
...
{
oTransContainer.filters[
0
].Apply();
document.images[
'
oDIV
'
+
next].style.display
=
""
;
document.images[
'
oDIV
'
+
NowFrame].style.display
=
"
none
"
;
oTransContainer.filters[
0
].Play(duration
=
2
);
if
(NowFrame
==
MaxFrame)
NowFrame
=
1
;
else
NowFrame
++
;
}
setTimeout(
'
fnToggle()
'
,
6000
);
}
fnToggle();
</
SCRIPT
>
</
TD
>
</
TR
>
</
TBODY
>
</
TABLE
>
</
body
>
</
html
>
加上了鼠标的特效的
<
script language
=
"
JavaScript
"
>
var
elady_step
=
3
;
//
1:small, 3:middle, 5:big
var
elady_speed
=
50
;
//
20:fast, 50:middle, 80:slow
var
e_tp
=
new
Array();
var
e_tplink
=
new
Array();
var
adNum_elady1
=
0
;
var
elady_stop_sh
=
0
;
var
elady_star_sh
=
1
;
function
elady1_moveImg()
...
{
if
((
!
document.all
&&!
document.getElementById)
||
(elady_stop_sh
==
0
))
return
;
if
(elady_star_sh
==
1
)
...
{
document.all.elady1_divimg.style.pixelTop
=
parseInt(document.all.elady1_divimg.style.pixelTop)
+
elady_step;}
else
if
(elady_star_sh
==
2
)
...
{
document.all.elady1_divimg.style.pixelLeft
=
parseInt(document.all.elady1_divimg.style.pixelLeft)
+
elady_step;}
else
if
(elady_star_sh
==
3
)
...
{
document.all.elady1_divimg.style.pixelTop
=
parseInt(document.all.elady1_divimg.style.pixelTop)
-
elady_step;}
else
...
{
document.all.elady1_divimg.style.pixelLeft
=
parseInt(document.all.elady1_divimg.style.pixelLeft)
-
elady_step;}
if
(elady_star_sh
<
4
) elady_star_sh
++
;
else
elady_star_sh
=
1
;
setTimeout(
"
elady1_moveImg()
"
,elady_speed);}
e_tplink[
0
]
=
"
http://www.licns.com
"
;
e_tp[
0
]
=
"
http://et.21cn.com/portray/images/if/01.jpg
"
;
e_tplink[
1
]
=
"
http://www.licns.com
"
;
e_tp[
1
]
=
"
http://et.21cn.com/portray/images/if/02.jpg
"
;
e_tplink[
2
]
=
"
http://www.licns.com
"
;
e_tp[
2
]
=
"
http://et.21cn.com/portray/images/if/03.jpg
"
;
e_tplink[
3
]
=
"
http://www.licns.com
"
;
e_tp[
3
]
=
"
http://et.21cn.com/portray/images/if/04.jpg
"
;
var
currentimage
=
new
Array();
for
(i
=
0
;i
<=
3
;i
++
)
...
{currentimage[i]
=
new
Image();
currentimage[i].src
=
e_tp[i];
}
function
elady1_set()
...
{
if
(document.all)
...
{ e_tprotator.filters.revealTrans.Transition
=
Math.floor(Math.random()
*
23
);
e_tprotator.filters.revealTrans.apply(); }
}
function
elady1_playCo()
...
{
if
(document.all) e_tprotator.filters.revealTrans.play()
}
function
elady1_nextAd()
...
{
if
(adNum_elady1
<
e_tp.length
-
1
)adNum_elady1
++
;
else
adNum_elady1
=
0
;
elady1_set();
document.images.e_tprotator.src
=
e_tp[adNum_elady1];
elady1_playCo();
theTimer
=
setTimeout(
"
elady1_nextAd()
"
,
4000
);}
function
elady1_linkurl()
...
{ jumpUrl
=
e_tplink[adNum_elady1];
jumpTarget
=
'
_blank
'
;
if
(jumpUrl
!=
''
)
...
{
if
(jumpTarget
!=
''
)window.open(jumpUrl,jumpTarget);
else
location.href
=
jumpUrl;
}
}
function
elady1_listMsg()
...
{ status
=
e_tplink[adNum_elady1];
document.returnValue
=
true
;}
document.write(
"
<div id='elady1_divimg' style='position:relative'>
"
);
document.write(
'
<a onMouseOver="elady1_listMsg();return document.returnValue" href="javascript:elady1_linkurl()" target="_self">
'
);
document.write(
'
<img style="FILTER: revealTrans(duration=2,transition=20)" src="javascript:elady1_nextAd()" border=0 name=e_tprotator onMouseover="elady_stop_sh=1;elady1_moveImg()" onMouseout="elady_stop_sh=0" ></a>
'
);
document.write(
"
</div>
"
);
</
script
>
图片和文字一起显示的
<
SCRIPT LANGUAGE
=
JavaScript
>
var
imgUrl
=
new
Array();
var
imgLink
=
new
Array();
var
imgtext
=
new
Array();
var
imgsumm
=
new
Array();
var
adNum
=
0
;
imgUrl[
1
]
=
"
http://et.21cn.com/portray/images/if/01.jpg
"
;
imgtext[
1
]
=
"
[组图]第16期 我型我塑
"
imgLink[
1
]
=
"
http://www.licns.com/
"
;
imgsumm[
1
]
=
"
摩羯座的猫猫是个安静的女孩,面对镜头总是略带羞涩。
"
;
imgUrl[
2
]
=
"
http://et.21cn.com/portray/images/if/02.jpg
"
;
imgtext[
2
]
=
"
实录:从“三陪女”到“二奶”
"
imgLink[
2
]
=
"
http://www.licns.com
"
;
imgsumm[
2
]
=
"
“二奶”的日子是快乐的,但后遗症却是最深的痛……
"
;
imgUrl[
3
]
=
"
http://et.21cn.com/portray/images/if/03.jpg
"
;
imgtext[
3
]
=
"
家饰:[组图]我爱抱心肝宝贝
"
imgLink[
3
]
=
"
http://www.licns.com/
"
;
imgsumm[
3
]
=
"
我们已经不再满足于中规中矩,四角形模样的抱枕...
"
;
var
imgPre
=
new
Array();
var
count
=
0
;
for
(i
=
1
;i
<=
3
;i
++
)
...
{
if
( (imgUrl
!=
""
)
&&
(imgLink
!=
""
) )
...
{
count
++
;
}
else
...
{
break
;
}
}
function
playTran()
...
{
if
(document.all)
imgInit.filters.revealTrans.play();
}
var
key
=
0
;
function
nextAd()
...
{
if
(adNum
<
count)adNum
++
;
else
adNum
=
1
;
if
( key
==
0
)
...
{
key
=
1
;
}
else
if
(document.all)
...
{
imgInit.filters.revealTrans.Transition
=
20
;
imgInit.filters.revealTrans.apply();
playTran();
}
document.images.imgInit.src
=
imgUrl[adNum];
focustext.innerHTML
=
imgtext[adNum];
focussumm.innerHTML
=
imgsumm[adNum];
theTimer
=
setTimeout(
"
nextAd()
"
,
7000
);
}
function
goUrl()
...
{
window.open(imgLink[adNum],
'
_blank
'
);
}
</
SCRIPT
>
<
A TARGET
=
_self HREF
=
"
javascript:goUrl()
"
><
IMG STYLE
=
"
FILTER: revealTrans(duration=1,transition=5);border-color:black;color:#000000
"
SRC
=
"
javascript:nextAd()
"
WIDTH
=
300
HEIGHT
=
250
BORDER
=
0
CLASS
=
img01 NAME
=
imgInit
></
A
>
<
A TARGET
=
_self HREF
=
"
javascript:goUrl()
"
><
FONT COLOR
=
#B41A7A CLASS
=
sfont
><
SPAN ID
=
focustext
></
SPAN
></
FONT
></
A
><
A TARGET
=
_self HREF
=
"
javascript:goUrl()
"
><
FONT COLOR
=
#
777777
CLASS
=
sfont
><
SPAN ID
=
focussumm
></
SPAN
></
FONT
></
A
>
相似于Flash制作的一个图片展示效果
<
html
>
<
head
>
<
title
>
相似于Flash制作的一个图片展示效果
</
title
>
<
meta
name
="Author"
content
="http://www.webjx.com"
>
<
meta
http-equiv
="imagetoolbar"
content
="no"
>
<
style
type
="text/css"
>
...
body
{...}
{
cursor
:
crosshair
;
margin
:
0
;
padding
:
0
;
position
:
absolute
;
overflow
:
hidden
;
background
:
#222
;
left
:
0
;
top
:
0
;
width
:
100%
;
height
:
100%
;
zIndex
:
-2
;
}
</
style
>
<
script
type
="text/javascript"
>
...
<!--
window.onerror
=
new
Function(
"
return true
"
);
screen.bufferDepth
=
16
;
document.onselectstart
=
function
()
...
{
return
false
; }
//
//////////////////////////
var
NX
=
3
;
var
NY
=
3
;
var
SP
=
20
;
var
DELAY
=
96
;
//
//////////////////////////
var
object
=
new
Array();
var
nI
=
0
;
var
run
=
false
;
var
xrun
=
0
;
var
dR
=
1
;
var
iW
=
0
;
var
iH
=
0
;
var
oH
=
0
;
var
oW
=
0
;
function
CObj(N,y,x)
...
{
this
.obj
=
document.createElement(
"
span
"
);
this
.obj.onclick
=
new
Function(
"
object[
"
+
N
+
"
].GE1()
"
);
this
.obj.onmousedown
=
new
Function(
"
return false;
"
);
this
.obj.style.cursor
=
"
pointer
"
;
this
.obj.style.position
=
"
absolute
"
;
this
.img
=
document.createElement(
"
img
"
);
this
.img.style.position
=
"
absolute
"
;
this
.img.src
=
IMGSRC[N
%
nI].src;
this
.obj.appendChild(
this
.img);
IMGBOX.appendChild(
this
.obj);
this
.object
=
new
Array();
this
.x
=
x;
this
.y
=
y;
this
.N
=
N;
this
.W
=
0
;
this
.H
=
0
;
this
.L
=
0
;
this
.T
=
0
;
function
CImg(Parent,y,x)
...
{
this
.Parent
=
Parent;
this
.obj
=
document.createElement(
"
span
"
);
this
.obj.style.position
=
"
absolute
"
;
this
.obj.style.overflow
=
"
hidden
"
;
this
.obj.style.cursor
=
"
pointer
"
;
this
.img
=
document.createElement(
"
img
"
);
this
.img.style.position
=
"
absolute
"
;
this
.img.src
=
IMGSRC[N
%
nI].src;
this
.obj.appendChild(
this
.img);
this
.Parent.obj.appendChild(
this
.obj);
this
.N
=
Parent.N;
this
.x
=
x;
this
.y
=
y;
this
.W
=
0
;
this
.H
=
0
;
this
.L
=
0
;
this
.T
=
0
;
this
.dx
=
0
;
this
.dy
=
0
;
this
.px
=
0
;
this
.py
=
0
;
this
.dw
=
0
;
this
.dh
=
0
;
this
.pw
=
0
;
this
.ph
=
0
;
this
.ipx
=
0
;
this
.ipy
=
0
;
this
.idx
=
0
;
this
.idy
=
0
;
this
.GE2
=
function
()
...
{
with
(
this
)
...
{
px
-=
dx
*
dR;
py
-=
dy
*
dR;
pw
+=
dw
*
dR;
ph
+=
dh
*
dR;
ipx
-=
idx
*
dR;
ipy
-=
idy
*
dR;
with
(obj.style)
...
{
left
=
Math.round(px);
top
=
Math.round(py);
width
=
Math.round(pw)
+
1
;
height
=
Math.round(ph)
+
1
;
if
(dR
==-
1
)
if
(pw
<=
W
+
1
)obj.style.visibility
=
"
hidden
"
;
}
with
(img.style)
...
{
left
=
Math.round(ipx
-
oW);
top
=
Math.round(ipy
-
oH);
}
if
(
++
xrun
>=
NX
*
NY
*
SP)
...
{
xrun
=
0
;
run
=
false
;
if
(dR
==-
1
)Parent.obj.style.zIndex
=
0
;
dR
=
-
dR;
}
}
}
this
.GE1
=
function
(N1,N2)
...
{
with
(
this
)
...
{
if
(dR
==
1
)
...
{
px
=
L;
py
=
T;
dx
=
((Parent.L
+
L)
-
(x
*
Parent.W))
/
SP;
dy
=
((Parent.T
+
T)
-
(y
*
Parent.H))
/
SP;
pw
=
W;
ph
=
H;
dw
=
(Parent.W
-
W)
/
SP;
dh
=
(Parent.H
-
H)
/
SP;
ipx
=
-
L;
ipy
=
-
T;
idx
=
((x
*
Parent.W)
-
L)
/
SP;
idy
=
((y
*
Parent.H)
-
T)
/
SP;
}
obj.style.visibility
=
"
visible
"
;
if
(img.height
>
document.body.offsetHeight)oH
=
(img.height
-
document.body.offsetHeight)
/
2
;
else
oH
=
0
;
if
(img.width
>
document.body.offsetWidth
/
2
)oW
=
(img.width
-
(document.body.offsetWidth
/
2
))
/
2
;
else
oW
=
0
;
for
(i
=
0
;i
<
SP;i
++
) setTimeout(
"
object[
"
+
N1
+
"
].object[
"
+
N2
+
"
].GE2()
"
,
16
*
i);
}
}
this
.DOOT
=
function
()
...
{
with
(
this
)
...
{
W
=
Parent.W
/
NX;
H
=
Parent.H
/
NY;
L
=
x
*
W;
T
=
y
*
H;
}
}
}
var
k
=
0
;
for
(
var
i
=
0
;i
<
NY;i
++
)
for
(
var
j
=
0
;j
<
NX;j
++
)
this
.object[k
++
]
=
new
CImg(
this
,i,j);
this
.GE1
=
function
()
...
{
with
(
this
)
...
{
if
(
!
run)
...
{
TXTBOX.innerHTML
=
"
<div style='margin:2%'>
"
+
TXTSRC[N
%
nI].innerHTML
+
"
</div>
"
;
run
=
true
;
obj.style.zIndex
=
1
;
for
(
var
i
=
0
;i
<
NX
*
NY;i
++
) setTimeout(
"
object[
"
+
N
+
"
].object[
"
+
i
+
"
].GE1(
"
+
N
+
"
,
"
+
i
+
"
)
"
,i
*
DELAY);
}
}
}
this
.DOOT
=
function
()
...
{
with
(
this
)
...
{
if
(img.width
<
iW)iW
=
img.width;
if
(img.height
<
iH)iH
=
img.height;
with
(obj.style)
...
{
W
=
width
=
iW
/
NX;
H
=
height
=
iH
/
NY;
L
=
left
=
x
*
W;
T
=
top
=
y
*
H;
}
with
(img.style)
...
{
width
=
W;
height
=
H;
}
for
(
var
i
in
object) object[i].DOOT();
}
}
}
onload
=
function
()
...
{
IMGSRC
=
document.getElementById(
"
imgsrc
"
).getElementsByTagName(
"
img
"
);
TXTSRC
=
document.getElementById(
"
txtsrc
"
).getElementsByTagName(
"
div
"
);
IMGBOX
=
document.getElementById(
"
imgbox
"
);
TXTBOX
=
document.getElementById(
"
txtbox
"
);
CENTER
=
document.getElementById(
"
center
"
);
iH
=
document.body.offsetHeight;
iW
=
document.body.offsetWidth
/
2
;
nI
=
IMGSRC.length;
var
k
=
0
;
for
(
var
i
=
0
;i
<
NY;i
++
)
...
{
for
(
var
j
=
0
;j
<
NX;j
++
)
...
{
object[k]
=
new
CObj(k,i,j);
object[k
++
].DOOT();
}
}
IMGBOX.style.width
=
iW;
IMGBOX.style.height
=
iH;
TXTBOX.style.width
=
iW;
TXTBOX.style.height
=
iH;
TXTBOX.style.left
=
iW;
TXTBOX.style.visibility
=
"
visible
"
;
CENTER.style.left
=
-
iW;
CENTER.style.top
=
-
iH
/
2
;
}
//
-->
</
script
>
</
head
>
<
body
>
<
div
style
="position:absolute;left:50%;top:50%;"
><
div
id
="center"
style
="position:absolute;"
>
<
div
id
="imgbox"
style
="position:absolute;left:0;top:0;overflow:hidden;"
></
div
>
<
div
id
="txtbox"
style
="position:absolute;visibility:hidden;overflow:hidden;background:#333;color:#FFF;font-family:verdana;font-size:0.8em;"
>
<
div
style
="margin:2%"
>
<
h2
>
IMGBOX
</
h2
>
Click the thumbnails on the left for a larger image. The description connected to the clicked image is displayed here.
<
br
>
<
br
>
Note: for performance reasons, images are not resized and must be all of the same size.
</
div
>
</
div
>
</
div
></
div
>
<
div
id
="imgsrc"
style
="visibility:hidden"
>
<
img
src
="http://www.webjx.com/upfiles/20050411/BS9097.jpg"
>
<
img
src
="http://www.webjx.com/upfiles/20050411/BS9092.jpg"
>
<
img
src
="http://www.webjx.com/upfiles/20050411/BS9084.jpg"
>
<
img
src
="http://www.webjx.com/upfiles/20050411/BS9064.jpg"
>
<
img
src
="http://www.webjx.com/upfiles/20050411/BS9050.jpg"
>
<
img
src
="http://www.webjx.com/upfiles/20050411/BS9070.jpg"
>
<
img
src
="http://www.webjx.com/upfiles/20050411/BS9079.jpg"
>
<
img
src
="http://www.webjx.com/upfiles/20050411/BS9068.jpg"
>
<
img
src
="http://www.webjx.com/upfiles/20050411/BS9039.jpg"
>
</
div
>
<
div
id
="txtsrc"
style
="visibility:hidden"
>
<
div
>
<
h2
>
the river
</
h2
><
br
>
Awaken from my nap by the river
</
div
>
<
div
>
<
h2
>
transparency
</
h2
><
br
>
Its transparency was hypnotizing.
</
div
>
<
div
>
<
h2
>
cold
</
h2
><
br
>
Currents of cold water played with light.
</
div
>
<
div
>
<
h2
>
sank in
</
h2
><
br
>
I threw a few nuts into the river. They floated for a while, then sank in.
</
div
>
<
div
>
<
h2
>
masked
</
h2
><
br
>
A wide stepping stone masked the water's depth.
</
div
>
<
div
>
<
h2
>
a glimpse
</
h2
><
br
>
Later on, I had a glimpse of the river's bed.
</
div
>
<
div
>
<
h2
>
forgotten
</
h2
><
br
>
The wheelchair made a noise. Again, I had forgotten about my legs.
</
div
>
<
div
>
<
h2
>
floated
</
h2
><
br
>
Still, I floated in oblivion of things too real.
</
div
>
<
div
>
<
h2
>
for me
</
h2
><
br
>
I stared fixedly at the water's open arms. The stream was singing for me.
</
div
>
</
div
>
<!--
crossbrowser images_loading_bar - Gerard Ferrandez - www.dhteumeuleu.com - Feb 2005
-->
<
span
id
=LB0
style
="position:absolute;left:50%;top:50%;"
><
span
style
="position:absolute;font-family:arial;font-size:10px;color:#FFFFFF;left:-50;top:-18"
>
Loading...
</
span
>
<
span
style
="position:absolute;left:-50;top:-5;font-size:1px;100;height:10px;background:#333"
><
span
id
=LB1
style
="position:absolute;left:0;top:0;font-size:1px;0;height:10px;background:#FFFFFF"
></
span
></
span
></
span
>
<
script
>
...
m00
=
document.getElementById(
"
imgsrc
"
).getElementsByTagName(
"
img
"
);m01
=
m00.length;
function
images_loading_bar()
...
{m02
=
0
;
for
(i
=
0
;i
<
m01;i
++
)m02
+=
(m00[i].complete)
?
1
:
0
;document.getElementById(
"
LB1
"
).style.width
=
Math.round(m02
/
m01
*
100
);
if
(m02
==
m01)setTimeout(
"
document.getElementById('LB0').style.display='none'
"
,
128
);
else
setTimeout(
"
images_loading_bar()
"
,
64
);}
;images_loading_bar();
</
script
>
<!--
end of images_loading_bar code
-->
</
body
>
</
html
>
查看全文
相关阅读:
全排列问题(递归&非递归&STL函数)
基于python的机器学习开发环境安装(最简单的初步开发环境)
X分钟速成Python
X分钟速成Python3
Python6
Python5
Error[Pe020]: identifier "FILE" is undefined
串口 ------ 硬件流控
STM32F103 ------ 时钟配置
git
原文地址:https://www.cnblogs.com/zfyouxi/p/3877507.html
最新文章
.psl脚本介绍
website for .Net Core
Docker for Windows
NLog——ElasticSearch——Kibana
ElasticSearch——日志工具
Kibana——日志可视化工具
.Net Core之Swagger
Python示例
Python学习
ETCD网络层实现(待完成)
热门文章
ETCD原理
ETCD应用
Kubernetes之Controllers三
优秀的程序猿
如何写一个好的接口
如何学习一门新技术
Docker与.Net项目类型
Python
Python
Machine Learning 学习笔记1
Copyright © 2011-2022 走看看