Team:WHU-China/Team/Gallary

From 2011.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
<html>
-
<html xmlns="http://www.w3.org/1999/xhtml">
+
-
 
+
<head>
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
-
<title>超酷超绚精美图片展示效果代码(三) - 网页特效观止-网页特效代码|JsCode.CN|</title>
+
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
 +
<script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script>
<style type="text/css">
<style type="text/css">
-
 
+
#countdown
-
 
+
{
-
#diapoContainer {
+
display:none;
-
position: absolute;
+
-
left: 10%;
+
-
top: 10%;
+
-
width: 80%;
+
-
height: 80%;
+
-
background: #222;
+
-
overflow: hidden;
+
-
}
+
-
 
+
-
.imgDC {
+
-
position: absolute;
+
-
cursor: pointer;
+
-
border: #000 solid 2px;
+
-
filter: alpha(opacity=90);
+
-
opacity: 0.9;
+
-
visibility: hidden;
+
-
}
+
-
 
+
-
.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;
+
-
bottom: 0px;
+
-
left: 0px;
+
-
width: 100%;
+
-
height: 6%;
+
-
background:#1a1a1a;
+
-
}
+
-
#caption {
+
-
position: absolute;
+
-
font-family: arial, helvetica, verdana, sans-serif;
+
-
white-space: nowrap;
+
-
color: #fff;
+
-
bottom: 0px;
+
-
width: 100%;
+
-
left: -10000px;
+
-
text-align: center;
+
-
}
+
-
 
+
-
</style>
+
-
<script type="text/javascript">
+
-
var xm;
+
-
var ym;
+
-
 
+
-
/* ==== onmousemove event ==== */
+
-
document.onmousemove = function(e){
+
-
if(window.event) e=window.event;
+
-
xm = (e.x || e.clientX);
+
-
ym = (e.y || e.clientY);
+
}
}
-
 
+
#visit
-
/* ==== window resize ==== */
+
{
-
function resize() {
+
display:none;
-
if(diapo)diapo.resize();
+
}
}
-
onresize = resize;
+
#demo
-
 
+
{
-
/* ==== opacity ==== */
+
position:relative;
-
setOpacity = function(o, alpha){
+
top:15px;
-
if(o.filters)o.filters.alpha.opacity = alpha * 100; else o.style.opacity = alpha;
+
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;
-
////////////////////////////////////////////////////////////////////////////////////////////
+
-
/* ===== encapsulate script ==== */
+
-
diapo = {
+
-
O : [],
+
-
DC : 0,
+
-
img : 0,
+
-
txt : 0,
+
-
N : 0,
+
-
xm : 0,
+
-
ym : 0,
+
-
nx : 0,
+
-
ny : 0,
+
-
nw : 0,
+
-
nh : 0,
+
-
rs : 0,
+
-
rsB : 0,
+
-
zo : 0,
+
-
tx_pos : 0,
+
-
tx_var : 0,
+
-
tx_target : 0,
+
-
 
+
-
/////// script parameters ////////
+
-
attraction : 2,
+
-
acceleration : .9,
+
-
dampening : .1,
+
-
zoomOver : 2,
+
-
zoomClick : 6,
+
-
transparency : .8,
+
-
font_size: 18,
+
-
//////////////////////////////////
+
-
 
+
-
/* ==== diapo resize ==== */
+
-
resize : function(){
+
-
with(this){
+
-
nx = DC.offsetLeft;
+
-
ny = DC.offsetTop;
+
-
nw = DC.offsetWidth;
+
-
nh = DC.offsetHeight;
+
-
txt.style.fontSize = Math.round(nh / font_size) + "px";
+
-
if(Math.abs(rs-rsB)<100) for(var i=0; i<N; i++) O[i].resize();
+
-
rsB = rs;
+
-
}
+
-
},
+
-
 
+
-
/* ==== create diapo ==== */
+
-
CDiapo : function(o){
+
-
/* ==== init variables ==== */
+
-
this.o        = o;
+
-
this.x_pos    = this.y_pos    = 0;
+
-
this.x_origin = this.y_origin = 0;
+
-
this.x_var    = this.y_var    = 0;
+
-
this.x_target = this.y_target = 0;
+
-
this.w_pos    = this.h_pos    = 0;
+
-
this.w_origin = this.h_origin = 0;
+
-
this.w_var    = this.h_var    = 0;
+
-
this.w_target = this.h_target = 0;
+
-
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;
+
-
}
+
-
}
+
-
 
+
-
/* ==== rearrange thumbnails based on "imgsrc" images position ==== */
+
-
this.resize = function (){
+
-
with (this) {
+
-
x_origin = o.offsetLeft;
+
-
y_origin = o.offsetTop;
+
-
w_origin = o.offsetWidth;
+
-
h_origin = o.offsetHeight;
+
-
}
+
-
}
+
-
 
+
-
/* ==== animation function ==== */
+
-
this.position = function (){
+
-
with (this) {
+
-
/* ==== set target position ==== */
+
-
w_target = w_origin;
+
-
h_target = h_origin;
+
-
if(over){
+
-
/* ==== mouse over ==== */
+
-
w_target = w_origin * diapo.zoomOver;
+
-
h_target = h_origin * diapo.zoomOver;
+
-
x_target = diapo.xm - w_pos / 2 - (diapo.xm - (x_origin + w_pos / 2)) / (diapo.attraction*(click?10:1));
+
-
y_target = diapo.ym - h_pos / 2 - (diapo.ym - (y_origin + h_pos / 2)) / (diapo.attraction*(click?10:1));
+
-
} else {
+
-
/* ==== mouse out ==== */
+
-
x_target = x_origin;
+
-
y_target = y_origin;
+
-
}
+
-
if(click){
+
-
/* ==== clicked ==== */
+
-
w_target = w_origin * diapo.zoomClick;
+
-
h_target = h_origin * diapo.zoomClick;
+
-
}
+
-
 
+
-
/* ==== magic spring equations ==== */
+
-
x_pos += x_var = x_var * diapo.acceleration + (x_target - x_pos) * diapo.dampening;
+
-
y_pos += y_var = y_var * diapo.acceleration + (y_target - y_pos) * diapo.dampening;
+
-
w_pos += w_var = w_var * (diapo.acceleration * .5) + (w_target - w_pos) * (diapo.dampening * .5);
+
-
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));
+
-
 
+
-
/* ==== html animation ==== */
+
-
with(img.style){
+
-
left  = Math.round(x_pos) + "px";
+
-
top    = Math.round(y_pos) + "px";
+
-
width  = Math.round(Math.max(0, w_pos)) + "px";
+
-
height = Math.round(Math.max(0, h_pos)) + "px";
+
-
zIndex = Math.round(w_pos);
+
-
}
+
-
with(spa.style){
+
-
left  = Math.round(x_pos + w_pos * .1) + "px";
+
-
top    = Math.round(y_pos + h_pos * .1) + "px";
+
-
width  = Math.round(Math.max(0, w_pos * 1.1)) + "px";
+
-
height = Math.round(Math.max(0, h_pos * 1.1)) + "px";
+
-
zIndex = Math.round(w_pos);
+
-
}
+
-
}
+
-
}
+
-
},
+
-
 
+
-
/* ==== main loop ==== */
+
-
run : function(){
+
-
diapo.xm = xm - diapo.nx;
+
-
diapo.ym = ym - diapo.ny;
+
-
/* ==== caption anim ==== */
+
-
diapo.tx_pos += diapo.tx_var = diapo.tx_var * .9 + (diapo.tx_target - diapo.tx_pos) * .02;
+
-
diapo.txt.style.left = Math.round(diapo.tx_pos) + "px";
+
-
/* ==== images anim ==== */
+
-
for(var i in diapo.O) diapo.O[i].position();
+
-
/* ==== loop ==== */
+
-
setTimeout("diapo.run();", 16);
+
-
},
+
-
 
+
-
/* ==== load images ==== */
+
-
images_load : function(){
+
-
// ===== loop until all images are loaded =====
+
-
var M = 0;
+
-
for(var i=0; i<diapo.N; i++) {
+
-
if(diapo.img[i].complete) {
+
-
diapo.img[i].style.position = "relative";
+
-
diapo.O[i].img.style.visibility = "visible";
+
-
diapo.O[i].spa.style.visibility = "visible";
+
-
M++;
+
-
}
+
-
resize();
+
-
}
+
-
if(M<diapo.N) setTimeout("diapo.images_load();", 128);
+
-
},
+
-
 
+
-
/* ==== init script ==== */
+
-
init : function() {
+
-
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();
+
-
}
+
}
}
-
 
+
#preview_images
-
</script>
+
{
 +
position:relative;
 +
top:20px;
 +
background:transparent;
 +
height:600px;
 +
left:10px;
 +
width:980px;
 +
}
 +
</style>
</head>
</head>
-
 
<body>
<body>
 +
<div id="content1">
 +
<div id="demo">
 +
<div id="indemo">
 +
<div id="demo1">
 +
<a ><img src="/wiki/images/e/e6/Whu-1.jpg" border="1" /></a>
 +
<a ><img src="/wiki/images/f/f1/Whu-4-2.jpg" border="1" /></a>
 +
<a ><img src="/wiki/images/c/c4/Whu-8.jpg" border="1" /></a>
 +
<a ><img src="/wiki/images/f/f6/Whu-10.jpg" border="1" /></a>
 +
<a ><img src="/wiki/images/6/69/Whu-13.jpg" border="1" /></a>
 +
<a ><img src="/wiki/images/e/e1/Whu-18.jpg" border="1" /></a>
 +
<a><img src="/wiki/images/4/42/Whu-32.jpg" border="1" /></a>
 +
<a ><img src="/wiki/images/f/fc/Whu-43.jpg" border="1" /></a>
 +
<a ><img src="/wiki/images/a/a8/Whu-61.jpg" border="1" /></a>
 +
<a><img src="/wiki/images/5/57/Whu-47.jpg" border="1" /></a>
 +
</div>
 +
<div id="demo2"></div>
 +
<script>
 +
var speed=20;
 +
var tab=document.getElementById("demo");
 +
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--;
 +
}
 +
}
 +
var MyMar=setInterval(Marquee,speed);
 +
tab.onmouseover=function() {clearInterval(MyMar)};
 +
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-
<div id="diapoContainer">
+
</script>  
-
<img class="imgsrc" src="https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg" alt="Reconsider your Existence">
+
-
<img class="imgsrc" src="https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg" alt="Something Needs to be Discovered">
+
-
<img class="imgsrc" src="https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg" alt="They Said Very Little">
+
-
<img class="imgsrc" src="https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg" alt="Only in Your Mind">
+
-
<img class="imgsrc" src="https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg" alt="The Power of Imagination">
+
-
<img class="imgsrc" src="https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg" alt="Objectivity is Impossible">
+
-
<img class="imgsrc" src="https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg" alt="Cleaning Up Operation">
+
-
    <img class="imgsrc" src="https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg" alt="Arbitrary Contents">
+
-
    <img class="imgsrc" src="https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg" alt="Arbitrary Contents">
+
-
    <img class="imgsrc" src="https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg" alt="Arbitrary Contents">
+
-
    <div id="bkgcaption">
+
-
</div>
+
-
<div id="caption">
+
-
</div>
+
</div>
</div>
-
<script type="text/javascript">
+
</div>
-
/* ==== start script ==== */
+
 
-
function dom_onload() {
+
<div id="#preview_images">
-
if(document.getElementById("diapoContainer")) diapo.init(); else setTimeout("dom_onload();", 128);
+
tupian......
-
}
+
</div>
-
dom_onload();
+
 
-
</script>
+
</div>
 +
 
</body>
</body>
</html>
</html>
 +
{{WHUcss}}

Revision as of 17:21, 2 October 2011

tupian......
Count Down

days

hours

minutes

seconds

Visitor

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