Javascript应用--窗户里的图片展示效果（图片换成自己的即可运行）

最新推荐文章于 2022-04-11 18:50:03 发布

iteye_6481

最新推荐文章于 2022-04-11 18:50:03 发布

阅读量115

点赞数

文章标签： javascript ViewUI

Code:

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>4</title>
<metahttp-equiv="imagetoolbar"content="no">
<styletype="text/css">
body{
background:#222;
overflow:hidden;
left:0;
top:0;
width:100%;
height:100%;
margin:0;
padding:0;
}
#screenimg{
position:absolute;
visibility:hidden;
}
#screenspan{
position:absolute;
background:#fff;
cursor:pointer;
visibility:hidden;
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity:0.8;
}
</style>
<scripttype="text/javascript"><!--
varOz,Ov;
varobj=[];
varK=0;
varimg,scr,W,H;
varSP=40;/*speed*/
vardz=false;
/*htmlpositioning*/
position=function(obj,x,y,w,h)
{
with(obj.style){
left=Math.round(x)+"px";
top=Math.round(y)+"px";
width=Math.round(w)+"px";
height=Math.round(h)+"px";
}
}
/*createobjectinstances*/
functionCobj(parent,N,x,y,w,h)
{
this.zoomed=(parent?0:1);
obj[K]=this;
this.K=K++;
this.parent=parent;
this.children=[];
this.x=x;
this.y=y;
this.w=w;
this.h=h;
this.vx=0;
this.vy=0;
this.vw=0;
this.vh=0;
this.xi=0;
this.yi=0;
this.wi=0;
this.hi=0;
this.x1=0;
this.y1=0;
this.w1=0;
this.h1=0;
this.x0=0;
this.y0=0;
this.w0=0;
this.h0=0;
this.imgsrc=img[N];
/*createHTMLelements*/
this.img=document.createElement("img");
thisthis.img.src=this.imgsrc.src;
thisthis.img.obj=this;
scr.appendChild(this.img);
this.spa=document.createElement("span");
this.spa.style.cursor="pointer";
thisthis.spa.obj=this;
scr.appendChild(this.spa);
if(parent)parent.children.push(this);
/*Flickr*/
this.blink=function()
{
with(this)
{
position(spa,x0,y0,w0,h0);
spa.style.visibility="visible";
img.style.cursor="pointer";
setTimeout("obj["+K+"].spa.style.visibility='hidden'",128);
}
}
/*displayimage&children*/
this.display=function(zoomed)
{
with(this)
{
position(img,x0,y0,w0,h0);
img.style.visibility="visible";
if(parent&&!zoomed)
{
blink();
Ov=img;
}
}
}
/*initzoom*/
this.init_zoom=function(d)
{
with(this)
{
w1=imgsrc.width;
h1=imgsrc.height;
x1=(W-w1)/2;
y1=(H-h1)/2;
x0=(parent?x+parent.x1:(W-w1)/2);
y0=(parent?y+parent.y1:(H-h1)/2);
w0=(parent?w:w1);
h0=(parent?h:h1);
xi=d>0?x0:x1;
yi=d>0?y0:y1;
wi=d>0?w0:w1;
hi=d>0?h0:h1;
vx=d*(x1-x0)/SP;
vy=d*(y1-y0)/SP;
vw=d*(w1-w0)/SP;
vh=d*(h1-h0)/SP;
parent.vx=d*((x1-(x*w1/w0))-parent.x1)/SP;
parent.vy=d*((y1-(y*h1/h0))-parent.y1)/SP;
parent.vw=vw*(parent?(parent.w1/w):0);
parent.vh=vh*(parent?(parent.h1/h):0);
}
}
/*animatezoomin-out*/
this.zoom=function()
{
with(this)
{
xi+=vx;
yi+=vy;
wi+=vw;
hi+=vh;
parent.xi+=parent.vx;
parent.yi+=parent.vy;
parent.wi+=parent.vw;
parent.hi+=parent.vh;
position(img,xi,yi,wi,hi);
position(parent.img,parent.xi,parent.yi,parent.wi,parent.hi);
if((zoomed==0&&wi>w0-vw)||(zoomed==1&&wi<w1-vw))
{
setTimeout("obj["+K+"].zoom()",16);
}
else
{
dz=false;
for(variinOz.children)
{
Oz.children[i].init_zoom();
Oz.children[i].display(false,false);
}
}
}
}
/*mouseevents*/
this.img.onmouseover=function()
{
if(this!=Ov)with(this.obj)if(parent&&!zoomed&&!dz)blink();
Ov=this;
returnfalse;
}
this.img.onclick=function()
{
with(this.obj)
{
if(parent&&!dz&&imgsrc.complete)
{
if(zoomed==1)
{
/*zoomout*/
Oz=this.obj.parent;
zoomed=0;
init_zoom(-1);
for(variinchildren)children[i].img.style.visibility="hidden";
parent.zoomed=1;
dz=true;
zoom();
}
elseif(zoomed==0)
{
/*zoomin*/
Oz=this.obj;
img.style.cursor="crosshair";
zoomed=1;
init_zoom(1);
for(variinparent.children)
{
if(this.obj!=parent.children[i])
parent.children[i].img.style.visibility="hidden";
}
parent.zoomed=-1;
dz=true;
zoom();
}
}
}
returnfalse;
}
this.spa.onmousedown=function()
{
this.style.visibility="hidden";
this.obj.img.onclick();
returnfalse;
}
}
/*initialization*/
/*muststartafterthefirstimageisloaded*/
functionstarter()
{
scr=document.getElementById("screen");
img=document.getElementById("images").getElementsByTagName("img");
W=parseInt(scr.style.width);
H=parseInt(scr.style.height);
/*====tree-zoom====*/
//newCobj(parent,image,x,y,w,h)
O=newCobj(0,0,0,0,0,0);
O0=newCobj(O,1,127,98,181,134);
O1=newCobj(O0,2,158,150,85,155);
O11=newCobj(O1,4,136,98,80,196);
O111=newCobj(O11,5,20,154,70,57);
O1111=newCobj(O111,6,161,137,154,76);
O112=newCobj(O11,11,155,154,70,57);
O1121=newCobj(O112,12,273,116,49,72);
O2=newCobj(O0,3,281,150,90,154);
O21=newCobj(O2,7,35,295,133,82);
O211=newCobj(O21,15,316,183,20,36);
O22=newCobj(O2,8,179,295,127,79);
O221=newCobj(O22,13,132,84,54,102);
O2211=newCobj(O221,14,6,234,69,50);
O22111=newCobj(O2211,14,267,90,135,98);
O23=newCobj(O2,9,92,148,138,76);
O231=newCobj(O23,10,249,106,83,65);
O2311=newCobj(O231,0,120,87,57,59);
/*display*/
O.init_zoom(1);
O.display(true);
for(variinO.children)
{
O.children[i].init_zoom(1);
O.children[i].display(true);
}
}
//-->
</script>
</head>
<body>
<divstyle="position:absolute;left:50%;top:50%">
<divstyle="position:absolute;left:-220px;top:-170px;width:440px;height:340px;background:#000"></div>
<divid="screen"style="position:absolute;left:-200px;top:-150px;width:400px;height:300px;overflow:hidden">
</div>
</div>
<divid="images"style="position:absolute;left:-10000px;top:-10000px;">
<imgonload="setTimeout('starter();',500)"src="wi37.jpg">
<imgsrc="wi2.jpg">
<imgsrc="wi7.jpg">
<imgsrc="wi20.jpg">
<imgsrc="wi3.jpg">
<imgsrc="wi10.jpg">
<imgsrc="wi30.jpg">
<imgsrc="wi11.jpg">
<imgsrc="wi21.jpg">
<imgsrc="wi29.jpg">
<imgsrc="wi19.jpg">
<imgsrc="wi27.jpg">
<imgsrc="wi33.jpg">
<imgsrc="wi35.jpg">
<imgsrc="wi42.jpg">
<imgsrc="wi15.jpg">
</div>
</body>
</html>