"
Team:Shenzhen BGIC ATCG/front.html
From 2013.igem.org
(Difference between revisions)
| (39 intermediate revisions not shown) | |||
| Line 13: | Line 13: | ||
<html lang="en"> | <html lang="en"> | ||
| - | + | <meta name="baidu-tc-verification" content="4f1e64971af2f0274a13516d439abb07" /> | |
<link rel="stylesheet" type="text/css" href="https://2013.igem.org/Team:Shenzhen_BGIC_ATCG/css/front.css?action=raw&ctype=text/css" media="screen" /> | <link rel="stylesheet" type="text/css" href="https://2013.igem.org/Team:Shenzhen_BGIC_ATCG/css/front.css?action=raw&ctype=text/css" media="screen" /> | ||
<link rel="stylesheet" type="text/css" href="https://2013.igem.org/Team:Shenzhen_BGIC_ATCG/css/display.css?action=raw&ctype=text/css" /> | <link rel="stylesheet" type="text/css" href="https://2013.igem.org/Team:Shenzhen_BGIC_ATCG/css/display.css?action=raw&ctype=text/css" /> | ||
| - | + | <link rel="text/javascript" class="library" href="http://code.jquery.com/jquery-2.0.3.min.js?action=raw&ctype=text/javascript"" /> | |
<body> | <body> | ||
| - | |||
<div class="front"> | <div class="front"> | ||
<ul class="front_navia front_navi"> | <ul class="front_navia front_navi"> | ||
<li class="a1"> | <li class="a1"> | ||
| - | <a href=" | + | <a href="https://2013.igem.org/Team:Shenzhen_BGIC_ATCG/stories"> |
</a> | </a> | ||
</li> | </li> | ||
<li class="a2"> | <li class="a2"> | ||
| - | <a href=" | + | <a href="https://2013.igem.org/Team:Shenzhen_BGIC_ATCG/modeling"> |
</a> | </a> | ||
</li> | </li> | ||
<li class="a3"> | <li class="a3"> | ||
| - | <a href=" | + | <a href="https://2013.igem.org/Team:Shenzhen_BGIC_ATCG/results"> |
</a> | </a> | ||
</li> | </li> | ||
<li class="a4"> | <li class="a4"> | ||
| - | <a href=" | + | <a href="https://2013.igem.org/Team:Shenzhen_BGIC_ATCG/humanpractice"> |
</a> | </a> | ||
</li> | </li> | ||
| Line 40: | Line 39: | ||
<ul class="front_navib front_navi"> | <ul class="front_navib front_navi"> | ||
<li class="b1"> | <li class="b1"> | ||
| - | <a href=" | + | <a href="https://2013.igem.org/Team:Shenzhen_BGIC_ATCG/team"> |
</a> | </a> | ||
</li> | </li> | ||
<li class="b2"> | <li class="b2"> | ||
| - | <a href=" | + | <a href="https://2013.igem.org/Team:Shenzhen_BGIC_ATCG/parts"> |
</a> | </a> | ||
</li> | </li> | ||
<li class="b3"> | <li class="b3"> | ||
| - | <a href=" | + | <a href="https://2013.igem.org/Team:Shenzhen_BGIC_ATCG/notes"> |
</a> | </a> | ||
</li> | </li> | ||
<li class="b4"> | <li class="b4"> | ||
| - | <a href=" | + | <a href="https://2013.igem.org/Team:Shenzhen_BGIC_ATCG/safety"> |
</a> | </a> | ||
</li> | </li> | ||
</ul> | </ul> | ||
</div> | </div> | ||
| - | + | <div class="eye_wrapper" id="eyeballs"> | |
| - | + | <img alt="Ball" class="eye-left" id="eye_left" src="https://static.igem.org/mediawiki/2013/a/ad/Eyeblack.png" > | |
| + | <img alt="Ball" class="eye-right" id="eye_right" src="https://static.igem.org/mediawiki/2013/4/4c/Eyewhite.png" > | ||
| + | </div> | ||
| + | <script> | ||
| + | var getAngle = function(Xc, Yc, Xa, Ya, Xb, Yb) { | ||
| + | var v1x = Xb - Xc; | ||
| + | var v1y = Yb - Yc; | ||
| + | var v2x = Xa - Xc; | ||
| + | var v2y = Ya - Yc; | ||
| + | return 180 * (Math.atan2(v1x, v1y) - Math.atan2(v2x, v2y)) / Math.PI | ||
| + | }; | ||
| + | var left_center_offset = { | ||
| + | left: 412, | ||
| + | top: 488 | ||
| + | }, | ||
| + | right_center_offset = { | ||
| + | left: 530, | ||
| + | top: 488 | ||
| + | }, | ||
| + | radius2 = 20; | ||
| + | radius1 = 15; | ||
| + | var setEyeOffset = function(event) { | ||
| + | var offset = $(".eye_wrapper").offset(); | ||
| + | var x1 = offset.left + left_center_offset.left; | ||
| + | var y1 = offset.top + left_center_offset.top; | ||
| + | var x2 = offset.left + right_center_offset.left; | ||
| + | var y2 = offset.top + right_center_offset.top; | ||
| + | var n1 = event.clientX - x1; | ||
| + | var m1 = -(event.clientY - y1); | ||
| + | var k1 = Math.atan2(m1, n1); | ||
| + | var n2 = event.clientX - x2; | ||
| + | var m2 = -(event.clientY - y2); | ||
| + | var k2 = Math.atan2(m2, n2); | ||
| + | var x11 = (Math.cos(k1) * radius1 + x1).toFixed(0); | ||
| + | var y11 = (( - Math.sin(k1) * radius1) + y1).toFixed(0); | ||
| + | $(".eye-left").offset({ | ||
| + | left: x11, | ||
| + | top: y11 | ||
| + | }); | ||
| + | var x22 = (Math.cos(k2) * radius2 + x2).toFixed(0); | ||
| + | var y22 = (( - Math.sin(k2) * radius2) + y2).toFixed(0); | ||
| + | $(".eye-right").offset({ | ||
| + | left: x22, | ||
| + | top: y22 | ||
| + | }) | ||
| + | }; | ||
| + | $(window).mousemove(setEyeOffset); | ||
| + | </script> | ||
</body> | </body> | ||
</html> | </html> | ||
Latest revision as of 07:13, 24 September 2013
