Team:HZAU-China/Team
From 2013.igem.org
(Difference between revisions)
(99 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
{{:Team:HZAU-China/background-head}} | {{:Team:HZAU-China/background-head}} | ||
- | == '' | + | <html> |
- | { | + | <head> |
- | + | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
- | + | <style type="text/css"> | |
+ | .zoomPan{width:800px;position:relative; } | ||
+ | .sh{zoom:1;background:url(https://static.igem.org/mediawiki/2013/8/80/Old_wall.jpg);filter:progid:DXImageTransform.Microsoft.dropShadow(color='#54000000', OffX=2,OffY=2);-webkit-box-shadow:4px 4px 4px #666;-moz-box-shadow:4px 4px 4px #666;} | ||
+ | #zoom{position:absolute;width:254px;height:254px;border:3px solid #fff;left:-9999px;top:0;overflow:hidden;background:#fff;} | ||
+ | #zoom img{position:relative;} | ||
+ | </style> | ||
+ | </head> | ||
+ | <script type="text/javascript"> | ||
+ | //<![CDATA[ | ||
+ | function zoomBox() {this.index.apply(this, arguments)} | ||
+ | zoomBox.prototype = { | ||
+ | index: function(win,zoom) { | ||
+ | var win=document.getElementById(win); | ||
+ | var box=document.getElementById(zoom); | ||
+ | var img=box.getElementsByTagName('IMG')[0]; | ||
+ | var zoom=img.width/win.getElementsByTagName('IMG')[0].width; | ||
+ | var z=Math.round(box.offsetWidth/2); | ||
+ | win.onmousemove=function (e){ | ||
+ | e = e || window.event; | ||
+ | var x=e.clientX,y=e.clientY, ori=win.getBoundingClientRect(); | ||
+ | if (x>ori.right+20||y>ori.bottom+20||x<ori.left-20||y<ori.top-20)box.style.display='none'; | ||
+ | x-=ori.left; | ||
+ | y-=ori.top; | ||
+ | box.style.left=x-z+'px'; | ||
+ | box.style.top=y-z+'px'; | ||
+ | img.style.left=-x*zoom+z+'px'; | ||
+ | img.style.top=-y*zoom+z+'px'; | ||
+ | } | ||
+ | win.onmouseover=function (){box.style.display=''} | ||
+ | } | ||
+ | }; | ||
+ | window.onload=function (){ | ||
+ | x=new zoomBox('zoomPan','zoom') | ||
+ | } | ||
+ | //]]> | ||
+ | </script> | ||
+ | <style> | ||
+ | a, a:visited { | ||
+ | color: #fff; | ||
+ | } | ||
+ | #background{ | ||
+ | background:url(https://static.igem.org/mediawiki/2013/8/80/Old_wall.jpg); | ||
+ | float:left; | ||
+ | min-heiht:400px; | ||
+ | width: 1000px; | ||
+ | } | ||
+ | #paragraphs { | ||
+ | background:url(https://static.igem.org/mediawiki/2013/8/80/Old_wall.jpg); | ||
+ | float: left; | ||
+ | height: auto; | ||
+ | padding-left: 80px; | ||
+ | padding-top: 10px; | ||
+ | padding-bottom: 10px; | ||
+ | width: 840px; | ||
+ | } | ||
+ | #background12{ | ||
+ | background:url(https://static.igem.org/mediawiki/2013/8/80/Old_wall.jpg); | ||
+ | float:left; | ||
+ | heiht:auto; | ||
+ | width: 840px; | ||
+ | padding-left:80px; | ||
+ | padding-right:80px; | ||
+ | padding-bottom:10px; | ||
+ | } | ||
+ | </style> | ||
+ | <style> | ||
+ | *{ margin:0; padding:0;} | ||
+ | li,ul{ list-style:none} | ||
+ | img{ border:none;} | ||
+ | .item{float:left; width:190px; padding:0 10px; height:75px; overflow:hidden;} | ||
+ | .item .item-t1{ height:190px; background:#7770B4;} | ||
+ | .item .item-b1{ height:190px; background:#8CA6C0;} | ||
+ | .item .item-t2{ height:190px; background:#FFD017;} | ||
+ | .item .item-b2{ height:190px; background:#F3D972;} | ||
+ | </style> | ||
+ | <script> | ||
+ | $(document).ready(function(){ | ||
+ | var changeH=$(".item-t1").outerHeight();//变化的高度 | ||
+ | $(".itemwrap .item").each(function(index){ | ||
+ | $(this).hover(function(){ | ||
+ | //mouseenter代码段 | ||
+ | $(this).find(".item-t1").stop(true).animate({"margin-top":-changeH},300); | ||
+ | },function(){ | ||
+ | //mouseleave代码段 | ||
+ | $(this).find(".item-t1").stop(true).animate({"margin-top":0},300); | ||
+ | }); | ||
+ | |||
+ | }) | ||
+ | }) | ||
+ | </script> | ||
+ | <script> | ||
+ | $(document).ready(function(){ | ||
+ | var changeH=$(".item-t2").outerHeight();//变化的高度 | ||
+ | $(".itemwrap .item").each(function(index){ | ||
+ | $(this).hover(function(){ | ||
+ | //mouseenter代码段 | ||
+ | $(this).find(".item-t2").stop(true).animate({"margin-top":-changeH},300); | ||
+ | },function(){ | ||
+ | //mouseleave代码段 | ||
+ | $(this).find(".item-t2").stop(true).animate({"margin-top":0},300); | ||
+ | }); | ||
+ | |||
+ | }) | ||
+ | }) | ||
+ | </script> | ||
- | + | <body> | |
+ | <div id="background"> | ||
+ | <div id="paragraphs"> | ||
+ | <div class="zoomPan" id="zoomPan"> | ||
+ | <img src="https://static.igem.org/mediawiki/2013/3/3e/%E7%85%A7%E7%89%87%E6%94%B9_-%E5%8A%A0%E5%AE%BD_%E5%89%AF%E6%9C%AC.png" width="840px;"> | ||
+ | <div id="zoom" class="sh"><img src="https://static.igem.org/mediawiki/2013/a/ae/%E7%85%A7%E7%89%87%E6%94%B9_-%E5%8A%A0%E5%AE%BD.png" width="3500px;"></div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div id="background12"> | ||
+ | |||
+ | <div class="itemwrap"> | ||
+ | <div class="item"> | ||
+ | <div class="item-t1"><p style="font-family:Arial,Helvetica,sans-serif;font-size:23px;font-color:#fff;text-align:center;padding-top:20px;padding-bottom:20px; margin:0px;"><a href="https://2013.igem.org/Team:HZAU-China/Team/Members and Instructors">MEMBERS</a></p></div> | ||
+ | <div class="item-b1"><p style="font-family:Arial,Helvetica,sans-serif;font-size:23px;font-color:#fff;text-align:center;padding-top:20px;padding-bottom:20px; margin:0px;"><a href="https://2013.igem.org/Team:HZAU-China/Team/Members and Instructors">MEMBERS</a></p></div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="itemwrap"> | ||
+ | <div class="item"> | ||
+ | <div class="item-t2"><p style="font-family:Arial,Helvetica,sans-serif;font-size:23px;font-color:#fff;text-align:center;padding-top:20px;padding-bottom:20px; margin:0px;"><a href="https://2013.igem.org/Team:HZAU-China/Instructors">INSTRUCTORS</a></p></div> | ||
+ | <div class="item-b2"><p style="font-family:Arial,Helvetica,sans-serif;font-size:23px;font-color:#fff;text-align:center;padding-top:20px;padding-bottom:20px; margin:0px;"><a href="https://2013.igem.org/Team:HZAU-China/Instructors">INSTRUCTORS</a></p></div> | ||
+ | </div> | ||
+ | </div> | ||
- | + | <div class="itemwrap"> | |
- | + | <div class="item"> | |
- | + | <div class="item-t1"><p style="font-family:Arial,Helvetica,sans-serif;font-size:23px;font-color:#fff;text-align:center;padding-top:20px;padding-bottom:20px; margin:0px;"><a href="https://2013.igem.org/Team:HZAU-China/Attributions">ATTRIBUTIONS</a></p></div> | |
+ | <div class="item-b1"><p style="font-family:Arial,Helvetica,sans-serif;font-size:23px;font-color:#fff;text-align:center;padding-top:20px;padding-bottom:20px; margin:0px;"><a href="https://2013.igem.org/Team:HZAU-China/Attributions">ATTRIBUTIONS</a></p></div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="itemwrap"> | ||
+ | <div class="item"> | ||
+ | <div class="item-t2"><p style="font-family:Arial,Helvetica,sans-serif;font-size:23px;font-color:#fff;text-align:center;padding-top:20px;padding-bottom:20px; margin:0px;"><a href="https://2013.igem.org/Team:HZAU-China/Sponsors">SPONSORS</a></p></div> | ||
+ | <div class="item-b2"><p style="font-family:Arial,Helvetica,sans-serif;font-size:23px;font-color:#fff;text-align:center;padding-top:20px;padding-bottom:20px; margin:0px;"><a href="https://2013.igem.org/Team:HZAU-China/Sponsors">SPONSORS</a></p></div> | ||
+ | </div> | ||
+ | </div> | ||
- | + | </div> | |
+ | </div> | ||
+ | </body> | ||
- | + | </html> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | </ | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
{{:Team:HZAU-China/background-footer}} | {{:Team:HZAU-China/background-footer}} | ||
<br/> | <br/> |
Latest revision as of 11:53, 20 September 2013