Team:WHU-China/Team/Gallary

From 2011.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<html>
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 +
<html xmlns="http://www.w3.org/1999/xhtml">
 +
 
<head>
<head>
-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
+
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
-
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+
<title>超酷超绚精美图片展示效果代码(三) - 网页特效观止-网页特效代码|JsCode.CN|</title>
-
<script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script>
+
<style type="text/css">
<style type="text/css">
-
#countdown
 
-
{
 
-
display:none;
 
-
}
 
-
#visit
 
-
{
 
-
display:none;
 
-
}
 
-
#demo
 
-
{
 
-
position:relative;
 
-
top:15px;
 
-
height:260px;
 
-
width:1000px;
 
-
left:0px;
 
-
overflow:hidden;
 
-
}
 
-
#demo img {
 
-
top:20px;
 
-
height:260px;
 
-
width:300px;
 
-
}
 
-
#indemo {
 
-
float: left;
 
-
width: 800%;
 
-
}
 
-
#demo1 {
 
-
float: left;
 
-
}
 
-
#demo2 {
 
-
padding:0px 3px;
 
-
float: left;
 
-
}
 
-
#footer-box
 
-
{
 
-
position:absolute;
 
-
top:2000px;
 
-
}
 
-
.team_images img
 
-
{
 
-
height:280px;
+
 
-
}
+
#diapoContainer {
-
#preview_images
+
-
{
+
-
position:relative;
+
-
top:20px;
+
-
background:transparent;
+
-
height:600px;
+
-
left:10px;
+
-
width:980px;
+
-
}
+
-
#screen {
+
position: absolute;
position: absolute;
-
top: 1%;
+
left: 10%;
-
left: 1%;
+
top: 10%;
-
width: 98%;
+
width: 80%;
-
height: 98%;
+
height: 80%;
-
background: #000;
+
background: #222;
-
color: #fff;
+
overflow: hidden;
}
}
-
#screen div {
+
 
 +
.imgDC {
position: absolute;
position: absolute;
-
overflow: hidden;
 
cursor: pointer;
cursor: pointer;
 +
border: #000 solid 2px;
 +
filter: alpha(opacity=90);
 +
opacity: 0.9;
 +
visibility: hidden;
}
}
-
#screen img {
+
 
 +
.spaDC {
 +
position: absolute;
 +
filter: alpha(opacity=20);
 +
opacity: 0.2;
 +
background: #000;
 +
visibility: hidden;
 +
}
 +
 
 +
.imgsrc {
 +
position: absolute;
 +
width: 120px;
 +
height: 67px;
 +
visibility: hidden;
 +
margin: 4%;
 +
}
 +
 
 +
#bkgcaption {
position: absolute;
position: absolute;
 +
bottom: 0px;
 +
left: 0px;
width: 100%;
width: 100%;
-
height: 100%;
+
height: 6%;
 +
background:#1a1a1a;
}
}
-
#screen .label {
+
#caption {
position: absolute;
position: absolute;
-
color: #FFF;
+
font-family: arial, helvetica, verdana, sans-serif;
-
background: #000;
+
white-space: nowrap;
-
font-family: arial;
+
color: #fff;
-
white-space: no-wrap;
+
bottom: 0px;
 +
width: 100%;
 +
left: -10000px;
 +
text-align: center;
}
}
 +
</style>
</style>
<script type="text/javascript">
<script type="text/javascript">
-
// ================================
+
var xm;
-
// DHTML mini library
+
var ym;
-
// Gerard Ferrandez - January 2007
+
-
// http://www.dhteumeuleu.com
+
-
// ================================
+
-
id = function(o) {
+
/* ==== onmousemove event ==== */
-
return document.getElementById(o);
+
document.onmousemove = function(e){
 +
if(window.event) e=window.event;
 +
xm = (e.x || e.clientX);
 +
ym = (e.y || e.clientY);
}
}
-
px = function (x) {
+
/* ==== window resize ==== */
-
return ''.concat(Math.round(x), 'px');
+
function resize() {
 +
if(diapo)diapo.resize();
}
}
 +
onresize = resize;
-
pxLeft = function(o) {
+
/* ==== opacity ==== */
-
for (var x = 0; o != null; o = o.offsetParent) x += o.offsetLeft;
+
setOpacity = function(o, alpha){
-
return x;
+
if(o.filters)o.filters.alpha.opacity = alpha * 100; else o.style.opacity = alpha;
}
}
-
pxTop = function(o) {
 
-
for (var x = 0; o != null; o = o.offsetParent) x += o.offsetTop;
 
-
return x;
 
-
}
 
-
/* ==== DOM 2 add event ==== */
+
////////////////////////////////////////////////////////////////////////////////////////////
-
addEvent = function (o, e, f) {
+
/* ===== encapsulate script ==== */
-
var r = false;
+
diapo = {
-
if (window.addEventListener) {
+
O : [],
-
o.addEventListener(e, f, false);
+
DC : 0,
-
r = true;
+
img : 0,
-
} else if (window.attachEvent) {
+
txt : 0,
-
r = o.attachEvent('on' + e, f);
+
N : 0,
-
}
+
xm : 0,
-
return r;
+
ym : 0,
-
}
+
nx : 0,
-
</script>
+
ny : 0,
-
<script type="text/javascript">
+
nw : 0,
-
// ========================================================
+
nh : 0,
-
//            ====== Javascript Slideshow ======
+
rs : 0,
-
// script written by Gerard Ferrandez - December 31, 2006
+
rsB : 0,
-
// http://www.dhteumeuleu.com/
+
zo : 0,
-
// ========================================================
+
tx_pos : 0,
 +
tx_var : 0,
 +
tx_target : 0,
-
var diap = {
+
/////// script parameters ////////
-
/////////////////////////////////
+
attraction : 2,
-
BR : 3,     // border size in px
+
acceleration : .9,
-
ZR : .75,   // zoom ratio
+
dampening : .1,
-
SP : .1,   // speed
+
zoomOver : 2,
-
/////////////////////////////////
+
zoomClick : 6,
-
V : false,
+
transparency : .8,
-
S : false,
+
font_size: 18,
-
G : true,
+
//////////////////////////////////
-
resize : function () {
+
/* ==== diapo resize ==== */
-
/* ==== window resize event ==== */
+
resize : function(){
-
diap.nw = diap.scr.offsetWidth;
+
with(this){
-
diap.nh = diap.scr.offsetHeight;
+
nx = DC.offsetLeft;
-
diap.nwu = (diap.nw * diap.ZR);
+
ny = DC.offsetTop;
-
diap.nhu = (diap.nh * diap.ZR);
+
nw = DC.offsetWidth;
-
diap.nwt = Math.floor((diap.nw * (1 - diap.ZR) * .5) / (diap.NX - 1)) - diap.BR;
+
nh = DC.offsetHeight;
-
diap.nht = Math.floor((diap.nh * (1 - diap.ZR) * .5) / (diap.NY - 1)) - diap.BR;
+
txt.style.fontSize = Math.round(nh / font_size) + "px";
-
diap.rc  = 255 / ((diap.nw / diap.NX) - diap.nwt);
+
if(Math.abs(rs-rsB)<100) for(var i=0; i<N; i++) O[i].resize();
-
if (diap.N) {
+
rsB = rs;
-
diap.setPosition();
+
-
if (!diap.G) diap.delLabels();
+
}
}
},
},
-
setPosition : function () {
+
/* ==== create diapo ==== */
-
/* ==== calculate image target position  ==== */
+
CDiapo : function(o){
-
var k = 0;
+
/* ==== init variables ==== */
-
var y = this.S ? this.BR + Math.floor((this.NY - this.Y - 1) * (this.nht + this.BR)) : 0;
+
this.o        = o;
-
for (var j = 0; j < this.NY; j++) {
+
this.x_pos    = this.y_pos    = 0;
-
var x = this.S ? this.BR + Math.floor((this.NX - this.X - 1) * (this.nwt + this.BR)) : 0;
+
this.x_origin = this.y_origin = 0;
-
for (var i = 0; i < this.NX; i++) {
+
this.x_var    = this.y_var    = 0;
-
var o = this.spa[k++];
+
this.x_target = this.y_target = 0;
-
o.y1 = y;
+
this.w_pos    = this.h_pos    = 0;
-
o.x1 = x;
+
this.w_origin = this.h_origin = 0;
-
o.w1 = this.S ? (o == this.S ? this.nwu - this.BR : this.nwt) : Math.ceil(this.nw / this.NX) - this.BR;
+
this.w_var    = this.h_var    = 0;
-
o.h1 = this.S ? (o == this.S ? this.nhu - this.BR : this.nht) : Math.ceil(this.nh / this.NY) - this.BR;
+
this.w_target = this.h_target = 0;
-
x += this.S ? ((this.X == i) ? this.nwu : this.nwt + this.BR) : Math.ceil(this.nw / this.NX);
+
this.over    = false;
 +
this.click    = false;
 +
 
 +
/* ==== create shadow ==== */
 +
this.spa = document.createElement("span");
 +
this.spa.className = "spaDC";
 +
diapo.DC.appendChild(this.spa);
 +
 
 +
/* ==== create thumbnail image ==== */
 +
this.img = document.createElement("img");
 +
this.img.className = "imgDC";
 +
this.img.src = o.src;
 +
this.img.O = this;
 +
diapo.DC.appendChild(this.img);
 +
setOpacity(this.img, diapo.transparency);
 +
 
 +
/* ==== mouse events ==== */
 +
this.img.onselectstart = new Function("return false;");
 +
this.img.ondrag = new Function("return false;");
 +
this.img.onmouseover = function(){
 +
diapo.tx_target=0;
 +
diapo.txt.innerHTML=this.O.o.alt;
 +
this.O.over=true;
 +
setOpacity(this,this.O.click?diapo.transparency:1);
 +
}
 +
this.img.onmouseout = function(){
 +
diapo.tx_target=-diapo.nw;
 +
this.O.over=false;
 +
setOpacity(this,diapo.transparency);
 +
}
 +
this.img.onclick = function() {
 +
if(!this.O.click){
 +
if(diapo.zo && diapo.zo != this) diapo.zo.onclick();
 +
this.O.click = true;
 +
this.O.x_origin = (diapo.nw - (this.O.w_origin * diapo.zoomClick)) / 2;
 +
this.O.y_origin = (diapo.nh - (this.O.h_origin * diapo.zoomClick)) / 2;
 +
diapo.zo = this;
 +
setOpacity(this,diapo.transparency);
 +
} else {
 +
this.O.click = false;
 +
this.O.over = false;
 +
this.O.resize();
 +
diapo.zo = 0;
}
}
-
y += this.S ? ((this.Y == j) ? this.nhu : this.nht + this.BR) : Math.ceil(this.nh / this.NY);
 
}
}
-
},
 
-
delLabels : function () {
+
/* ==== rearrange thumbnails based on "imgsrc" images position ==== */
-
/* ==== remove texts ==== */
+
this.resize = function (){
-
for ( var i = 0; i < diap.N; i++) {
+
with (this) {
-
var o = diap.spa[i];
+
x_origin = o.offsetLeft;
-
if (o.T) diap.scr.removeChild(o.T);
+
y_origin = o.offsetTop;
-
o.T = false;
+
w_origin = o.offsetWidth;
 +
h_origin = o.offsetHeight;
 +
}
}
}
-
},
 
-
 
-
run : function () {
 
-
/* ==== main loop ==== */
 
-
for ( var i = 0; i < diap.N; i++) diap.spa[i].move();
 
-
setTimeout(diap.run, 16);
 
-
},
 
-
 
-
init : function (container, NX, NY, path, images) {
 
-
/* ==== initialize script ==== */
 
-
this.scr = id(container);
 
-
if (!this.scr || NX * NY != images.length) { alert('ID-10-T error...'); return false; }
 
-
this.NX = NX;
 
-
this.NY = NY;
 
-
this.spa = {};
 
-
this.resize();
 
-
var k = 0;
 
-
for (var y = 0; y < this.NY; y++) {
 
-
for (var x = 0; x < this.NX; x++) {
 
-
/* ==== create HTML elements ==== */
 
-
var s = this.spa[k] = document.createElement('div');
 
-
s.img = document.createElement('img');
 
-
/* ==== opacity optimized function ==== */
+
/* ==== animation function ==== */
-
s.img.setOpacity = function (alpha) {
+
this.position = function (){
-
if (alpha < 0) alpha = 0; else if (alpha > 100) alpha = 100;
+
with (this) {
-
if (alpha == 100) {
+
/* ==== set target position ==== */
-
/* ==== speed opt - remove IE filter ==== */
+
w_target = w_origin;
-
this.style.visibility = 'visible';
+
h_target = h_origin;
-
this.style.filter = '';
+
if(over){
-
this.style.opacity = 1;
+
/* ==== mouse over ==== */
-
return 100;
+
w_target = w_origin * diapo.zoomOver;
-
} else if (alpha == 0) {
+
h_target = h_origin * diapo.zoomOver;
-
/* ==== hide image, remove opacity ==== */
+
x_target = diapo.xm - w_pos / 2 - (diapo.xm - (x_origin + w_pos / 2)) / (diapo.attraction*(click?10:1));
-
this.style.visibility = 'hidden';
+
y_target = diapo.ym - h_pos / 2 - (diapo.ym - (y_origin + h_pos / 2)) / (diapo.attraction*(click?10:1));
-
this.style.filter = '';
+
} else {
-
this.style.opacity = 0;
+
/* ==== mouse out ==== */
-
return 0;
+
x_target = x_origin;
-
}
+
y_target = y_origin;
-
if (this.filters) {
+
}
-
/* ==== IE filter ==== */
+
if(click){
-
if (!this.filters.alpha) this.style.filter = 'alpha(opacity=' + alpha + ')';
+
/* ==== clicked ==== */
-
else this.filters.alpha.opacity = alpha;
+
w_target = w_origin * diapo.zoomClick;
-
/* ==== CSS opacity ==== */
+
h_target = h_origin * diapo.zoomClick;
-
} else this.style.opacity = alpha * .01;
+
-
return alpha;
+
}
}
-
s.img.src = id('loading').src;
 
-
s.appendChild(s.img);
 
-
this.scr.appendChild(s);
 
-
/* ==== pre-load image ==== */
+
/* ==== magic spring equations ==== */
-
s.pre = new Image();
+
x_pos += x_var = x_var * diapo.acceleration + (x_target - x_pos) * diapo.dampening;
-
s.pre.obj = s;
+
y_pos += y_var = y_var * diapo.acceleration + (y_target - y_pos) * diapo.dampening;
-
s.pre.onload = function() { this.obj.img.src = this.src; }
+
w_pos += w_var = w_var * (diapo.acceleration * .5) + (w_target - w_pos) * (diapo.dampening * .5);
-
s.pre.src = path + images[k][0];
+
h_pos += h_var = h_var * (diapo.acceleration * .5) + (h_target - h_pos) * (diapo.dampening * .5);
 +
diapo.rs += (Math.abs(x_var) + Math.abs(y_var));
-
/* ==== set image variables ==== */
+
/* ==== html animation ==== */
-
s.x  = x;
+
with(img.style){
-
s.y  = y;
+
left  = Math.round(x_pos) + "px";
-
s.x0 = x * (this.nw / this.NX) + (this.nw / this.NX) / 2;
+
top    = Math.round(y_pos) + "px";
-
s.y0 = y * (this.nh / this.NY) + (this.nh / this.NY) / 2;;
+
width  = Math.round(Math.max(0, w_pos)) + "px";
-
s.x1 = x * (this.nw / this.NX);
+
height = Math.round(Math.max(0, h_pos)) + "px";
-
s.y1 = y * (this.nh / this.NY);
+
zIndex = Math.round(w_pos);
-
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();
+
}
}
-
 
+
with(spa.style){
-
/* ==== display text function (typewriter FX) ==== */
+
left   = Math.round(x_pos + w_pos * .1) + "px";
-
s.dispLabel = function() {
+
top    = Math.round(y_pos + h_pos * .1) + "px";
-
if (diap.G || diap.S == this) {
+
width  = Math.round(Math.max(0, w_pos * 1.1)) + "px";
-
/* ==== zoomed image ==== */
+
height = Math.round(Math.max(0, h_pos * 1.1)) + "px";
-
this.T.style.left = px(this.x0);
+
zIndex = Math.round(w_pos);
-
this.T.style.top  = px(this.y0);
+
-
this.T.style.width = px(this.w0);
+
-
} else {
+
-
/* ==== calculate text position ==== */
+
-
var xt = diap.S.x0 + this.w0 + diap.BR;
+
-
if (this.y == diap.Y) {
+
-
this.T.style.top = px(this.y0 - this.f - diap.BR);
+
-
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);
+
-
}
+
-
}
+
-
}
+
}
}
 +
}
 +
}
 +
},
-
/* ==== create text function ==== */
+
/* ==== main loop ==== */
-
s.createLabel = function () {
+
run : function(){
-
this.T = document.createElement('div');
+
diapo.xm = xm - diapo.nx;
-
this.T.className = 'label';
+
diapo.ym = ym - diapo.ny;
-
if (!diap.G && this.x > diap.X) this.T.style.textAlign = 'right';
+
/* ==== caption anim ==== */
-
this.f = 4 + Math.round(Math.sqrt(diap.nht * 2));
+
diapo.tx_pos += diapo.tx_var = diapo.tx_var * .9 + (diapo.tx_target - diapo.tx_pos) * .02;
-
if(this == diap.S) {
+
diapo.txt.style.left = Math.round(diapo.tx_pos) + "px";
-
this.f *= 2;
+
/* ==== images anim ==== */
-
this.T.style.background = 'none';
+
for(var i in diapo.O) diapo.O[i].position();
-
this.T.style.textAlign = 'center';
+
/* ==== loop ==== */
-
}
+
setTimeout("diapo.run();", 16);
-
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 ==== */
+
/* ==== load images ==== */
-
s.onmouseover = function() {
+
images_load : function(){
-
if (diap.S != this && diap.G != this) {
+
// ===== loop until all images are loaded =====
-
/* ==== display image ==== */
+
var M = 0;
-
this.img.setOpacity(100);
+
for(var i=0; i<diapo.N; i++) {
-
this.V = this.img.setOpacity(20);
+
if(diapo.img[i].complete) {
-
}
+
diapo.img[i].style.position = "relative";
-
/* ==== create text ==== */
+
diapo.O[i].img.style.visibility = "visible";
-
if (!this.T) this.createLabel();
+
diapo.O[i].spa.style.visibility = "visible";
-
diap.V = this;
+
M++;
-
}
+
-
 
+
-
/* ==== on click event ==== */
+
-
s.onclick = function() {
+
-
/* ==== memorize selected image ==== */
+
-
diap.X = this.x;
+
-
diap.Y = this.y;
+
-
diap.V = false;
+
-
diap.G = false;
+
-
this.V = this.img.setOpacity(100);
+
-
diap.delLabels();
+
-
if (diap.S == this) {
+
-
/* ==== zoom out - grid mode on ==== */
+
-
diap.S = false;
+
-
diap.G = this;
+
-
for (var i = 0; i < diap.N; i++) diap.spa[i].createLabel();
+
-
} else {
+
-
/* ==== zoom in ==== */
+
-
diap.S = this;
+
-
this.createLabel();
+
-
}
+
-
diap.setPosition();
+
-
}
+
-
s.createLabel();
+
-
s.ondblclick = s.onclick;
+
-
s.ondrag = function () { return false; }
+
-
k++;
+
}
}
 +
resize();
}
}
-
this.N = NX * NY;
+
if(M<diapo.N) setTimeout("diapo.images_load();", 128);
-
/* ==== add resize event ==== */
+
},
-
this.resize();
+
 
-
addEvent(window, 'resize', diap.resize);
+
/* ==== init script ==== */
-
/* ==== start main loop ==== */
+
init : function() {
-
this.run();
+
diapo.DC = document.getElementById("diapoContainer");
 +
diapo.img = diapo.DC.getElementsByTagName("img");
 +
diapo.txt = document.getElementById("caption");
 +
diapo.N = diapo.img.length;
 +
for(i=0; i<diapo.N; i++) diapo.O.push(new diapo.CDiapo(diapo.img[i]));
 +
diapo.resize();
 +
diapo.tx_pos = -diapo.nw;
 +
diapo.tx_target = -diapo.nw;
 +
diapo.images_load();
 +
diapo.run();
}
}
}
}
-
/* ==== create diaporama ==== */
 
-
onload = function () {
 
-
/* ==== container, X, T, path, [image.src, text] ==== */
 
-
diap.init("screen", 4, 4, "", [
 
-
["https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg", "His little voodoo was a success"],
 
-
["https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg", "She arrived from nowhere"],
 
-
["https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg", "as cute as she could be"],
 
-
["https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg", "It was a night of full moon"],
 
-
["https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg", "It didn't take him anytime to fall in love"],
 
-
["https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg", "He had been certain of his success"],
 
-
["https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg", "In a few days after"],
 
-
["https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg", "All the tools were in place"],
 
-
["https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg", "The girl left a note..."],
 
-
["https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg", "...saying she had left home"],
 
-
["https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg", "揝o what抯 with the panic??"],
 
-
["https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg", "Tears for fears"],
 
-
["https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg", "A light in the dark"],
 
-
["https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg", "Flashes of pain and hope"],
 
-
["https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg", "If only we could capture..."],
 
-
["https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg", "...the beauty of autumn"]
 
-
]);
 
-
}
 
</script>
</script>
 +
</head>
-
</head>
 
<body>
<body>
-
<div id="content1">
+
 
-
<div id="demo">
+
<div id="diapoContainer">
-
<div id="indemo">
+
<img class="imgsrc" src="https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg" alt="Reconsider your Existence">
-
<div id="demo1">
+
<img class="imgsrc" src="https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg" alt="Something Needs to be Discovered">
-
<a ><img src="/wiki/images/e/e6/Whu-1.jpg" border="1" /></a>
+
<img class="imgsrc" src="https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg" alt="They Said Very Little">
-
<a ><img src="/wiki/images/f/f1/Whu-4-2.jpg" border="1" /></a>
+
<img class="imgsrc" src="https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg" alt="Only in Your Mind">
-
<a ><img src="/wiki/images/c/c4/Whu-8.jpg" border="1" /></a>
+
<img class="imgsrc" src="https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg" alt="The Power of Imagination">
-
<a ><img src="/wiki/images/f/f6/Whu-10.jpg" border="1" /></a>
+
<img class="imgsrc" src="https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg" alt="Objectivity is Impossible">
-
<a ><img src="/wiki/images/6/69/Whu-13.jpg" border="1" /></a>
+
<img class="imgsrc" src="https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg" alt="Cleaning Up Operation">
-
<a ><img src="/wiki/images/e/e1/Whu-18.jpg" border="1" /></a>
+
    <img class="imgsrc" src="https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg" alt="Arbitrary Contents">
-
<a><img src="/wiki/images/4/42/Whu-32.jpg" border="1" /></a>
+
    <img class="imgsrc" src="https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg" alt="Arbitrary Contents">
-
<a ><img src="/wiki/images/f/fc/Whu-43.jpg" border="1" /></a>
+
    <img class="imgsrc" src="https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg" alt="Arbitrary Contents">
-
<a ><img src="/wiki/images/a/a8/Whu-61.jpg" border="1" /></a>
+
    <div id="bkgcaption">
-
<a><img src="/wiki/images/5/57/Whu-47.jpg" border="1" /></a>
+
</div>
 +
<div id="caption">
 +
</div>
</div>
</div>
-
<div id="demo2"></div>
+
<script type="text/javascript">
-
<script>
+
/* ==== start script ==== */
-
var speed=20;
+
function dom_onload() {
-
var tab=document.getElementById("demo");
+
if(document.getElementById("diapoContainer")) diapo.init(); else setTimeout("dom_onload();", 128);
-
var tab1=document.getElementById("demo1");
+
-
var tab2=document.getElementById("demo2");
+
-
tab2.innerHTML=tab1.innerHTML;
+
-
function Marquee(){
+
-
if(tab.scrollLeft<=0)
+
-
tab.scrollLeft+=tab2.offsetWidth
+
-
else{
+
-
tab.scrollLeft--;
+
}
}
-
}
+
dom_onload();
-
var MyMar=setInterval(Marquee,speed);
+
</script>
-
tab.onmouseover=function() {clearInterval(MyMar)};
+
-
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
+
-
 
+
-
</script>  
+
-
</div>
+
-
</div>
+
-
 
+
-
<div id="#preview_images">
+
-
<div id="screen">
+
-
</div>
+
-
<img id="loading" alt="" src="or11.jpg" style="visibility: hidden">
+
-
 
+
-
 
+
-
</div>
+
-
 
+
-
</div>
+
-
 
+
</body>
</body>
</html>
</html>
-
{{WHUcss}}
 

Revision as of 17:20, 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|

Reconsider your Existence Something Needs to be Discovered They Said Very Little Only in Your Mind The Power of Imagination Objectivity is Impossible Cleaning Up Operation Arbitrary Contents Arbitrary Contents Arbitrary Contents

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