Template:SCU-head

From 2013.igem.org

(Difference between revisions)
Line 4: Line 4:
body, input {
body, input {
       font-size="14px";
       font-size="14px";
-
     font-family="calibri"; background-color="transparent"
+
     font-family="calibri"; background-color="transparent";
}
}
 
 
-
 
-
</style>
 
-
<title>Animation</title>
 
</head>
</head>
-
<body>
+
<body >
-
<span style="display:none">
+
-
<img src="https://static.igem.org/mediawiki/2013/3/37/SCU-head-1b.jpg">
+
-
<img src="https://static.igem.org/mediawiki/2013/f/f7/SCU-head-2.jpg">
+
-
<img src="https://static.igem.org/mediawiki/2013/f/fb/SCU-head-3.jpg">
+
-
<img src="https://static.igem.org/mediawiki/2013/7/72/SCU-head-4.jpg">
+
-
</span>
+
-
 
+
-
<img name="MainImage" src="https://static.igem.org/mediawiki/2013/3/37/SCU-head-1b.jpg" border="0">
+
-
<script language="javascript">
+
-
img1= new Image();
+
-
img1.src="https://static.igem.org/mediawiki/2013/3/37/SCU-head-1b.jpg";
+
-
img2= new Image();
+
-
img2.src="https://static.igem.org/mediawiki/2013/f/f7/SCU-head-2.jpg";
+
-
img3= new Image();
+
-
img3.src="https://static.igem.org/mediawiki/2013/f/fb/SCU-head-3.jpg";
+
-
img4= new Image();
+
-
img4.src="https://static.igem.org/mediawiki/2013/7/72/SCU-head-4.jpg";
+
-
 
+
-
 
+
-
imgarray = new Array(4);
+
-
imgarray[1] = new Image();
+
-
imgarray[1].src = "https://static.igem.org/mediawiki/2013/3/37/SCU-head-1b.jpg";
+
-
imgarray[2] = new Image();
+
-
imgarray[2].src = "https://static.igem.org/mediawiki/2013/f/f7/SCU-head-2.jpg";
+
-
imgarray[3] = new Image();
+
-
imgarray[3].src = "https://static.igem.org/mediawiki/2013/f/fb/SCU-head-3.jpg";
+
-
imgarray[4] = new Image();
+
-
imgarray[4].src = "https://static.igem.org/mediawiki/2013/7/72/SCU-head-4.jpg";
+
-
var timeoutValue = 3500;
+
-
var animDelay = 2000;
+
-
var numOfImages = 4;
+
-
 
+
-
</script>
+
-
 
+
-
 
+
-
 
+
-
<script language="javascript">
+
-
var imageIndex = 0;
+
-
var timeoutID = 0;
+
-
var playMode = 1;
+
-
 
+
-
 
+
-
function animImageInc()
+
-
{
+
-
if (imageIndex < numOfImages)
+
-
imageIndex++
+
-
else
+
-
imageIndex = 1;
+
-
}
+
-
 
+
-
function animImageDec()
+
-
{
+
-
if (imageIndex > 1)
+
-
imageIndex--;
+
-
else
+
-
imageIndex = numOfImages;
+
-
}
+
-
 
+
-
function setCurrImage()
+
-
{
+
-
document.MainImage.src = imgarray[imageIndex].src;
+
-
}
+
-
 
+
-
function updateAnim()
+
-
{
+
-
var currTimeoutValue;
+
-
+
-
currTimeoutValue = timeoutValue;
+
-
 
+
-
if (playMode == 1)
+
-
{
+
-
animImageInc();
+
-
if (imageIndex == numOfImages)
+
-
currTimeoutValue += animDelay;
+
-
}
+
-
else
+
-
{
+
-
animImageDec();
+
-
if (imageIndex == 1)
+
-
currTimeoutValue += animDelay;
+
-
}
+
-
setCurrImage();
+
-
timeoutID = setTimeout("updateAnim()", currTimeoutValue);
+
-
}
+
-
 
+
-
function clearLastUpdate()
+
-
{
+
-
clearTimeout(timeoutID);
+
-
timeoutID = 0;
+
-
}
+
-
 
+
-
function startPlay()
+
-
{
+
-
clearLastUpdate();
+
-
playMode = 1;
+
-
updateAnim();
+
-
}
+
-
 
+
-
function startPlayReverse()
+
-
{
+
-
clearLastUpdate();
+
-
playMode = 2;
+
-
updateAnim();
+
-
}
+
-
 
+
-
 
+
-
updateAnim();
+
-
 
+
-
</script>
+
-
</body>
+
 +
<div><img src="https://static.igem.org/mediawiki/2013/3/37/SCU-head-1b.jpg"></div>
</html>
</html>
<html>
<html>
Line 213: Line 101:
<!-- CSS Tabs -->
<!-- CSS Tabs -->
<!-- CSS Tabs -->
<!-- CSS Tabs -->
-
<li><a href="https://2013.igem.org/Team:SCU_China"><span style="width:90px; text-align: center;font-size: medium;">Home</span></a></li>
+
<li><a href="https://2013.igem.org/Team:SCU_China"><span style="width:90px; text-align: center;font-size: small;">Home</span></a></li>
<li><a href="https://2013.igem.org/Team:SCU_China/Team"><span style="width:90px;text-align: center;font-size: small;">Team</span></a></li>
<li><a href="https://2013.igem.org/Team:SCU_China/Team"><span style="width:90px;text-align: center;font-size: small;">Team</span></a></li>
<li><a href="https://2013.igem.org/Team:SCU_China/Project"><span style="width:90px;text-align: center;font-size: small;">Project</span></a></li>
<li><a href="https://2013.igem.org/Team:SCU_China/Project"><span style="width:90px;text-align: center;font-size: small;">Project</span></a></li>

Revision as of 09:41, 14 September 2013