Team:WHU-China/Team/Gallary

From 2011.igem.org

(Difference between revisions)
Line 4: Line 4:
<head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
-
<title>超酷超绚精美图片展示效果代码(一) - 网页特效观止-网页特效代码|JsCode.CN|</title>
+
<title>超酷超绚精美图片展示效果代码(九) - 网页特效观止-网页特效代码|JsCode.CN|</title>
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
<style type="text/css">
Line 14: Line 14:
padding: 0px;
padding: 0px;
background: #000;
background: #000;
 +
position: absolute;
 +
top: 0px;
 +
left: 0px;
width: 100%;
width: 100%;
height: 100%;
height: 100%;
}
}
-
#imageFlow {
+
#screen {
position: absolute;
position: absolute;
-
width: 100%;
+
top: 1%;
-
height: 80%;
+
left: 1%;
-
left: 0%;
+
width: 98%;
-
top: 10%;
+
height: 98%;
background: #000;
background: #000;
 +
color: #fff;
}
}
-
#imageFlow .diapo {
+
#screen div {
position: absolute;
position: absolute;
-
left: -1000px;
+
overflow: hidden;
cursor: pointer;
cursor: pointer;
-
-ms-interpolation-mode: nearest-neighbor;
 
}
}
-
#imageFlow .link {
+
#screen img {
-
border: dotted #fff 1px;
+
-
margin-left: -1px;
+
-
margin-bottom: -1px;
+
-
}
+
-
#imageFlow .bank {
+
-
visibility: hidden;
+
-
}
+
-
#imageFlow .top {
+
position: absolute;
position: absolute;
width: 100%;
width: 100%;
-
height: 40%;
+
height: 100%;
-
background: #181818;
+
}
}
-
#imageFlow .text {
+
#screen .label {
position: absolute;
position: absolute;
-
left: 0px;
 
-
width: 100%;
 
-
bottom: 16%;
 
-
text-align: center;
 
color: #FFF;
color: #FFF;
-
font-family: verdana, arial, Helvetica, sans-serif;
+
background: #000;
-
z-index: 1000;
+
font-family: arial;
-
}
+
white-space: no-wrap;
-
#imageFlow .title {
+
-
font-size: 0.9em;
+
-
font-weight: bold;
+
-
}
+
-
#imageFlow .legend {
+
-
font-size: 0.8em;
+
-
}
+
-
#imageFlow .scrollbar {
+
-
position: absolute;
+
-
left: 10%;
+
-
bottom: 10%;
+
-
width: 80%;
+
-
height: 16px;
+
-
z-index: 1000;
+
-
}
+
-
#imageFlow .track {
+
-
position: absolute;
+
-
left: 1%;
+
-
width: 98%;
+
-
height: 16px;
+
-
filter: alpha(opacity=30);
+
-
opacity: 0.3;
+
-
}
+
-
#imageFlow .arrow-left {
+
-
position: absolute;
+
-
}
+
-
#imageFlow .arrow-right {
+
-
position: absolute;
+
-
right: 0px;
+
-
}
+
-
#imageFlow .bar {
+
-
position: absolute;
+
-
height: 16px;
+
-
left: 25px;
+
}
}
</style>
</style>
 +
<!-- dhteumeuleu utilities -->
<script type="text/javascript">
<script type="text/javascript">
 +
// ================================
 +
// DHTML mini library
 +
// Gerard Ferrandez - January 2007
 +
// http://www.dhteumeuleu.com
 +
// ================================
 +
 +
id = function(o) {
 +
return document.getElementById(o);
 +
}
 +
 +
px = function (x) {
 +
return ''.concat(Math.round(x), 'px');
 +
}
 +
 +
pxLeft = function(o) {
 +
for (var x = 0; o != null; o = o.offsetParent) x += o.offsetLeft;
 +
return x;
 +
}
 +
 +
pxTop = function(o) {
 +
for (var x = 0; o != null; o = o.offsetParent) x += o.offsetTop;
 +
return x;
 +
}
-
var imf = function () {
+
/* ==== DOM 2 add event ==== */
-
var lf = 0;
+
addEvent = function (o, e, f) {
-
var instances = [];
+
var r = false;
-
function getElementsByClass (object, tag, className) {
+
if (window.addEventListener) {
-
var o = object.getElementsByTagName(tag);
+
o.addEventListener(e, f, false);
-
for ( var i = 0, n = o.length, ret = []; i < n; i++)
+
r = true;
-
if (o[i].className == className) ret.push(o[i]);
+
} else if (window.attachEvent) {
-
if (ret.length == 1) ret = ret[0];
+
r = o.attachEvent('on' + e, f);
-
return ret;
+
}
}
-
function addEvent (o, e, f) {
+
return r;
-
if (window.addEventListener) o.addEventListener(e, f, false);
+
}
-
else if (window.attachEvent) r = o.attachEvent('on' + e, f);
+
</script>
-
}
+
<script type="text/javascript">
-
function createReflexion (cont, img) {
+
// ========================================================
-
var flx = false;
+
//            ====== Javascript Slideshow ======
-
if (document.createElement("canvas").getContext) {
+
// script written by Gerard Ferrandez - December 31, 2006
-
flx = document.createElement("canvas");
+
// http://www.dhteumeuleu.com/
-
flx.width = img.width;
+
// ========================================================
-
flx.height = img.height;
+
 
-
var context = flx.getContext("2d");
+
var diap = {
-
context.translate(0, img.height);
+
/////////////////////////////////
-
context.scale(1, -1);
+
BR : 3,     // border size in px
-
context.drawImage(img, 0, 0, img.width, img.height);
+
ZR : .75,   // zoom ratio
-
context.globalCompositeOperation = "destination-out";
+
SP : .1,   // speed
-
var gradient = context.createLinearGradient(0, 0, 0, img.height * 2);
+
/////////////////////////////////
-
gradient.addColorStop(1, "rgba(255, 255, 255, 0)");
+
V : false,
-
gradient.addColorStop(0, "rgba(255, 255, 255, 1)");
+
S : false,
-
context.fillStyle = gradient;
+
G : true,
-
context.fillRect(0, 0, img.width, img.height * 2);
+
 
-
} else {
+
resize : function () {
-
/* ---- DXImageTransform ---- */
+
/* ==== window resize event ==== */
-
flx    = document.createElement('img');
+
diap.nw = diap.scr.offsetWidth;
-
flx.src = img.src;
+
diap.nh = diap.scr.offsetHeight;
-
flx.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(' +
+
diap.nwu = (diap.nw * diap.ZR);
-
                  'opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=' +
+
diap.nhu = (diap.nh * diap.ZR);
-
  (img.height * .25) + ')';
+
diap.nwt = Math.floor((diap.nw * (1 - diap.ZR) * .5) / (diap.NX - 1)) - diap.BR;
 +
diap.nht = Math.floor((diap.nh * (1 - diap.ZR) * .5) / (diap.NY - 1)) - diap.BR;
 +
diap.rc  = 255 / ((diap.nw / diap.NX) - diap.nwt);
 +
if (diap.N) {
 +
diap.setPosition();
 +
if (!diap.G) diap.delLabels();
}
}
-
/* ---- insert Reflexion ---- */
+
},
-
flx.style.position = 'absolute';
+
 
-
flx.style.left    = '-1000px';
+
setPosition : function () {
-
cont.appendChild(flx);
+
/* ==== calculate image target position  ==== */
-
return flx;
+
var k = 0;
-
}
+
var y = this.S ? this.BR + Math.floor((this.NY - this.Y - 1) * (this.nht + this.BR)) : 0;
-
/* //////////// ==== ImageFlow Constructor ==== //////////// */
+
for (var j = 0; j < this.NY; j++) {
-
function ImageFlow(oCont, size, zoom, border) {
+
var x = this.S ? this.BR + Math.floor((this.NX - this.X - 1) * (this.nwt + this.BR)) : 0;
-
this.diapos    = [];
+
for (var i = 0; i < this.NX; i++) {
-
this.scr        = false;
+
var o = this.spa[k++];
-
this.size      = size;
+
o.y1 = y;
-
this.zoom      = zoom;
+
o.x1 = x;
-
this.bdw        = border;
+
o.w1 = this.S ? (o == this.S ? this.nwu - this.BR : this.nwt) : Math.ceil(this.nw / this.NX) - this.BR;
-
this.oCont      = oCont;
+
o.h1 = this.S ? (o == this.S ? this.nhu - this.BR : this.nht) : Math.ceil(this.nh / this.NY) - this.BR;
-
this.oc        = document.getElementById(oCont);
+
x += this.S ? ((this.X == i) ? this.nwu : this.nwt + this.BR) : Math.ceil(this.nw / this.NX);
-
this.scrollbar  = getElementsByClass(this.oc,  'div', 'scrollbar');
+
-
this.text      = getElementsByClass(this.oc,  'div', 'text');
+
-
this.title      = getElementsByClass(this.text, 'div', 'title');
+
-
this.legend    = getElementsByClass(this.text, 'div', 'legend');
+
-
this.bar        = getElementsByClass(this.oc,  'img', 'bar');
+
-
this.arL        = getElementsByClass(this.oc,  'img', 'arrow-left');
+
-
this.arR        = getElementsByClass(this.oc,  'img', 'arrow-right');
+
-
this.bw        = this.bar.width;
+
-
this.alw        = this.arL.width - 5;
+
-
this.arw        = this.arR.width - 5;
+
-
this.bar.parent = this.oc.parent  = this;
+
-
this.arL.parent = this.arR.parent = this;
+
-
this.view      = this.back      = -1;
+
-
this.resize();
+
-
this.oc.onselectstart = function () { return false; }
+
-
/* ---- create images ---- */
+
-
var img  = getElementsByClass(this.oc, 'div', 'bank').getElementsByTagName('a');
+
-
this.NF = img.length;
+
-
for (var i = 0, o; o = img[i]; i++) {
+
-
this.diapos[i] = new Diapo(this, i,
+
-
o.rel,
+
-
o.title || '- ' + i + ' -',
+
-
o.innerHTML || o.rel,
+
-
o.href || '',
+
-
o.target || '_self'
+
-
);
+
-
}
+
-
/* ==== add mouse wheel events ==== */
+
-
if (window.addEventListener)
+
-
this.oc.addEventListener('DOMMouseScroll', function(e) {
+
-
this.parent.scroll(-e.detail);
+
-
}, false);
+
-
else this.oc.onmousewheel = function () {
+
-
this.parent.scroll(event.wheelDelta);
+
-
}
+
-
/* ==== scrollbar drag N drop ==== */
+
-
this.bar.onmousedown = function (e) {
+
-
if (!e) e = window.event;
+
-
var scl = e.screenX - this.offsetLeft;
+
-
var self = this.parent;
+
-
/* ---- move bar ---- */
+
-
this.parent.oc.onmousemove = function (e) {
+
-
if (!e) e = window.event;
+
-
self.bar.style.left = Math.round(Math.min((self.ws - self.arw - self.bw), Math.max(self.alw, e.screenX - scl))) + 'px';
+
-
self.view = Math.round(((e.screenX - scl) ) / (self.ws - self.alw - self.arw - self.bw) * self.NF);
+
-
if (self.view != self.back) self.calc();
+
-
return false;
+
-
}
+
-
/* ---- release scrollbar ---- */
+
-
this.parent.oc.onmouseup = function (e) {
+
-
self.oc.onmousemove = null;
+
-
return false;
+
}
}
-
return false;
+
y += this.S ? ((this.Y == j) ? this.nhu : this.nht + this.BR) : Math.ceil(this.nh / this.NY);
}
}
-
/* ==== right arrow ==== */
+
},
-
this.arR.onclick = this.arR.ondblclick = function () {
+
 
-
if (this.parent.view < this.parent.NF - 1)
+
delLabels : function () {
-
this.parent.calc(1);
+
/* ==== remove texts ==== */
 +
for ( var i = 0; i < diap.N; i++) {
 +
var o = diap.spa[i];
 +
if (o.T) diap.scr.removeChild(o.T);
 +
o.T = false;
}
}
-
/* ==== Left arrow ==== */
+
},
-
this.arL.onclick = this.arL.ondblclick = function () {
+
 
-
if (this.parent.view > 0)
+
run : function () {
-
this.parent.calc(-1);
+
/* ==== main loop ==== */
-
}
+
for ( var i = 0; i < diap.N; i++) diap.spa[i].move();
-
}
+
setTimeout(diap.run, 16);
-
/* //////////// ==== ImageFlow prototype ==== //////////// */
+
},
-
ImageFlow.prototype = {
+
 
-
/* ==== targets ==== */
+
init : function (container, NX, NY, path, images) {
-
calc : function (inc) {
+
/* ==== initialize script ==== */
-
if (inc) this.view += inc;
+
this.scr = id(container);
-
var tw = 0;
+
if (!this.scr || NX * NY != images.length) { alert('ID-10-T error...'); return false; }
-
var lw = 0;
+
this.NX = NX;
-
var o = this.diapos[this.view];
+
this.NY = NY;
-
if (o && o.loaded) {
+
this.spa = {};
-
/* ---- reset ---- */
+
this.resize();
-
var ob = this.diapos[this.back];
+
var k = 0;
-
if (ob && ob != o) {
+
for (var y = 0; y < this.NY; y++) {
-
ob.img.className = 'diapo';
+
for (var x = 0; x < this.NX; x++) {
-
ob.z1 = 1;
+
/* ==== create HTML elements ==== */
-
}
+
var s = this.spa[k] = document.createElement('div');
-
/* ---- update legend ---- */
+
s.img = document.createElement('img');
-
this.title.replaceChild(document.createTextNode(o.title), this.title.firstChild);
+
 
-
this.legend.replaceChild(document.createTextNode(o.text), this.legend.firstChild);
+
/* ==== opacity optimized function ==== */
-
/* ---- update hyperlink ---- */
+
s.img.setOpacity = function (alpha) {
-
if (o.url) {
+
if (alpha < 0) alpha = 0; else if (alpha > 100) alpha = 100;
-
o.img.className = 'diapo link';
+
if (alpha == 100) {
-
window.status = 'hyperlink: ' + o.url;
+
/* ==== speed opt - remove IE filter ==== */
-
} else {
+
this.style.visibility = 'visible';
-
o.img.className = 'diapo';
+
this.style.filter = '';
-
window.status = '';
+
this.style.opacity = 1;
-
}
+
return 100;
-
/* ---- calculate target sizes & positions ---- */
+
} else if (alpha == 0) {
-
o.w1 = Math.min(o.iw, this.wh * .5) * o.z1;
+
/* ==== hide image, remove opacity ==== */
-
var x0 = o.x1 = (this.wh * .5) - (o.w1 * .5);
+
this.style.visibility = 'hidden';
-
var x = x0 + o.w1 + this.bdw;
+
this.style.filter = '';
-
for (var i = this.view + 1, o; o = this.diapos[i]; i++) {
+
this.style.opacity = 0;
-
if (o.loaded) {
+
return 0;
-
o.x1 = x;
+
-
o.w1 = (this.ht / o.r) * this.size;
+
-
x  += o.w1 + this.bdw;
+
-
tw  += o.w1 + this.bdw;
+
}
}
 +
if (this.filters) {
 +
/* ==== IE filter ==== */
 +
if (!this.filters.alpha) this.style.filter = 'alpha(opacity=' + alpha + ')';
 +
else this.filters.alpha.opacity = alpha;
 +
/* ==== CSS opacity ==== */
 +
} else this.style.opacity = alpha * .01;
 +
return alpha;
}
}
-
x = x0 - this.bdw;
+
s.img.src = id('loading').src;
-
for (var i = this.view - 1, o; o = this.diapos[i]; i--) {
+
s.appendChild(s.img);
-
if (o.loaded) {
+
this.scr.appendChild(s);
-
o.w1 = (this.ht / o.r) * this.size;
+
 
-
o.x1 = x - o.w1;
+
/* ==== pre-load image ==== */
-
x   -= o.w1 + this.bdw;
+
s.pre = new Image();
-
tw += o.w1 + this.bdw;
+
s.pre.obj = s;
-
lw  += o.w1 + this.bdw;
+
s.pre.onload = function() { this.obj.img.src = this.src; }
 +
s.pre.src = path + images[k][0];
 +
 
 +
/* ==== set image variables ==== */
 +
s.x  = x;
 +
s.y  = y;
 +
s.x0 = x * (this.nw / this.NX) + (this.nw / this.NX) / 2;
 +
s.y0 = y * (this.nh / this.NY) + (this.nh / this.NY) / 2;;
 +
s.x1 = x * (this.nw / this.NX);
 +
s.y1 = y * (this.nh / this.NY);
 +
s.w0 = 0;
 +
s.h0 = 0;
 +
s.w1 = 0;
 +
s.h1 = 0;
 +
s.V  = 0;
 +
s.t  = images[k][1];
 +
s.T  = false;
 +
 
 +
/* ==== function move image ==== */
 +
s.move = function() {
 +
/* ==== position images ==== */
 +
this.style.left   = px(this.x0 += (this.x1 - this.x0) * diap.SP);
 +
this.style.top    = px(this.y0 += (this.y1 - this.y0) * diap.SP);
 +
this.style.width = px(this.w0 += (this.w1 - this.w0) * diap.SP);
 +
this.style.height = px(this.h0 += (this.h1 - this.h0) * diap.SP);
 +
if (this != diap.S) {
 +
/* ==== set image background color ==== */
 +
if (Math.abs(this.w1 - this.w0) > 1) {
 +
var c = (!diap.G && this.V > 0) ? 255 : 16 + Math.round(255 - diap.rc * (this.w0 - diap.nwt));
 +
this.style.background = 'RGB('.concat(c, ',', c, ',', c, ')');
 +
}
 +
if (this == diap.V) {
 +
/* ==== on mouseover: fade in ==== */
 +
if (this.V < 100) this.img.setOpacity(this.V += 5);
 +
} else {
 +
/* ==== fade out ==== */
 +
if (this.V >= 0 && diap.G != this) this.img.setOpacity(this.V -= 2);
 +
}
}
}
 +
/* ==== text effect ==== */
 +
if (this.T) this.dispLabel();
}
}
-
/* ---- move scrollbar ---- */
+
 
-
if (!this.scr && tw) {
+
/* ==== display text function (typewriter FX) ==== */
-
var r = (this.ws - this.alw - this.arw - this.bw) / tw;
+
s.dispLabel = function() {
-
this.bar.style.left = Math.round(this.alw + lw * r) + 'px';
+
if (diap.G || diap.S == this) {
-
}
+
/* ==== zoomed image ==== */
-
/* ---- save preview view ---- */
+
this.T.style.left  = px(this.x0);
-
this.back = this.view;
+
this.T.style.top   = px(this.y0);
-
}
+
this.T.style.width = px(this.w0);
-
},
+
-
/* ==== mousewheel scrolling ==== */
+
-
scroll : function (sc) {
+
-
if (sc < 0) {
+
-
if (this.view < this.NF - 1) this.calc(1);
+
-
} else {
+
-
if (this.view > 0) this.calc(-1);
+
-
}
+
-
},
+
-
/* ==== resize  ==== */
+
-
resize : function () {
+
-
this.wh = this.oc.clientWidth;
+
-
this.ht = this.oc.clientHeight;
+
-
this.ws = this.scrollbar.offsetWidth;
+
-
this.calc();
+
-
this.run(true);
+
-
},
+
-
/* ==== move all images  ==== */
+
-
run : function (res) {
+
-
var i = this.NF;
+
-
while (i--) this.diapos[i].move(res);
+
-
}
+
-
}
+
-
/* //////////// ==== Diapo Constructor ==== //////////// */
+
-
Diapo = function (parent, N, src, title, text, url, target) {
+
-
this.parent        = parent;
+
-
this.loaded        = false;
+
-
this.title        = title;
+
-
this.text          = text;
+
-
this.url          = url;
+
-
this.target        = target;
+
-
this.N            = N;
+
-
this.img          = document.createElement('img');
+
-
this.img.src      = src;
+
-
this.img.parent    = this;
+
-
this.img.className = 'diapo';
+
-
this.x0            = this.parent.oc.clientWidth;
+
-
this.x1            = this.x0;
+
-
this.w0            = 0;
+
-
this.w1            = 0;
+
-
this.z1            = 1;
+
-
this.img.parent    = this;
+
-
this.img.onclick  = function() { this.parent.click(); }
+
-
this.parent.oc.appendChild(this.img);
+
-
/* ---- display external link ---- */
+
-
if (url) {
+
-
this.img.onmouseover = function () { this.className = 'diapo link'; }
+
-
this.img.onmouseout  = function () { this.className = 'diapo'; }
+
-
}
+
-
}
+
-
/* //////////// ==== Diapo prototype ==== //////////// */
+
-
Diapo.prototype = {
+
-
/* ==== HTML rendering ==== */
+
-
move : function (res) {
+
-
if (this.loaded) {
+
-
var sx = this.x1 - this.x0;
+
-
var sw = this.w1 - this.w0;
+
-
if (Math.abs(sx) > 2 || Math.abs(sw) > 2 || res) {
+
-
/* ---- paint only when moving ---- */
+
-
this.x0 += sx * .1;
+
-
this.w0 += sw * .1;
+
-
if (this.x0 < this.parent.wh && this.x0 + this.w0 > 0) {
+
-
/* ---- paint only visible images ---- */
+
-
this.visible = true;
+
-
var o = this.img.style;
+
-
var h = this.w0 * this.r;
+
-
/* ---- diapo ---- */
+
-
o.left   = Math.round(this.x0) + 'px';
+
-
o.bottom = Math.floor(this.parent.ht * .25) + 'px';
+
-
o.width  = Math.round(this.w0) + 'px';
+
-
o.height = Math.round(h) + 'px';
+
-
/* ---- reflexion ---- */
+
-
if (this.flx) {
+
-
var o = this.flx.style;
+
-
o.left  = Math.round(this.x0) + 'px';
+
-
o.top    = Math.ceil(this.parent.ht * .75 + 1) + 'px';
+
-
o.width  = Math.round(this.w0) + 'px';
+
-
o.height = Math.round(h) + 'px';
+
-
}
+
} else {
} else {
-
/* ---- disable invisible images ---- */
+
/* ==== calculate text position ==== */
-
if (this.visible) {
+
var xt = diap.S.x0 + this.w0 + diap.BR;
-
this.visible = false;
+
if (this.y == diap.Y) {
-
this.img.style.width = '0px';
+
this.T.style.top = px(this.y0 - this.f - diap.BR);
-
if (this.flx) this.flx.style.width = '0px';
+
if (this.y == 0) var xt = diap.S.x0;
 +
} else this.T.style.top = px(this.y0 - (this.y <= diap.Y ? diap.BR : 0));
 +
if (this.x > diap.X) this.T.style.left = px(diap.S.w0 + diap.S.x0 - diap.nwu * .5);
 +
else this.T.style.left = px(xt);
 +
if (this != diap.V) {
 +
/* ==== text type out ==== */
 +
this.Tp--;
 +
this.T.innerHTML = this.t.substring(0, this.Tp);
 +
if (this.Tp < 1) {
 +
diap.scr.removeChild(this.T);
 +
this.T = false;
 +
}
 +
} else {
 +
if (this.Tp < this.t.length) {
 +
/* ==== text type in ==== */
 +
this.Tp++;
 +
this.T.innerHTML = this.t.substring(0, this.Tp);
 +
}
}
}
}
}
}
}
-
} else {
+
 
-
/* ==== image onload ==== */
+
/* ==== create text function ==== */
-
if (this.img.complete && this.img.width) {
+
s.createLabel = function () {
-
/* ---- get size image ---- */
+
this.T = document.createElement('div');
-
this.iw    = this.img.width;
+
this.T.className = 'label';
-
this.ih    = this.img.height;
+
if (!diap.G && this.x > diap.X) this.T.style.textAlign = 'right';
-
this.r      = this.ih / this.iw;
+
this.f = 4 + Math.round(Math.sqrt(diap.nht * 2));
-
this.loaded = true;
+
if(this == diap.S) {
-
/* ---- create reflexion ---- */
+
this.f *= 2;
-
this.flx    = createReflexion(this.parent.oc, this.img);
+
this.T.style.background = 'none';
-
if (this.parent.view < 0) this.parent.view = this.N;
+
this.T.style.textAlign = 'center';
-
this.parent.calc();
+
}
 +
this.T.style.fontSize = ''.concat(this.f, 'px');
 +
this.T.innerHTML  = this.t;
 +
this.T.style.left = px(-1000);
 +
this.T.style.width = px(diap.nwu * .5);
 +
this.T.style.height = px(this.f + 3);
 +
this.Tp = 0;
 +
diap.scr.appendChild(this.T);
}
}
-
}
+
 
-
},
+
/* ==== on mouse over event ==== */
-
/* ==== diapo onclick ==== */
+
s.onmouseover = function() {
-
click : function () {
+
if (diap.S != this && diap.G != this) {
-
if (this.parent.view == this.N) {
+
/* ==== display image ==== */
-
/* ---- click on zoomed diapo ---- */
+
this.img.setOpacity(100);
-
if (this.url) {
+
this.V = this.img.setOpacity(20);
-
/* ---- open hyperlink ---- */
+
}
-
window.open(this.url, this.target);
+
/* ==== create text ==== */
-
} else {
+
if (!this.T) this.createLabel();
-
/* ---- zoom in/out ---- */
+
diap.V = this;
-
this.z1 = this.z1 == 1 ? this.parent.zoom : 1;
+
-
this.parent.calc();
+
}
}
-
} else {
+
 
-
/* ---- select diapo ---- */
+
/* ==== on click event ==== */
-
this.parent.view = this.N;
+
s.onclick = function() {
-
this.parent.calc();
+
/* ==== memorize selected image ==== */
-
}
+
diap.X = this.x;
-
return false;
+
diap.Y = this.y;
-
}
+
diap.V = false;
-
}
+
diap.G = false;
-
/* //////////// ==== public methods ==== //////////// */
+
this.V = this.img.setOpacity(100);
-
return {
+
diap.delLabels();
-
/* ==== initialize script ==== */
+
if (diap.S == this) {
-
create : function (div, size, zoom, border) {
+
/* ==== zoom out - grid mode on ==== */
-
/* ---- instanciate imageFlow ---- */
+
diap.S = false;
-
var load = function () {
+
diap.G = this;
-
var loaded = false;
+
for (var i = 0; i < diap.N; i++) diap.spa[i].createLabel();
-
var i = instances.length;
+
} else {
-
while (i--) if (instances[i].oCont == div) loaded = true;
+
/* ==== zoom in ==== */
-
if (!loaded) {
+
diap.S = this;
-
/* ---- push new imageFlow instance ---- */
+
this.createLabel();
-
instances.push(
+
-
new ImageFlow(div, size, zoom, border)
+
-
);
+
-
/* ---- init script (once) ---- */
+
-
if (!imf.initialized) {
+
-
imf.initialized = true;
+
-
/* ---- window resize event ---- */
+
-
addEvent(window, 'resize', function () {
+
-
var i = instances.length;
+
-
while (i--) instances[i].resize();
+
-
});
+
-
/* ---- stop drag N drop ---- */
+
-
addEvent(document.getElementById(div), 'mouseout', function (e) {
+
-
if (!e) e = window.event;
+
-
var tg = e.relatedTarget || e.toElement;
+
-
if (tg && tg.tagName == 'HTML') {
+
-
var i = instances.length;
+
-
while (i--) instances[i].oc.onmousemove = null;
+
-
}
+
-
return false;
+
-
});
+
-
/* ---- set interval loop ---- */
+
-
setInterval(function () {
+
-
var i = instances.length;
+
-
while (i--) instances[i].run();
+
-
}, 16);
+
}
}
 +
diap.setPosition();
}
}
 +
s.createLabel();
 +
s.ondblclick = s.onclick;
 +
s.ondrag = function () { return false; }
 +
k++;
}
}
-
/* ---- window onload event ---- */
 
-
addEvent(window, 'load', function () { load(); });
 
}
}
 +
this.N = NX * NY;
 +
/* ==== add resize event ==== */
 +
this.resize();
 +
addEvent(window, 'resize', diap.resize);
 +
/* ==== start main loop ==== */
 +
this.run();
}
}
-
}();
+
}
-
 
+
-
/* ==== create imageFlow ==== */
+
-
//          div ID    , size, zoom, border
+
-
imf.create("imageFlow", 0.15, 1.5, 10);
+
 +
/* ==== create diaporama ==== */
 +
onload = function () {
 +
/* ==== container, X, T, path, [image.src, text] ==== */
 +
diap.init("screen", 4, 4, "", [
 +
["images/08081201001.jpg", "His little voodoo was a success"],
 +
["images/08081201002.jpg", "She arrived from nowhere"],
 +
["images/08081201003.jpg", "as cute as she could be"],
 +
["images/08081201004.jpg", "It was a night of full moon"],
 +
["images/08081201005.jpg", "It didn't take him anytime to fall in love"],
 +
["images/08081201006.jpg", "He had been certain of his success"],
 +
["images/08081201008.jpg", "In a few days after"],
 +
["images/08081201009.jpg", "All the tools were in place"],
 +
["images/08081201010.jpg", "The girl left a note..."],
 +
["images/08081201011.jpg", "...saying she had left home"],
 +
["images/08081201012.jpg", "揝o what抯 with the panic??"],
 +
["images/08081201013.jpg", "Tears for fears"],
 +
["images/08081201014.jpg", "A light in the dark"],
 +
["images/08081204wi2.jpg", "Flashes of pain and hope"],
 +
["images/08081201001.jpg", "If only we could capture..."],
 +
["images/08081204wi19.jpg", "...the beauty of autumn"]
 +
]);
 +
}
</script>
</script>
</head>
</head>
Line 446: Line 368:
<body>
<body>
-
<div id="imageFlow">
+
<div id="screen">
-
<div class="top">
+
-
</div>
+
-
<div class="bank">
+
-
<a rel="src="/wiki/images/e/e6/Whu-1.jpg"" title="Myselves" href="http://www.jscode.cn/">
+
-
My identity lies in not knowing who I am</a>
+
-
<a rel="src="/wiki/images/e/e6/Whu-1.jpg"" title="Discoveries" href="http://www.jscode.cn/">
+
-
...are made by not following instructions</a>
+
-
<a rel="src="/wiki/images/e/e6/Whu-1.jpg"" title="Nothing" href="http://jscode.cn/">
+
-
...can come between us</a>
+
-
<a rel="src="/wiki/images/e/e6/Whu-1.jpg"" title="New life" href="http://www.jscode.cn/">
+
-
Here you come!</a>
+
-
<a rel="src="/wiki/images/e/e6/Whu-1.jpg"" title="Optimists" href="http://www.html.org.cn/">
+
-
They don&#39;t know all the facts yet</a>
+
-
<a rel="src="/wiki/images/e/e6/Whu-1.jpg"" title="Empathy" href="http://www.jscode.cn/">
+
-
Emotional intimacy</a>
+
-
<a rel="src="/wiki/images/e/e6/Whu-1.jpg"" title="Much work" href="http://www.jscode.cn/">
+
-
...remains to be done before we can announce our total failure to make any
+
-
progress</a>
+
-
<a rel="src="/wiki/images/e/e6/Whu-1.jpg"" title="System error" href="http://www.jscode.cn/">
+
-
Errare Programma Est</a>
+
-
<a rel="src="/wiki/images/e/e6/Whu-1.jpg"" title="Nonexistance" href="http://bbs.html.org.cn/">
+
-
There&#39;s no such thing</a>
+
-
<a rel="src="/wiki/images/e/e6/Whu-1.jpg"" title="Inside" href="http://www.jscode.cn/">
+
-
I抦 now trapped, without hope of escape or rescue</a>
+
-
<a rel="src="/wiki/images/e/e6/Whu-1.jpg"" title="E-Slaves" href="http://www.luwei.net.cn/">
+
-
The World is flat</a>
+
-
<a rel="src="/wiki/images/e/e6/Whu-1.jpg"" title="l0v3" href="http://www.jscode.cn/">
+
-
1 l0v3 j00 - f0r3v3r</a>
+
-
<a rel="src="/wiki/images/e/e6/Whu-1.jpg"" title="T minus zero" href="http://www.jscode.cn/">
+
-
111 111 111 x 111 111 111 = 12345678987654321</a>
+
-
<a rel="src="/wiki/images/e/e6/Whu-1.jpg"" title="The End" href="http://www.jscode.cn/">
+
-
...has not been written yet</a> </div>
+
-
<div class="text">
+
-
<div class="title">
+
-
Loading</div>
+
-
<div class="legend">
+
-
Please wait...</div>
+
-
</div>
+
-
<div class="scrollbar">
+
-
<img class="track" src="images/08081201sb.gif" alt="">
+
-
<img class="arrow-left" src="images/08081201sl.gif" alt="">
+
-
<img class="arrow-right" src="images/08081201sr.gif" alt="">
+
-
<img class="bar" src="images/08081201sc.gif" alt=""> </div>
+
</div>
</div>
 +
<img id="loading" alt="" src="or11.jpg" style="visibility: hidden">
</body>
</body>
</html>
</html>

Revision as of 07:41, 2 October 2011

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 超酷超绚精美图片展示效果代码(九) - 网页特效观止-网页特效代码|JsCode.CN|

Retrieved from "http://2011.igem.org/Team:WHU-China/Team/Gallary"