Team:XMU-China/photogallery

From 2012.igem.org

(Difference between revisions)
 
(48 intermediate revisions not shown)
Line 1: Line 1:
-
<html xmlns="http://www.w3.org/1999/xhtml">
+
<html>
<head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<title>无标题文档</title>
+
<style>
-
<style type="text/css">
+
-
 
+
-
#PhotoDescription  div {
+
-
color: #FFF;
+
-
overflow:hidden;
+
-
width:250px;height:200px;
+
-
position:absolute;
+
-
left:25px;
+
-
top:25px;
+
-
margin-top:110px;
+
 +
.slide-wp {
 +
width: 900px;
 +
height: 300px;
 +
overflow: hidden;
 +
position: relative;
 +
left: 25px;
 +
top: 25px;
 +
z-index: -1;
}
}
 +
.nav-wp {
 +
position: relative;
 +
top: 0px;
 +
left: 396px;
 +
border-radius: 4px;
 +
-moz-border-radius: 4px;
 +
-webkit-border-radius: 4px;
 +
_padding: 0 10px 2px 10px;
 +
background-color: #0099cc;
 +
padding-top: 0;
 +
padding-right: 10px;
 +
padding-bottom: 6px;
 +
padding-left: 10px;
 +
height: 22px;
 +
width: 150px;
 +
text-align: center;
 +
z-index: -1;
 +
}
 +
.nav li {
 +
float: left;
 +
margin-left: 10px;
 +
font-size: 20px;
 +
font-weight: bold;
 +
font-family: tahoma;
 +
color: #004f7c;
 +
cursor: pointer;
 +
height: 22px;
 +
width: auto;
 +
}
 +
.nav li.cur{
 +
color: #fc49b6;
 +
width: auto;
 +
}
 +
.next {
 +
position:absolute;
 +
top: 0;
 +
left: 160px;
 +
padding: 4px 8px;
 +
color: #fff;
 +
height: 20px;
 +
border-radius: 4px;
 +
-moz-border-radius: 4px;
 +
-webkit-border-radius: 4px;
 +
cursor: pointer;
 +
background-color: #0099cc;
 +
font-weight: normal;
 +
font-size: 14px;
 +
overflow: hidden;
 +
}
 +
#photogallery{
 +
border:0;
 +
z-index:-4;
 +
background:#F00;
 +
visibility:hidden;
 +
}
 +
#photogallery tr {
 +
background-color: #0F0;
 +
z-index: -4;
 +
visibility:hidden;
 +
}
 +
#photogallery tr td {
 +
background-color: #00F;
 +
z-index: -4;
 +
visibility:hidden;
 +
}
 +
</style>
</style>
</head>
</head>
-
 
<body>
<body>
-
<table width="900" border="0" cellspacing="0" cellpadding="0" style="margin-left:25px">
 
-
  <caption>&nbsp;
 
-
  </caption>
 
-
  <tr>
 
-
 
 
-
 
 
-
  <!--photos -->
 
-
    <td width="610" height="253"><div id="photo">
 
-
  <script>
 
-
var widths=612;
 
-
var heights=253;
 
-
var counts=6;
 
-
img1=new Image ();img1.src='https://static.igem.org/mediawiki/2012/9/91/Outlook.jpg';
 
-
img2=new Image ();img2.src='https://static.igem.org/mediawiki/2012/3/3e/IMG_0644.jpg';
 
-
img3=new Image ();img3.src='https://static.igem.org/mediawiki/2012/a/a0/Xmu_photo_001.jpg';
 
-
img4=new Image ();img4.src='https://static.igem.org/mediawiki/2012/8/82/IMG_0673.jpg';
 
-
img5=new Image ();img5.src='https://static.igem.org/mediawiki/2012/c/c2/IMG_0680.jpg';
 
-
img6=new Image ();img6.src='https://static.igem.org/mediawiki/2012/4/49/IMG_0699.jpg';
 
-
url1=new Image ();url1.src='https://static.igem.org/mediawiki/2012/9/91/Outlook.jpg';
 
-
url2=new Image ();url2.src='https://static.igem.org/mediawiki/2012/3/3e/IMG_0644.jpg';
 
-
url3=new Image ();url3.src='https://static.igem.org/mediawiki/2012/a/a0/Xmu_photo_001.jpg';
 
-
url4=new Image ();url4.src='https://static.igem.org/mediawiki/2012/8/82/IMG_0673.jpg';
 
-
url5=new Image ();url5.src='https://static.igem.org/mediawiki/2012/c/c2/IMG_0680.jpg';
 
-
url6=new Image ();url6.src='https://static.igem.org/mediawiki/2012/4/49/IMG_0699.jpg';
 
-
var nn=1;
+
<div id="slider" class="slide-wp">
-
var key=0;
+
<ul>
-
function change_img()
+
<li><a href="https://static.igem.org/mediawiki/2012/e/ea/XMUIMG_1429.jpg" target="_blank"><img src="https://static.igem.org/mediawiki/2012/e/ea/XMUIMG_1429.jpg" width="900" height="300"></a></li>
-
{if(key==0){key=1;}
+
<li><a href="https://static.igem.org/mediawiki/2012/a/a0/Xmu_photo_001.jpg" target="_blank"><img src="https://static.igem.org/mediawiki/2012/a/a0/Xmu_photo_001.jpg" width="900" height="300"></a></li>
-
else if(document.all)
+
<li><a href="https://static.igem.org/mediawiki/2012/d/d0/XMUIMG_1060.jpg" target="_blank"><img src="https://static.igem.org/mediawiki/2012/d/d0/XMUIMG_1060.jpg" width="900" height="300"></a></li>
-
{document.getElementById("pic").filters[0].Apply();document.getElementById("pic").filters[0].Play(duration=2);}
+
<li><a href="https://static.igem.org/mediawiki/2012/4/49/IMG_0699.jpg" target="_blank"><img src="https://static.igem.org/mediawiki/2012/3/34/XMUIMG_1220.JPG" width="900" height="300"></a></li>
-
eval('document.getElementById("pic").src=img'+nn+'.src');
+
<li><a href="https://static.igem.org/mediawiki/2012/f/f0/XMUIMG_0995.jpg" target="_blank"><img src="https://static.igem.org/mediawiki/2012/f/f0/XMUIMG_0995.jpg" width="900" height="300"></a></li>
-
eval('document.getElementById("url").href=url'+nn+'.src');
+
</ul>
-
for (var i=1;i<=counts;i++){document.getElementById("xxjdjj"+i).className='axx';}
+
</div>
-
document.getElementById("xxjdjj"+nn).className='bxx';
+
<div class="nav-wp">
-
nn++;if(nn>counts){nn=1;}
+
<ul id="nav" class="nav">
-
tt=setTimeout('change_img()',2000);}
+
<li onClick="mySlider.pos(0)">●</li>
-
function changeimg(n){nn=n;window.clearInterval(tt);change_img();}
+
<li onClick="mySlider.pos(1)">●</li>
-
document.write('<style>');
+
<li onClick="mySlider.pos(2)">●</li>
-
document.write('.axx{padding:1px 7px;border-left:#cccccc 1px solid;}');
+
<li onClick="mySlider.pos(3)">●</li>
-
document.write('a.axx:link,a.axx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#666;}');
+
<li onClick="mySlider.pos(4)">●</li>
-
document.write('a.axx:active,a.axx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#999;}');
+
</ul>
-
document.write('.bxx{padding:1px 7px;border-left:#cccccc 1px solid;}');
+
<a class="next" onClick="mySlider.move()">>>next</a>
-
document.write('a.bxx:link,a.bxx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}');
+
</div>
-
document.write('a.bxx:active,a.bxx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}');
+
-
document.write('</style>');
+
-
document.write('<div style="width:'+widths+'px;height:'+heights+'px;overflow:hidden;text-overflow:clip;">');
+
-
document.write('<div><a id="url"><img id="pic" style="border:0px;filter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward)" width='+widths+' height='+heights+' /></a></div>');
+
-
document.write('<div style="filter:alpha(style=1,opacity=10,finishOpacity=80);background: #888888;width:100%-2px;text-align:right;top:-12px;position:relative;margin:1px;height:12px;padding:0px;margin:0px;border:0px;">');
+
-
for(var i=1;i<counts+1;i++){document.write('<a href="javascript:changeimg('+i+');" id="xxjdjj'+i+'" class="axx" target="_self">'+i+'</a>');}
+
-
document.write('</div></div>');
+
-
change_img();
+
-
</script>
+
-
  </div></td>
+
-
    <!--photos -->
+
-
   
+
-
    <!--description -->
+
-
    <td width="290" height="253" bgcolor="#FC49B4"><div id="PhotoDescription" >
+
<script type="text/javascript">
<script type="text/javascript">
-
var tc;
+
var HR = {
-
window.onload=function(){
+
$ : function(i) {return document.getElementById(i)},
-
var o=document.getElementById('wwwzzjsnet');hscroll(o);
+
  $$ : function(c, p) {return p.getElementsByTagName(c)},
-
  window.setInterval(function(){window.clearTimeout(tc);o.firstChild.style.marginLeft='0px';scrollup(o,20,0);},2000);
+
ce : function(i, t) {
-
}
+
   var o = document.createElement(i);
-
function scrollup(o,d,c){
+
   t.appendChild(o);
-
if(d==c){
+
   return o;
-
   var t=o.firstChild.cloneNode(true);
+
-
   o.removeChild(o.firstChild);o.appendChild(t);
+
-
   t.style.marginTop=o.firstChild.style.marginTop='0px';
+
-
  hscroll(o);
+
  }
  }
-
  else{
+
};
-
   ch=false;var s=3,c=c+s,l=(c>=d?c-d:0);
+
HR.slider3D = function () {
-
   o.firstChild.style.marginTop=-c+l+'px';
+
  var init = function (o) {
-
   window.setTimeout(function(){scrollup(o,d,c-l)},50);
+
   this.o = o;
 +
  var wp = HR.$(o.id), ul = HR.$$('ul', wp)[0], li = this.li = HR.$$('li', ul);
 +
  this.l = li.length;
 +
  this.w = wp.offsetWidth;
 +
  this.h = wp.offsetHeight;
 +
  this.at = o.auto? o.auto : 4;
 +
   var con = this.con = HR.ce('div', wp);
 +
  con.style.cssText = 'position:absolute;left:0;top:0;width:'+this.w+'px;height:'+this.h+'px';
 +
   ul.style['display'] = 'none'; 
 +
  this.a1 = HR.ce('a', con); 
 +
  this.a1.style.cssText = 'position:absolute;left:0;top:0;overflow:hidden'; 
 +
  this.a2 = HR.ce('a', con);
 +
  this.a2.style.cssText = 'position:absolute;top:0;right:0;overflow:hidden';
 +
  this.a1.innerHTML = this.a2.innerHTML = '<img alt="" />';
 +
  this.img = HR.$$('img', ul);
 +
  this.s = o.maskSize ? o.maskSize : 5;
 +
 
 +
  this.mask11 = HR.ce('span', this.a1);
 +
  this.mask12 = HR.ce('span', this.a1);
 +
  this.mask21 = HR.ce('span', this.a2);
 +
  this.mask22 = HR.ce('span', this.a2);
 +
 
 +
  this.pos(0);
  }
  }
-
}
+
init.prototype = {
-
function hscroll(o){
+
  pos : function (i) {
-
var w1=o.firstChild.offsetWidth,w2=o.offsetWidth;
+
  clearInterval(this.li[i].a); clearInterval(this.au); this.au = 0; this.cur = i;
-
if(w1<=w2)return;
+
  var navli = HR.$$('li', HR.$(this.o.navId));
-
tc=window.setTimeout(function(){hs(o,w1-w2,0,w1-w2)},3500);
+
  for (var j=0; j<navli.length; j++) {
-
}
+
    navli[j].className = i == j ? 'cur' : '';
-
function hs(o,d,c,p){
+
  }
-
c++;var t=(c>0?-c:c);o.firstChild.style.marginLeft=t+'px';
+
  var img1 = HR.$$('img', this.a1)[0], img2 = HR.$$('img', this.a2)[0], _this = this;
-
if(c==d){if(d==0){tc=window.setTimeout(function(){hs(o,p,0,p)},2500);}else tc=window.setTimeout(function(){hs(o,0,-p,p)},3500);}
+
  img1.src = i==0 ? this.img[this.l-1].src : this.img[i-1].src;
-
else tc=window.setTimeout(function(){hs(o,d,c,p)},5);
+
  img1.width = this.w;
-
}
+
  img2.src = this.img[i].src;
-
</script>
+
  img2.width = 0;
-
<div id="wwwzzjsnet"><div>LABORATORY CONCERT</div><div>REAGENT BOTTLES</div><div>MASCOT FOR IGEM </div><div>DISCUSSION</div><div>CENTRIFUGAL TUBE </div><div>CELL IMMOBILIZATION </div></div>
+
  img1.height = img2.height = this.h;
-
</div></td>
+
  this.mask11.style.cssText = 'position:absolute;left:0;top:0;font-size:0;overflow:hidden;width:0;height:0;border-color:black transparent transparent black;border-style:solid dashed dashed solid;border-width:0 '+this.w/2+'px';
-
<!--description -->
+
  this.mask12.style.cssText = 'position:absolute;left:0;bottom:0;font-size:0;overflow:hidden;width:0;height:0;border-color:transparent transparent black black;border-style:dashed dashed solid solid;border-width:0 '+this.w/2+'px';
-
 
+
  this.mask21.style.cssText = 'position:absolute;right:0;top:0;font-size:0;overflow:hidden;width:0;height:0;border-color:black black transparent transparent;border-style:solid solid dashed dashed;border-width:0px';
-
 
+
  this.mask22.style.cssText = 'position:absolute;right:0;bottom:0;font-size:0;overflow:hidden;width:0;height:0;border-color:transparent black black transparent;border-style:dashed solid solid dashed;border-width:0px';
-
<!--<div id="wwwzzjsnet">
+
  this.li[i].a = setInterval(function(){_this.anim(i)}, 20);
-
<div>LABORATORY CONCERT</div><div>REAGENT BOTTLES corner of lab</div>
+
  },
-
<div>MASCOT FOR IGEM 2012 XMU-China</div>
+
  anim : function (i) {
-
<div>DISCUSSION design group talking over logo</div>
+
  var w1 = HR.$$('img', this.a1)[0].width, w2  = HR.$$('img', this.a2)[0].width;
-
<div>CENTRIFUGAL TUBE joining special chemistry</div>
+
  if (w2 == this.w) {
-
<div>CELL IMMOBILIZATION sodium alginatebead</div></div>
+
    clearInterval(this.li[i].a);
-
</div></td>
+
    HR.$$('img', this.a1)[0].width = 0;
-
-->
+
    HR.$$('img', this.a2)[0].width = this.w;
 +
    this.mask11.style.borderLeftWidth = this.mask11.style.borderRightWidth = this.mask12.style.borderLeftWidth = this.mask12.style.borderRightWidth = '0px';
 +
    this.mask11.style.borderTopWidth = this.mask11.style.borderBottomWidth = this.mask12.style.borderTopWidth = this.mask12.style.borderBottomWidth = this.h/this.s + 'px';
 +
    this.mask21.style.borderLeftWidth = this.mask21.style.borderRightWidth = this.mask22.style.borderLeftWidth = this.mask22.style.borderRightWidth = this.w/2 + 'px';
 +
    this.mask21.style.borderTopWidth = this.mask21.style.borderBottomWidth = this.mask22.style.borderTopWidth = this.mask22.style.borderBottomWidth = '0px';
 +
  }else {
 +
    HR.$$('img', this.a1)[0].width -= Math.ceil((this.w-w2)*.13);
 +
    HR.$$('img', this.a2)[0].width += Math.ceil((this.w-w2)*.13);
 +
    this.mask11.style.borderLeftWidth = this.mask11.style.borderRightWidth = this.mask12.style.borderLeftWidth = this.mask12.style.borderRightWidth = HR.$$('img', this.a1)[0].width/2 + 'px';
 +
    this.mask11.style.borderTopWidth = this.mask11.style.borderBottomWidth = this.mask12.style.borderTopWidth = this.mask12.style.borderBottomWidth = HR.$$('img', this.a2)[0].width*this.h/(this.s*this.w) + 'px';
 +
    this.mask21.style.borderLeftWidth = this.mask21.style.borderRightWidth = this.mask22.style.borderLeftWidth = this.mask22.style.borderRightWidth = HR.$$('img', this.a2)[0].width/2 + 'px';
 +
    this.mask21.style.borderTopWidth = this.mask21.style.borderBottomWidth = this.mask22.style.borderTopWidth = this.mask22.style.borderBottomWidth = this.h/this.s - HR.$$('img', this.a2)[0].width*this.h/(this.s*this.w) + 'px';
 +
    if (!this.au) this.auto();
 +
  }
 +
  },
 +
  auto : function () {
 +
  var _this = this;
 +
  this.au = setInterval(function(){_this.move()}, this.at*1000);
 +
  },
 +
  move : function () {
 +
  var n = this.cur==this.l-1 ? 0 : this.cur+1;
 +
  this.pos(n);
 +
  }
 +
}
 +
return init;
 +
}();
 +
var mySlider = new HR.slider3D({
 +
id: 'slider',
 +
maskSize: 6,
 +
navId: 'nav',
 +
auto: 4
 +
})</script>
-
  </tr>
 
-
</table>
 
</body>
</body>
</html>
</html>

Latest revision as of 19:17, 26 September 2012

Retrieved from "http://2012.igem.org/Team:XMU-China/photogallery"