Team:HZAU-China/Gallery

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
{{:Team：HZAU-China/background-head}}
{{:Team：HZAU-China/background-head}}
<html>
<html>
-
<script type="text/javascript" src="/ajaxjs/jquery1.3.2.js"></script>
+
 
-
<style type="text/css">
+
<script>
-
#tip  {position:absolute;color:#333;display:none;z-index:1000;padding-10px;}
+
window.onload=function(){
-
#tip s  {position:absolute;top:40px;left:-20px;display:block;width:0px;height:0px;font-size:0px;line-height:0px;border-color:transparent #BBA transparent transparent;border-style:dashed solid dashed dashed;border-width:10px;z-index:1000;}
+
var rt=new imgRound("imgContainer",120,90,300,80,230,0.01);
-
#tip s i  {position:absolute;top:-10px;left:-8px;display:block;width:0px;height:0px;font-size:0px;line-height:0px;border-color:transparent #fff transparent transparent;border-style:dashed solid dashed dashed;border-width:10px;z-index:1000;}
+
setInterval(function(){rt.roundMove()},20)
-
#tip .t_box  {position:relative;background-color:#CCC;filter:alpha(opacity=50);-moz-opacity:0.5;bottom:-3px;right:-3px;z-index:1000;}
+
}
-
#tip .t_box div  {position:relative;background-color:#FFF;background:#FFF;padding:10px;top:-3px;left:-3px;z-index:1000;}
+
function imgRound(id,w,h,x,y,r,dv,rh,ah){
-
+
if (ah==undefined) ah=1;
-
.tip  {width:200px;height:200px;}
+
if (rh==undefined) rh=10;
-
</style>
+
var dv=dv*ah; //旋转速度
-
<script type="text/javascript">
+
var pi=3.1415926575;
-
$(function(){
+
var d=pi/2;
-
  $('.tip').mouseover(function(){
+
var pd=Math.asin(w/2/r);
-
      var $tip=$('<div id="tip"><div class="t_box"><div><s><i></i></s><img src="'+this.src+'" /></div></div></div>');
+
var smove=true;
-
      $('body').append($tip);
+
var imgArr=new Array();
-
      $('#tip').show('fast');
+
var objectId=id;
-
  }).mouseout(function(){
+
var o=document.getElementById(objectId);
-
      $('#tip').remove();
+
o.style.position="relative";
-
  }).mousemove(function(e){
+
var arrimg=o.getElementsByTagName("img");
-
      $('#tip').css({"top":(e.pageY-60)+"px","left":(e.pageX+30)+"px"})
+
var pn=arrimg.length; //图片数量
-
  })
+
var ed=pi*2/pn;
-
})
+
for (n=0;n<arrimg.length;n++){
 +
var lk=arrimg[n].getAttribute("link");
 +
if (lk!=null) arrimg[n].setAttribute("title",lk)
 +
arrimg[n].onclick=function(){
 +
if (this.getAttribute("link")!=null){
 +
if (this.getAttribute("target")!="_blank") window.location=(this.getAttribute("link"))
 +
else window.open(this.getAttribute("link"))
 +
}
 +
}
 +
arrimg[n].onmouseout=function(){smove=true;}
 +
arrimg[n].onmouseover=function(){smove=false;}
 +
arrimg[n].style.position="absolute";
 +
imgArr.push(arrimg[n]);
 +
}
 +
 +
this.roundMove=function(){
 +
for (n=0;n<=pn-1;n++){
 +
var o=imgArr[n];
 +
var ta=Math.sin(d+ed*n),strFilter;
 +
if (ta<0) o.style.left=Math.cos(d+ed*n-pd)*r+x+"px";
 +
else o.style.left=Math.cos(d+ed*n+pd)*r+x+"px";
 +
o.style.top=ta*rh+rh+y+"px";
 +
var zoom=Math.abs(Math.sin((d+ed*n)/2+pi/4))*0.5+0.5;
 +
o.style.width=Math.abs(Math.cos(d+ed*n+pd)-Math.cos(d+ed*n-pd))*zoom*r+"px";
 +
o.style.height=zoom*h+"px";
 +
if (ta<0) {ta=(ta+1)*80+20;o.style.zIndex=0;}
 +
else {ta=100;o.style.zIndex=1}
 +
if (o.style.zIndex<=0) strFilter="FlipH(enabled:true)"
 +
else strFilter="FlipH(enabled:false)";
 +
strFilter=strFilter+" alpha(opacity="+ta+")";
 +
o.style.opacity=ta/100;
 +
o.style.filter=strFilter;
 +
}
 +
if (smove) d=d+dv;
 +
}
 +
}
</script>
</script>
Line 125: Line 160:
     <p><br></p>
     <p><br></p>
      
      
-
<p> </p>
+
<div id="imgContainer" style="width:600px;height:300px;border:1px solid red">
-
<a><img class="tip" src="https://static.igem.org/mediawiki/2013/7/7b/234.png" /></a>
+
 
-
<a><img class="tip" src="https://static.igem.org/mediawiki/2013/7/7b/234.png" /></a>
+
<img src=""/>
-
<a><img class="tip" src="https://static.igem.org/mediawiki/2013/7/7b/234.png" /></a>
+
<img src=""/>
 +
<img src=""/>
 +
<img src=""/>
 +
<img src=""/>
 +
<img src=""/>
 +
<img src=""/>
 +
<img src=""/>
 +
<img src=""/>
 +
<img src=""/>
 +
 
 +
</div>
     </div>
     </div>
</div>
</div>

Revision as of 12:09, 27 September 2013


Retrieved from "http://2013.igem.org/Team:HZAU-China/Gallery"