船长 发表于 2009-02-15 13:15 | 分类：javascript | 阅读数：596 次
废话不说了，上效果，这个代码的应用范围比较窄，不过创意和效果确实很一流的，点击运行查看效果
<!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"); this.img.src = this.imgsrc.src; this.img.obj = this; scr.appendChild(this.img); this.spa = document.createElement("span"); this.spa.style.cursor = "pointer"; this.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="http://www.songlecn.com/wp-content/supload/2009/02/15/wi37.jpg"> <img src="http://www.songlecn.com/wp-content/supload/2009/02/15/wi2.jpg"> <img src="http://www.songlecn.com/wp-content/supload/2009/02/15/wi7.jpg"> <img src="http://www.songlecn.com/wp-content/supload/2009/02/15/wi20.jpg"> <img src="http://www.songlecn.com/wp-content/supload/2009/02/15/wi3.jpg"> <img src="http://www.songlecn.com/wp-content/supload/2009/02/15/wi10.jpg"> <img src="http://www.songlecn.com/wp-content/supload/2009/02/15/wi30.jpg"> <img src="http://www.songlecn.com/wp-content/supload/2009/02/15/wi11.jpg"> <img src="http://www.songlecn.com/wp-content/supload/2009/02/15/wi21.jpg"> <img src="http://www.songlecn.com/wp-content/supload/2009/02/15/wi29.jpg"> <img src="http://www.songlecn.com/wp-content/supload/2009/02/15/wi19.jpg"> <img src="http://www.songlecn.com/wp-content/supload/2009/02/15/wi27.jpg"> <img src="http://www.songlecn.com/wp-content/supload/2009/02/15/wi33.jpg"> <img src="http://www.songlecn.com/wp-content/supload/2009/02/15/wi35.jpg"> <img src="http://www.songlecn.com/wp-content/supload/2009/02/15/wi42.jpg"> <img src="http://www.songlecn.com/wp-content/supload/2009/02/15/wi15.jpg"> </div> <p style="color:#fff;position:absolute;left:40%;top:80%"><a href="http://www.songlecn.com/">web集结号</a>收集整理，转载请注明</p> </body> </html>
提示：你可以先修改部分代码再运行。
您的网名： * 必填
电子邮件： * 绝不会泄露
个人主页：
评论内容：
(Ctrl+Enter快捷回复)
web集结号致力于
