Team:XMU-China/photogallery

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<html xmlns="http://www.w3.org/1999/xhtml">
+
<!doctype html>
 +
<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">
+
html {background:#000}
-
 
+
body, ul {margin:0;padding:0}
-
#PhotoDescription  div {
+
li {list-style:none}
-
color: #FFF;
+
img {border:none;display:block}
-
overflow:hidden;
+
.slide-wp {
-
width:250px;height:200px;
+
width: 900px;
-
position:relative;
+
height: 300px;
-
left:25px;
+
overflow: hidden;
-
top:25px auto;
+
position: absolute;
-
 
+
left: 25px;
-
+
top: 25px atuo;
 +
}
 +
.nav-wp {
 +
position: absolute;
 +
top: 190px;
 +
margin-top: 170px;
 +
left: 462px;
 +
margin-left: -100px;
 +
border-radius: 4px;
 +
-moz-border-radius: 4px;
 +
-webkit-border-radius: 4px;
 +
padding: 0 20px 6px 10px;
 +
_padding: 0 20px 2px 10px;
 +
background-color: #0099cc;
 +
}
 +
.nav li {
 +
float: left;
 +
margin-left: 10px;
 +
font-size: 20px;
 +
font-weight: bold;
 +
font-family: tahoma;
 +
color: #004f7c;
 +
cursor: pointer;
 +
height: 22px;
 +
}
 +
.nav li.cur{
 +
color: #fc49b6
 +
}
 +
.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;
}
}
</style>
</style>
</head>
</head>
-
 
<body>
<body>
-
<table width="900" border="0" cellspacing="0" cellpadding="0" style="margin-left:25px">
+
<h2 style="color:#fff">对于使用IE6的同学看到的斑点，我只能表示很无奈。。。</h2>
-
  <caption>&nbsp;
+
<div id="slider" class="slide-wp">
-
  </caption>
+
<ul>
-
   <tr>
+
<li><a href="http://www.cnblogs.com/hongru/" target="_blank"><img src="https://static.igem.org/mediawiki/2012/a/a0/Xmu_photo_001.jpg" width="900" height="300"></a></li>
 +
<li><a href="http://www.cnblogs.com/hongru/" target="_blank"><img src="https://static.igem.org/mediawiki/2012/3/3e/IMG_0644.jpg" width="900" height="300"></a></li>
 +
<li><a href="http://www.cnblogs.com/hongru/" target="_blank"><img src="https://static.igem.org/mediawiki/2012/c/c6/IMG_0675.jpg" width="900" height="300"></a></li>
 +
<li><a href="http://www.cnblogs.com/hongru/" target="_blank"><img src="https://static.igem.org/mediawiki/2012/c/c2/IMG_0680.jpg" width="900" height="300"></a></li>
 +
<li><a href="http://www.cnblogs.com/hongru/" target="_blank"><img src="https://static.igem.org/mediawiki/2012/4/49/IMG_0699.jpg" width="900" height="300"></a></li>
 +
</ul>
 +
</div>
 +
<div class="nav-wp">
 +
<ul id="nav" class="nav">
 +
<li onclick="mySlider.pos(0)">●</li>
 +
<li onclick="mySlider.pos(1)">●</li>
 +
<li onclick="mySlider.pos(2)">●</li>
 +
<li onclick="mySlider.pos(3)">●</li>
 +
<li onclick="mySlider.pos(4)">●</li>
 +
</ul>
 +
<a class="next" onclick="mySlider.move()">next</a>
 +
</div>
 +
<script type="text/javascript">
 +
var HR = {
 +
$ : function(i) {return document.getElementById(i)},
 +
$$ : function(c, p) {return p.getElementsByTagName(c)},
 +
ce : function(i, t) {
 +
   var o = document.createElement(i);
 +
  t.appendChild(o);
 +
  return o;
 +
}
 +
};
 +
HR.slider3D = function () {
 +
var init = function (o) {
 +
  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);
    
    
-
  <!--photos -->
+
   this.pos(0);
-
    <td width="610" height="253"><div id="photo">
+
}
-
   <script>
+
init.prototype = {
-
var widths=900;
+
  pos : function (i) {
-
var heights=372;
+
  clearInterval(this.li[i].a); clearInterval(this.au); this.au = 0; this.cur = i;
-
var counts=6;
+
  var navli = HR.$$('li', HR.$(this.o.navId));
-
img1=new Image ();img1.src='https://static.igem.org/mediawiki/2012/4/4a/IMG_2244.jpg';
+
  for (var j=0; j<navli.length; j++) {
-
img2=new Image ();img2.src='https://static.igem.org/mediawiki/2012/3/3e/IMG_0644.jpg';
+
    navli[j].className = i == j ? 'cur' : '';
-
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';
+
  var img1 = HR.$$('img', this.a1)[0], img2 = HR.$$('img', this.a2)[0], _this = this;
-
img5=new Image ();img5.src='https://static.igem.org/mediawiki/2012/c/c2/IMG_0680.jpg';
+
  img1.src = i==0 ? this.img[this.l-1].src : this.img[i-1].src;
-
img6=new Image ();img6.src='https://static.igem.org/mediawiki/2012/4/49/IMG_0699.jpg';
+
  img1.width = this.w;
-
url1=new Image ();url1.src='https://static.igem.org/mediawiki/2012/9/91/Outlook.jpg';
+
  img2.src = this.img[i].src;
-
url2=new Image ();url2.src='https://static.igem.org/mediawiki/2012/3/3e/IMG_0644.jpg';
+
  img2.width = 0;
-
url3=new Image ();url3.src='https://static.igem.org/mediawiki/2012/a/a0/Xmu_photo_001.jpg';
+
  img1.height = img2.height = this.h;
-
url4=new Image ();url4.src='https://static.igem.org/mediawiki/2012/8/82/IMG_0673.jpg';
+
  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';
-
url5=new Image ();url5.src='https://static.igem.org/mediawiki/2012/c/c2/IMG_0680.jpg';
+
  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';
-
url6=new Image ();url6.src='https://static.igem.org/mediawiki/2012/4/49/IMG_0699.jpg';
+
  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';
-
var nn=1;
+
  this.li[i].a = setInterval(function(){_this.anim(i)}, 20);
-
var key=0;
+
  },
-
function change_img()
+
  anim : function (i) {
-
{if(key==0){key=1;}
+
  var w1 = HR.$$('img', this.a1)[0].width, w2  = HR.$$('img', this.a2)[0].width;
-
else if(document.all)
+
  if (w2 == this.w) {
-
{document.getElementById("pic").filters[0].Apply();document.getElementById("pic").filters[0].Play(duration=2);}
+
    clearInterval(this.li[i].a);
-
eval('document.getElementById("pic").src=img'+nn+'.src');
+
    HR.$$('img', this.a1)[0].width = 0;
-
eval('document.getElementById("url").href=url'+nn+'.src');
+
    HR.$$('img', this.a2)[0].width = this.w;
-
for (var i=1;i<=counts;i++){document.getElementById("xxjdjj"+i).className='axx';}
+
    this.mask11.style.borderLeftWidth = this.mask11.style.borderRightWidth = this.mask12.style.borderLeftWidth = this.mask12.style.borderRightWidth = '0px';
-
document.getElementById("xxjdjj"+nn).className='bxx';
+
    this.mask11.style.borderTopWidth = this.mask11.style.borderBottomWidth = this.mask12.style.borderTopWidth = this.mask12.style.borderBottomWidth = this.h/this.s + 'px';
-
nn++;if(nn>counts){nn=1;}
+
    this.mask21.style.borderLeftWidth = this.mask21.style.borderRightWidth = this.mask22.style.borderLeftWidth = this.mask22.style.borderRightWidth = this.w/2 + 'px';
-
tt=setTimeout('change_img()',2000);}
+
    this.mask21.style.borderTopWidth = this.mask21.style.borderBottomWidth = this.mask22.style.borderTopWidth = this.mask22.style.borderBottomWidth = '0px';
-
function changeimg(n){nn=n;window.clearInterval(tt);change_img();}
+
  }else {
-
document.write('<style>');
+
    HR.$$('img', this.a1)[0].width -= Math.ceil((this.w-w2)*.13);
-
document.write('.axx{padding:1px 7px;border-left:#cccccc 1px solid;}');
+
    HR.$$('img', this.a2)[0].width += Math.ceil((this.w-w2)*.13);
-
document.write('a.axx:link,a.axx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#666;}');
+
    this.mask11.style.borderLeftWidth = this.mask11.style.borderRightWidth = this.mask12.style.borderLeftWidth = this.mask12.style.borderRightWidth = HR.$$('img', this.a1)[0].width/2 + 'px';
-
document.write('a.axx:active,a.axx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#999;}');
+
    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';
-
document.write('.bxx{padding:1px 7px;border-left:#cccccc 1px solid;}');
+
    this.mask21.style.borderLeftWidth = this.mask21.style.borderRightWidth = this.mask22.style.borderLeftWidth = this.mask22.style.borderRightWidth = HR.$$('img', this.a2)[0].width/2 + 'px';
-
document.write('a.bxx:link,a.bxx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}');
+
    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';
-
document.write('a.bxx:active,a.bxx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}');
+
    if (!this.au) this.auto();
-
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>');
+
  auto : function () {
-
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;">');
+
  var _this = this;
-
for(var i=1;i<counts+1;i++){document.write('<a href="javascript:changeimg('+i+');" id="xxjdjj'+i+'" class="axx" target="_self">'+i+'</a>');}
+
  this.au = setInterval(function(){_this.move()}, this.at*1000);
-
document.write('</div></div>');
+
  },
-
change_img();
+
  move : function () {
-
</script>
+
  var n = this.cur==this.l-1 ? 0 : this.cur+1;
-
  </div></td>
+
  this.pos(n);
-
    <!--photos -->
+
  }
-
   
+
}
-
 
+
return init;
-
 
+
}();
-
 
+
var mySlider = new HR.slider3D({
-
 
+
id: 'slider',
-
  </tr>
+
maskSize: 6,
-
</table>
+
navId: 'nav',
-
 
+
auto: 4
-
</body>
+
})</script></body>
</html>
</html>

Revision as of 03:37, 23 September 2012

<!doctype html>

对于使用IE6的同学看到的斑点，我只能表示很无奈。。。

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