凌晨了。。。失眠。。。EVA
时间：2010-10-18 来源：岑安
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Just for EVA</title> <meta name="Author" content="hongru.chen"> <meta http-equiv="Content-type" content="text/html;charset=UTF-8"> <style type="text/css"><!-- html { overflow: hidden; } body { position: absolute; margin: 0px; padding: 0px; background: #1c1c1c; width: 100%; } #screen { position: absolute; background: #000; left: 50%; top: 50%; margin-left: -440px; margin-top: -340px; width: 880px; overflow: hidden; visibility: hidden; } #b1 { position: absolute; background: #1c1c1c url(../images/b1.jpg) bottom no-repeat; z-index: 100; outline: #000 solid 12px; border-bottom: #2d2d2d solid 1px; } #b2 { position: absolute; background: #1c1c1c url(../images/b2.jpg) top no-repeat; z-index: 100; outline: #000 solid 12px; border-top: #2d2d2d solid 1px; color: #898989; font-family: arial, helvetica, sans-serif; font-size: 11px; } #b2 a {text-decoration: none;color:#4a4a4a;} #b2 a:hover {text-decoration: none;color:#4a4a4a;} #b2 a:visited {text-decoration: none;color:#4a4a4a;} #b2 a:visited:hover {text-decoration: none;color:#4a4a4a;} #b3 { position: absolute; background: #000; z-index: 110; border-left: #2d2d2d solid 1px; } #b4 { position: absolute; background: #000; z-index: 110; border-right: #2d2d2d solid 1px; } #screen .divs { position: absolute; left: -9999px; background: #000; overflow: hidden; outline: #000 solid 12px; } #screen img { position: absolute; cursor: pointer; filter: alpha(opacity=100); z-index: 1; } .html { visibility: hidden; } #screen h1 { position: absolute; font-weight: bold; font-size: 1.5em; color: #dfdfdf; font-family: arial, helvetica, sans-serif; margin-left: 40px; margin-top: 18px; z-index: 1; } #screen .title { width: 100%; background: #000 url(../images/fond_carre_titre.png) bottom no-repeat; cursor: pointer; } #screen .text { margin: 10px; font-size: 0.8em; color: #9f9f9f; font-family: arial, helvetica, sans-serif; text-align: left; margin-top: 10px; } #screen .bul { position: absolute; left: -12px; z-index: 0; } #screen .bkgh { width: 100%; background: #000 url(../images/fond_horizontal.png) bottom no-repeat; } #screen .bkgc { width: 100%; background: #000 url(../images/fond_carre.png) bottom no-repeat; } #screen .bkgv { width: 100%; background: #000 url(../images/fond_vertical.png) bottom no-repeat; } #loader { position: absolute; left: 50%; top: 50%; margin-left: -16px; margin-top: -16px; outline:#000 solid 5px; z-index: 2000; display: none; } --></mce:style><style type="text/css" _mce_bogus="1"><!-- html { overflow: hidden; } body { position: absolute; margin: 0px; padding: 0px; background: #1c1c1c; width: 100%; } #screen { position: absolute; background: #000; left: 50%; top: 50%; margin-left: -440px; margin-top: -340px; width: 880px; overflow: hidden; visibility: hidden; } #b1 { position: absolute; background: #1c1c1c url(../images/b1.jpg) bottom no-repeat; z-index: 100; outline: #000 solid 12px; border-bottom: #2d2d2d solid 1px; } #b2 { position: absolute; background: #1c1c1c url(../images/b2.jpg) top no-repeat; z-index: 100; outline: #000 solid 12px; border-top: #2d2d2d solid 1px; color: #898989; font-family: arial, helvetica, sans-serif; font-size: 11px; } #b2 a {text-decoration: none;color:#4a4a4a;} #b2 a:hover {text-decoration: none;color:#4a4a4a;} #b2 a:visited {text-decoration: none;color:#4a4a4a;} #b2 a:visited:hover {text-decoration: none;color:#4a4a4a;} #b3 { position: absolute; background: #000; z-index: 110; border-left: #2d2d2d solid 1px; } #b4 { position: absolute; background: #000; z-index: 110; border-right: #2d2d2d solid 1px; } #screen .divs { position: absolute; left: -9999px; background: #000; overflow: hidden; outline: #000 solid 12px; } #screen img { position: absolute; cursor: pointer; filter: alpha(opacity=100); z-index: 1; } .html { visibility: hidden; } #screen h1 { position: absolute; font-weight: bold; font-size: 1.5em; color: #dfdfdf; font-family: arial, helvetica, sans-serif; margin-left: 40px; margin-top: 18px; z-index: 1; } #screen .title { width: 100%; background: #000 url(../images/fond_carre_titre.png) bottom no-repeat; cursor: pointer; } #screen .text { margin: 10px; font-size: 0.8em; color: #9f9f9f; font-family: arial, helvetica, sans-serif; text-align: left; margin-top: 10px; } #screen .bul { position: absolute; left: -12px; z-index: 0; } #screen .bkgh { width: 100%; background: #000 url(../images/fond_horizontal.png) bottom no-repeat; } #screen .bkgc { width: 100%; background: #000 url(../images/fond_carre.png) bottom no-repeat; } #screen .bkgv { width: 100%; background: #000 url(../images/fond_vertical.png) bottom no-repeat; } #loader { position: absolute; left: 50%; top: 50%; margin-left: -16px; margin-top: -16px; outline:#000 solid 5px; z-index: 2000; display: none; } --></style> <script type="text/javascript"><!-- // =================================================================== var tweens = { tweens: [], nbTweens: 0, add : function (obj, params) { var self = this, objList = [], objReturn = []; var anim = function () { var i = -1, o; while( o = self.tweens[++i] ) { var cTime = (new Date() * 1) - o.start; if (cTime < o.timeframe) { for (var k in o.val) { var m = o.val[k]; o.obj[k] = Math.round(o.ease(m.from, m.to, cTime / o.timeframe)) + (o.cssMode ? 'px' : 0); } } else { for (var k in o.val) { var m = o.val[k]; o.obj[k] = o.cssValue ? (Math.round(m.from + m.to) + 'px') : (m.from + m.to); } self.tweens.splice(i, 1); self.nbTweens--; if (o.onFinish) o.onFinish (o.params); self.stop(); } if (!o.cssMode) o.obj.onTween(); } }; if (typeof obj == "string" || !obj.length) objList.push(obj); else objList = obj; for (var il = 0, l = objList.length; il < l; il++) { var obj = document.getElementById(objList[il]) || objList[il]; var o = {}; o.val = {}; o.cssMode = true; o.o = obj; o.obj = obj.style; for (var k in params) { var p = params[k]; if (k === "cssMode") { if (p === false) { o.cssMode = false; o.obj = obj; } } else if (k === "onTween") { o.obj.onTween = p; } else if (k === "init") { for (var i in p) o.obj[i] = o.cssMode ? (Math.round(p[i]) + 'px') : p[i]; } else if (k === "target") { for (var i in p) { var from = o.cssMode ? (parseInt(o.obj[i]) || 0) : (o.obj[i] || 0); o.val[i] = { from: from, to: p[i] - from }; } } else o[k] = params[k]; } if (!o.ease) o.ease = this.inOut; if (!o.cssMode && params['init']) o.obj.onTween(); if (o.duration) { o.start = new Date() * 1; o.end = o.start + o.duration; o.timeframe = o.end - o.start; this.tweens.push(o); this.nbTweens++; if (!this.running) this.running = window.setInterval(anim, 16); } objReturn.push(o); } return objReturn.length === 1 ? o : objReturn; }, stop : function () { if (!this.nbTweens) { window.clearInterval(this.running); this.running = false; } }, kill : function (obj) { if (obj) { for (var i = 0; i < this.nbTweens; i++) { if (this.tweens[i] === obj || this.tweens[i].o === obj || this.tweens[i].o === document.getElementById(obj)) { this.nbTweens--; this.tweens.splice(i, 1); this.stop(); } } } }, reset : function () { this.nbTweens = 0; this.stop(); while( this.tweens.length ) { this.tweens.pop(); } }, linear : function (f, t, d) { return t * d + f; }, inOut : function (f, t, d) { return -t * .5 * (Math.cos(Math.PI * d) - 1) + f; } } var res = function () { /* ---- private vars ---- */ var imagesPath = "http://images.cnblogs.com/cnblogs_com/hongru/265630/", scr, dLoad, tre, sto, moving, compo, prevCompo = "0", nw = 0, nh = 0, wu = 0, hu = 0, sc = 0, ct = []; /* ---- Compositions ---- */ var content = { borderWidth : 12, duration : 600, coord : { C01:[[1,3,[-1,1],,0],[1,4,[1,0],,0],[1,6,[5,1],,0],[1,5,[0,3],,1]], C12:[[1,5,,[0,3],0],[1,3,,[-1,1],1],[1,4,,[0,1],1],[1,6,,[1,1],0],[1,4,,[0,3],1],[2,3,[0,-1],,0],[1,6,,[1,-1],1],[2,6,[1,3],,0],[2,5,[5,1],,0],[2,4,[5,2],,1]], C13:[[1,3,,[0,0],1],[1,4,,[1,0],1],[1,5,,[0,3],0],[1,6,,[0,1],0],[3,3,[5,1],,0],[3,5,[4,0],,1],[3,4,[4,3],,0],[1,6,,[-3,1],1],[3,6,[3,1,0,2],,1]], C23:[[2,5,,[4,-1],1],[2,4,,[4,3],0],[3,3,[5,1],[4,1],0],[2,6,,[1,3],1],[3,6,[1,-1],[1,1],0],[2,3,,[-1,1],1],[3,6,[1,1],[0,1],1],[3,3,[4,1],[3,1],0],[3,5,[4,0],,0],[3,4,[4,3],,0]], C24:[[2,3,,[0,3],0],[2,6,,[2,1,2,2],0],[4,5,[-2,1],,0],[4,3,[-2,2],,0],[2,6,,[2,3,2,2],1],[4,6,[2,-1],,0],[2,5,,[3,1],1],[2,4,,[3,2],1],[4,4,[5,1],,1]], C34:[[3,3,,[3,-1],0],[3,6,,[2,1,2,2],0],[4,3,[0,3],,1],[4,5,[0,0],,0],[3,5,,[5,1],0],[3,4,,[5,2],0],[3,6,,[5,1],0],[4,6,[2,3],,0],[4,4,[5,1],,1]], C35:[[3,3,,[2,1],0],[3,5,,[3,1],0],[3,4,,[3,2],0],[3,6,,[0,-1],1],[5,4,[4,-1],,0],[5,6,[-2,1],,0],[3,5,,[3,0],1],[3,4,,[3,3],0],[3,3,,[3,1],0],[3,3,,[3,-1],1],[5,3,[3,3],,1],[5,5,[2,-1],,1]], C41:[[4,4,,[5,1],0],[4,5,,[0,0],1],[4,3,,[0,3],0],[4,6,,[0,1],0],[1,6,[5,1],[2,1],0],[4,6,,[0,3],0],[1,5,[-2,2],[0,2],0],[1,4,[1,0],[1,1],0],[1,3,[0,0],[0,1],0]], C42:[[4,5,,[-1,1],1],[4,3,,[-1,2],1],[4,6,,[1,1,3,2],0],[4,5,,[-1,0],1],[4,3,,[-1,3],0],[2,3,[-1,1],,0],[4,4,,[4,3],1],[2,5,[4,-1],,1],[4,6,,[1,-1,3,2],1],[2,6,[1,3],,1]], C45:[[4,5,,[0,-1],1],[4,3,,[0,3],0],[5,6,[-2,1],,0],[4,6,,[2,1],1],[5,4,[5,1],,1],[4,6,,[2,1,1,2],1],[4,4,,[3,1],0],[4,6,,[2,-1,1,2],1],[5,5,[2,3],,0],[5,3,[3,1],,1],[4,4,,[3,-1],1]], C51:[[5,4,,[4,3],0],[5,3,,[3,3],0],[5,5,,[2,3],0],[1,6,[5,1],,0],[1,3,[0,3],,1],[1,4,[1,3],,1],[5,6,,[0,-1],0],[1,5,[-2,2],,1]], C52:[[5,4,,[5,1],0],[5,3,,[5,1],0],[5,5,,[0,1],1],[5,6,,[-2,1],0],[5,5,,[0,-1],1],[2,3,[0,3],,0],[2,6,[5,1],,0],[2,5,[5,1],,0],[2,4,[5,2],,0]] }, C1 : { divs : { "3" : { image: "o_eva3.jpg", goto:2, x:0,y:1,w:1,h:1,dx:0,dy:-.5 }, "4" : { image: "o_eva2.jpg", goto:3, x:1,y:1,w:1,h:1,dx:.5,dy:0 }, "5" : { text: "text1", x:0,y:2,w:2,h:1 }, "6" : { image: "o_eva3.jpg",x:2,y:1,w:3,h:2,ox:.5,oy:.5 } } }, C2 : { divs : { "3" : { image: "o_eva4.jpg", goto:4, x:0,y:1,w:1,h:2,dx:-.5,dy:0 }, "4" : { image: "o_eva5.jpg", goto:3, x:4,y:2,w:1,h:1,dx:0,dy:.5 }, "5" : { text : "text2", x:4,y:1,w:1,h:1 }, "6" : { image : "o_eva2.jpg",x:1,y:1,w:3,h:2,ox:.7,oy:.7 } } }, C3 : { divs : { "3" : { image: "o_eva3.jpg", goto:4, x:3,y:1,w:1,h:2,dx:-.5,dy:0 }, "4" : { image: "o_eva7.jpg", goto:5, x:4,y:2,w:1,h:1,dx:0,dy:-.5 }, "5" : { text : "text3", x:4,y:1,w:1,h:1 }, "6" : { image : "o_eva5.jpg", x:0,y:1,w:3,h:2,ox:.2,oy:.8 } } }, C4 : { divs : { "3" : { image: "o_eva4.jpg", goto:5, x:0,y:2,w:2,h:1,dx:0,dy:.5 }, "4" : { image: "o_eva3.jpg", goto:1, x:4,y:1,w:1,h:2,dx:-.5,dy:0 }, "5" : { text : "text4", x:0,y:1,w:2,h:1 }, "6" : { image : "o_eva6.jpg", x:2,y:1,w:2,h:2,ox:.2,oy:.5 } } }, C5 : { divs : { "3" : { image: "o_eva6.jpg", goto:1, x:3,y:1,w:1,h:2,dx:-.5,dy:0 }, "4" : { image: "o_eva8.jpg", goto:2, x:4,y:1,w:1,h:2,dx:-.5,dy:0 }, "5" : { text : "text5", x:2,y:1,w:1,h:2 }, "6" : { image : "o_eva1.jpg", x:0,y:1,w:2,h:2,ox:.9,oy:.9 } } } }; //////////////////////////////////////////////////////////////////////////// /* ==== init screen position and dimensions ==== */ function resize() { /* --- resize --- */ nw = scr.offsetWidth; nh = scr.offsetHeight; wu = (nw - (6 * content.borderWidth)) / 5; hu = (nh - (5 * content.borderWidth)) / 4; } //////////////////////////////////////////////////////////////////////////// /* ==== decode transition ==== */ var pushTrans = function (c0, c1, p) { var i = p, t; while( t = content.coord["C" + c0 + c1][i++] ) { /* ---- init origin ---- */ if (t[2]) { var d = ct[sc][t[1]]; d.style.zIndex = 40 - i; tweens.add(d, { init: getPixels(t[0], t[1], t[2], 1) }); } else { var d = ct[(sc + 1) % 2][t[1]]; d.style.zIndex = 40 - i; } /* ---- target ---- */ tweens.add(d, { duration: content.duration, target : getPixels(t[0], t[1], t[3]), onFinish : nextTrans, params : [c0, c1 ,i, d, t[4], t[5]] }); if (!t[4]) break; } } /* ==== next tweens serie ==== */ var nextTrans = function (t) { if (!t[4]) pushTrans(t[0], t[1], t[2]); if (t[2] == content.coord["C" + t[0] + t[1]].length) moving = false; } /* ==== coordinates ==== */ var getPixels = function (c, n, div) { var b = content.borderWidth; /* ---- default size ---- */ if (c) { var c = content["C" + c].divs[n]; if (!div) div = [c.x, c.y, c.w, c.h]; else if (div.length == 2) { div[2] = c.w; div[3] = c.h; } } /* ---- return css ---- */ return { left: div[0] * wu + (b + div[0] * b), top: div[1] * hu + (b + div[1] * b), width: Math.max(0, (div[2] * wu) + (-b + div[2] * b)), } /* ==== start transitions ==== */ var compoIn = function (compo) { if (tweens.running) { if (sto) clearTimeout(sto); sto = setTimeout(function() { compoIn(compo); }, 128); return; } sto = false; tre = false; moving = true; /* ---- display loader ---- */ dLoad = setTimeout(function () { document.getElementById('loader').style.display = "block"; }, 150); /* ---- swap containers ---- */ sc = (sc + 1) % 2; var c = content["C" + compo]; /* ---- reset compo ---- */ c.nbi = c.nbl = 0; for (var k in c.divs) { ct[sc][k].innerHTML = ""; for (var i in c.divs[k]) if (i == "image") c.nbi++; } /* ---- for each containers ---- */ for (var k in c.divs) { var d = c.divs[k]; for (var i in d) { if (i == "image") { /* ---- preload image ---- */ d.img = document.createElement('img'); d.img.compo = c; d.img.c = compo; d.img.d = d; d.img.onload = function () { this.compo.nbl++; /* ---- all images loaded ---- */ if (this.compo.nbi == this.compo.nbl) { clearTimeout(dLoad); document.getElementById('loader').style.display = "none"; /* ---- for each container ---- */ for (var k in c.divs) { var o = ct[sc][k]; o.style.left = '-9999px'; var d = c.divs[k]; /* ---- for each attribute ---- */ for (var i in d) { if (i == "goto") { d.img.goto = d[i]; /* ---- onclick ---- */ d.img.onclick = function () { compoIn(this.goto); } } else if (i == "image") { /* ---- image loaded - update DOM ---- */ o.appendChild(d.img); /* ---- center image ---- */ var x = d.xy(false); tweens.add(d.img, { init: { left: x[0], top: x[1] } }); } else if (i == "text") { /* ---- HTML text ---- */ if (document.getElementById(d[i])) o.innerHTML = document.getElementById(d[i]).innerHTML; } } } /* ---- start transition ---- */ pushTrans(prevCompo, compo, 0); prevCompo = compo; } }; /* ---- roll over ---- */ d.xy = function (s) { return [ (!this.dx) ? (((this.w * wu + (this.w - 1) * content.borderWidth) - this.img.width) * (this.ox || .5)) : (s ? ((this.dx > 0) ? 0 : wu * this.dx) : ((this.dx > 0) ? -wu * this.dx : 0)), (!this.dy) ? (((this.h * hu + (this.h - 1) * content.borderWidth) - this.img.height) * (this.oy || .5)) : (s ? ((this.dy > 0) ? 0 : hu * this.dy) : ((this.dy > 0) ? -hu * this.dy : 0)) ]; } if (k != "6"){ d.img.imgOver = function (x, y) { tweens.kill(this.overTween); this.overTween = tweens.add(this, { duration: 300, target : {left : x, top: y} }); }; d.img.onmousemove = function() { if (!this.over && !moving) { var x = this.d.xy(true); this.imgOver(x[0], x[1]); this.over = true; } }; d.img.onmouseout = function() { if (this.over && !moving) { var x = this.d.xy(false); this.imgOver(x[0], x[1]); this.over = false; } }; } else { /* ---- zoom ---- */ d.img.onclick = function() { zoomIn(this); }; } /* ---- source ---- */ d.img.src = imagesPath + d[i]; d.n = k; } } } } /* ==== zoom in main image ==== */ var zoomIn = function (img) { if (moving) return; if (tweens.running) { if (sto) clearTimeout(sto); sto = setTimeout(function() { zoomIn(img); }, 128); return; } sto = false; ct[sc][6].style.zIndex = 50; img.onclick = function() { zoomOut(img); }; tweens.add(ct[sc][6], { duration: 1000, target: { left: content.borderWidth, top: content.borderWidth, width: nw - content.borderWidth * 2, tweens.add(['b3','b4'], { duration: 1000, target: { } }); tweens.add(img, { duration: 1000, target: { left: ((nw - content.borderWidth * 2) - img.width) * .5, top: ((nh - content.borderWidth * 2) - img.height) * .5 } }); } /* ==== zoom out main image ==== */ var zoomOut = function (img) { if (tweens.running) { if (sto) clearTimeout(sto); sto = setTimeout(function() { zoomOut(img); }, 128); return; } var d = img.d; img.onclick = function() { zoomIn(img); }; sto = false; tweens.add(['b3','b4'], { duration: 1000, target: { tweens.add(['b1','b2'], { duration: 1000, target: { tweens.add(d.img, { duration: 1000, target: { left: ((d.w * wu) - d.img.width) * (d.ox || .5), top: ((d.h * hu) - d.img.height) * (d.oy || .5) } }); } }); } /* ==== intro ==== */ var intro = function() { scr.style.visibility = "visible"; tweens.add('b1', { init: { width: nw, tweens.add('b2', { init: { width: nw, tweens.add('b3', { init: { width: content.borderWidth, tweens.add('b4', { init: { width: content.borderWidth, tweens.add(['b1','b2'], { duration: 1000, target: { tweens.add(['b3','b4'], { duration: 1000, target: { } /* ==== init script ==== */ var init = function () { scr = document.getElementById('screen'); for (var i = 0; i <= 1; i++) { ct[i] = []; for (var j = 3; j < 7; j++) { var o = ct[i][j] = document.createElement('div'); o.className = "divs"; scr.appendChild(o); } } resize(); setTimeout(function() { intro(); }, 100); } return { /* ==== public ==== */ init : init, goto : function (compo) { compoIn(compo); } } }(); /* ==== start script ==== */ onload = function() { res.init(); } // --></script> </head> <body> <div id="screen"> <div id="b1"></div><div id="b2"></div> <div id="b3"></div><div id="b4"></div> </div> <img id="loader" src="http://images.cnblogs.com/cnblogs_com/hongru/265630/o_ajax-loader-3.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/hongru/265630/o_ajax-loader-3.gif" alt=""> <div class="html"> <div id="text1"> <div class="bkgh"> <div class="title"><h1 onclick="res.goto(2);">初号机</h1></div> <div class="text">暴走时铩羽而归的气势，只为轮回的下一秒宁静...</div> </div> </div> <div id="text2"> <div class="bkgc"> <div class="title"><h1 onclick="res.goto(3);">序之章</h1></div> <div class="text">请别忘了我头颅霰落洒下的满地鲜血，转眼间，已是一地死灰...</div> </div> </div> <div id="text3"> <div class="bkgc"> <div class="title"><h1 onclick="res.goto(4);">破</h1></div> <div class="text">那只是死亡前的静寂。回头的时候...请记得带走我的头颅...</div> </div> </div> <div id="text4"> <div class="bkgh"> <div class="title"><h1 onclick="res.goto(5);">空</h1></div> <div class="text">那一刻，下巴轻抬的刹那，只为啃噬你胸腔里喷涌而出的鲜血...</div> </div> </div> <div id="text5"> <div class="bkgv"> <div class="title"><h1 onclick="res.goto(1);">死亡</h1></div> <div class="text">我们新的世界，只是下一个死神举止不定所遗落下的一颗棋子...</div> </div> </div> </div> </body> </html>
看不到演示的童鞋，可以到blueidea上看，上面也发了http://bbs.blueidea.com/thread-3002142-1-1.html
相关阅读 更多 +
