|
|
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> |