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

最新推荐文章于 2024-09-12 14:51:52 发布

wind瑞

最新推荐文章于 2024-09-12 14:51:52 发布

阅读量989

点赞数

分类专栏： javascript 文章标签： javascript function initialization filter image

本文链接：https://blog.csdn.net/windrui/article/details/6516509

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文展示了一个使用HTML和JavaScript创建的动态图像缩放效果示例。通过细致地定义HTML结构和利用JavaScript来控制图像的缩放和平移，实现了一种类似树状缩放浏览的功能。该示例涉及DOM操作、事件监听以及图像加载处理等关键技术。

摘要由CSDN通过智能技术生成

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>4</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
body {
background: #222;
overflow: hidden;
left: 0;
top: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#screen img {
position: absolute;
visibility: hidden;
}
#screen span {
position: absolute;
background: #fff;
cursor: pointer;
visibility: hidden;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
}
</style>
<script type="text/javascript"><!--
var Oz, Ov;
var obj = [];
var K = 0;
var img, scr, W, H;
var SP = 40; /* speed */
var dz = false;
/* html positioning */
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";
}
}
/* create object instances */
function Cobj(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];
/* create HTML elements */
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);
}
}
/* display image & children */
this.display = function(zoomed)
{
with(this)
{
position(img, x0, y0, w0, h0);
img.style.visibility = "visible";
if (parent && ! zoomed)
{
blink();
Ov = img;
}
}
}
/* init zoom */
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);
}
}
/* animate zoom in - 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 (var i in Oz.children)
{
Oz.children[i].init_zoom();
Oz.children[i].display(false, false);
}
}
}
}
/* mouse events */
this.img.onmouseover = function()
{
if (this != Ov) with(this.obj) if (parent && ! zoomed && ! dz) blink();
Ov = this;
return false;
}
this.img.onclick = function()
{
with(this.obj)
{
if (parent && !dz && imgsrc.complete)
{
if (zoomed == 1)
{
/* zoom out */
Oz = this.obj.parent;
zoomed = 0;
init_zoom( -1);
for (var i in children) children[i].img.style.visibility = "hidden";
parent.zoomed = 1;
dz = true;
zoom();
}
else if (zoomed == 0)
{
/* zoom in */
Oz = this.obj;
img.style.cursor = "crosshair";
zoomed = 1;
init_zoom(1);
for (var i in parent.children)
{
if (this.obj != parent.children[i])
parent.children[i].img.style.visibility = "hidden";
}
parent.zoomed = -1;
dz = true;
zoom();
}
}
}
return false;
}
this.spa.onmousedown = function()
{
this.style.visibility="hidden";
this.obj.img.onclick();
return false;
}
}
/* initialization */
/* must start after the first image is loaded */
function starter()
{
scr = document.getElementById("screen");
img = document.getElementById("images").getElementsByTagName("img");
W = parseInt(scr.style.width);
H = parseInt(scr.style.height);
/* ==== tree-zoom ==== */
// new Cobj(parent, image, x, y, w, h)
O = new Cobj(0, 0, 0, 0, 0, 0);
O0 = new Cobj(O, 1, 127, 98, 181, 134);
O1 = new Cobj(O0, 2, 158, 150, 85, 155);
O11 = new Cobj(O1, 4, 136, 98, 80, 196);
O111 = new Cobj(O11, 5, 20, 154, 70, 57);
O1111 = new Cobj(O111, 6, 161, 137, 154, 76);
O112 = new Cobj(O11, 11, 155, 154, 70, 57);
O1121 = new Cobj(O112, 12, 273, 116, 49, 72);
O2 = new Cobj(O0, 3, 281, 150, 90, 154);
O21 = new Cobj(O2, 7, 35, 295, 133, 82);
O211 = new Cobj(O21, 15, 316, 183, 20, 36);
O22 = new Cobj(O2, 8, 179, 295, 127, 79);
O221 = new Cobj(O22, 13, 132, 84, 54, 102);
O2211 = new Cobj(O221, 14, 6, 234, 69, 50);
O22111 = new Cobj(O2211, 14, 267, 90, 135, 98);
O23 = new Cobj(O2, 9, 92, 148, 138, 76);
O231 = new Cobj(O23, 10, 249, 106, 83, 65);
O2311 = new Cobj(O231, 0, 120, 87, 57, 59);
/* display */
O.init_zoom(1);
O.display(true);
for (var i in O.children)
{
O.children[i].init_zoom(1);
O.children[i].display(true);
}
}
//-->
</script>
</head>
<body>
<div style="position:absolute;left:50%;top:50%">
<div style="position:absolute;left:-220px;top:-170px;width:440px;height:340px;background:#000"></div>
<div id="screen" style="position:absolute;left:-200px;top:-150px;width:400px;height:300px;overflow:hidden">
</div>
</div>
<div id="images" style="position:absolute;left:-10000px;top:-10000px;">
<img onload="setTimeout('starter();',500)" src="wi37.jpg">
<img src="wi2.jpg">
<img src="wi7.jpg">
<img src="wi20.jpg">
<img src="wi3.jpg">
<img src="wi10.jpg">
<img src="wi30.jpg">
<img src="wi11.jpg">
<img src="wi21.jpg">
<img src="wi29.jpg">
<img src="wi19.jpg">
<img src="wi27.jpg">
<img src="wi33.jpg">
<img src="wi35.jpg">
<img src="wi42.jpg">
<img src="wi15.jpg">
</div>
</body>
</html>