Difference between revisions of "Team:SZU-China/IntegratedHP"
| Line 1: | Line 1: | ||
{{SZU-China}} | {{SZU-China}} | ||
| + | |||
| + | |||
| + | |||
<html lang="en"> | <html lang="en"> | ||
<head> | <head> | ||
| Line 28: | Line 31: | ||
<style id="fontSet"> | <style id="fontSet"> | ||
| + | |||
| + | /*@font-face {*/ | ||
| + | /* font-family: "GalanoGrotesqueAltDEMO-Bold";*/ | ||
| + | /* src: url('../../wiki/images/e/ef/T--SZU-CHINA--attribution_font.otf') format("opentype");*/ | ||
| + | /*}*/ | ||
| + | /*@font-face {*/ | ||
| + | /* font-family: "LatoBold";*/ | ||
| + | /* src: url('../../wiki/images/5/54/T--SZU-CHINA--Lato-Bold.ttf') format("truetype");*/ | ||
| + | |||
| + | /*}*/ | ||
| + | |||
| + | /*@font-face {*/ | ||
| + | /* font-family: "LatoMe";*/ | ||
| + | /* src: url('../../wiki/images/5/5a/T--SZU-CHINA--Lato-medium.ttf') format("truetype");*/ | ||
| + | |||
| + | /*}*/ | ||
| + | |||
@font-face { | @font-face { | ||
font-family: "GalanoGrotesqueAltDEMO-Bold"; | font-family: "GalanoGrotesqueAltDEMO-Bold"; | ||
| − | src: url(' | + | src: url('./fonts/Galano Grotesque Alt DEMO Bold.otf') format("opentype"); |
} | } | ||
@font-face { | @font-face { | ||
font-family: "LatoBold"; | font-family: "LatoBold"; | ||
| − | src: url(' | + | src: url('./fonts/Lato-Bold.ttf') format("truetype"); |
} | } | ||
| Line 41: | Line 61: | ||
@font-face { | @font-face { | ||
font-family: "LatoMe"; | font-family: "LatoMe"; | ||
| − | src: url(' | + | src: url('./fonts/Lato-Medium.ttf') format("truetype"); |
} | } | ||
| + | |||
| + | |||
| + | |||
</style> | </style> | ||
<style id="littleMeunuCss"> | <style id="littleMeunuCss"> | ||
| Line 286: | Line 309: | ||
} | } | ||
.modal-title{ | .modal-title{ | ||
| − | font-size: | + | font-size: 30px; |
| − | line-height: | + | line-height: 30px; |
font-family:GalanoGrotesqueAltDEMO-Bold ; | font-family:GalanoGrotesqueAltDEMO-Bold ; | ||
| − | color: # | + | color: #0b8544; |
} | } | ||
| Line 301: | Line 324: | ||
.modal-body p{ | .modal-body p{ | ||
font-size: 18px; | font-size: 18px; | ||
| − | line-height: | + | line-height: 25px; |
font-family:LatoMe ; | font-family:LatoMe ; | ||
margin-bottom: 20px; | margin-bottom: 20px; | ||
| Line 924: | Line 947: | ||
</div> | </div> | ||
</div> | </div> | ||
| − | <h2 class="bigtitle">Integrated | + | <h2 class="bigtitle" style="font-size: 120px;text-align: center;">Integrated <br>Human Practices</h2> |
</div> | </div> | ||
| Line 944: | Line 967: | ||
| − | + | <h1 class="CilckMore">Click on the different sections of the image to learn more</h1> | |
<div class="littleMenu"> | <div class="littleMenu"> | ||
| Line 984: | Line 1,007: | ||
</div> | </div> | ||
</div> | </div> | ||
| − | + | <!--<div style="width: 100%; margin: 0 auto">--> | |
| − | + | <img id="mapImg" src="https://2019.igem.org/wiki/images/0/06/T--SZU-CHINA--hp222.jpg" alt="" hidefocus="true" usemap="#testArea" style="margin: 0 auto; display: block; max-width: 1200px; width: 80%;height: auto; border: 10px #48D289;" border="1" /> | |
| − | + | <map name="testArea" id="testArea"> | |
| − | + | <area alt="" title="" data-target="#myModal1" data-toggle="modal" shape="rect" style="outline:none;" target="_self" onfocus="blur(this)" /> | |
| − | + | <area alt="" title="" data-target="#myModal2" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModal3" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModal4" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModal5" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModal6" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModalFirst" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModal7" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModal8" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModal9" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModal10" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModal11" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModal12" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModal13" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModal14" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModalSecond" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModal15" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModal16" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModal17" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModal18" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModal19" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModal20" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | <area alt="" title="" data-target="#myModal21" data-toggle="modal" shape="rect" style="outline:none;" target="_self" /> | |
| − | + | </map> | |
| − | + | </div> | |
| − | + | </div> | |
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> | <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> | ||
| Line 1,033: | Line 1,056: | ||
</div> | </div> | ||
<div class="modal-body"> | <div class="modal-body"> | ||
| − | + | ||
<div > | <div > | ||
<h3>Description:</h3> | <h3>Description:</h3> | ||
| Line 1,069: | Line 1,092: | ||
</div> | </div> | ||
<div class="modal-body"> | <div class="modal-body"> | ||
| − | + | ||
<div > | <div > | ||
<h3>Description:</h3> | <h3>Description:</h3> | ||
| Line 1,107: | Line 1,130: | ||
</div> | </div> | ||
<div class="modal-body"> | <div class="modal-body"> | ||
| − | + | ||
<div > | <div > | ||
<h3>Description:</h3> | <h3>Description:</h3> | ||
| Line 1,144: | Line 1,167: | ||
</div> | </div> | ||
<div class="modal-body"> | <div class="modal-body"> | ||
| − | + | ||
<div > | <div > | ||
<h3>Description:</h3> | <h3>Description:</h3> | ||
| Line 1,186: | Line 1,209: | ||
</div> | </div> | ||
<div class="modal-body"> | <div class="modal-body"> | ||
| − | + | ||
<div > | <div > | ||
<h3>Description:</h3> | <h3>Description:</h3> | ||
| Line 1,229: | Line 1,252: | ||
</div> | </div> | ||
<div class="modal-body"> | <div class="modal-body"> | ||
| − | + | ||
<div > | <div > | ||
<h3>Description:</h3> | <h3>Description:</h3> | ||
| Line 1,302: | Line 1,325: | ||
</div> | </div> | ||
<div class="modal-body"> | <div class="modal-body"> | ||
| − | + | ||
<div > | <div > | ||
<h3>Description:</h3> | <h3>Description:</h3> | ||
| Line 1,349: | Line 1,372: | ||
</div> | </div> | ||
<div class="modal-body"> | <div class="modal-body"> | ||
| − | + | ||
<div > | <div > | ||
<h3>Description:</h3> | <h3>Description:</h3> | ||
| Line 1,387: | Line 1,410: | ||
</div> | </div> | ||
<div class="modal-body"> | <div class="modal-body"> | ||
| − | + | ||
<div > | <div > | ||
<h3>Description:</h3> | <h3>Description:</h3> | ||
| Line 1,423: | Line 1,446: | ||
</div> | </div> | ||
<div class="modal-body"> | <div class="modal-body"> | ||
| − | + | ||
<div > | <div > | ||
<h3>Description:</h3> | <h3>Description:</h3> | ||
| Line 1,458: | Line 1,481: | ||
</div> | </div> | ||
<div class="modal-body"> | <div class="modal-body"> | ||
| − | + | ||
<div > | <div > | ||
<h3>Description:</h3> | <h3>Description:</h3> | ||
| Line 1,499: | Line 1,522: | ||
</div> | </div> | ||
<div class="modal-body"> | <div class="modal-body"> | ||
| − | + | ||
<div > | <div > | ||
<h3>Description:</h3> | <h3>Description:</h3> | ||
| Line 1,537: | Line 1,560: | ||
</div> | </div> | ||
<div class="modal-body"> | <div class="modal-body"> | ||
| − | + | ||
<div > | <div > | ||
<h3>Description:</h3> | <h3>Description:</h3> | ||
| Line 1,655: | Line 1,678: | ||
</div> | </div> | ||
<div class="modal-body"> | <div class="modal-body"> | ||
| − | + | ||
<div > | <div > | ||
<h3>Description:</h3> | <h3>Description:</h3> | ||
| Line 1,690: | Line 1,713: | ||
</div> | </div> | ||
<div class="modal-body"> | <div class="modal-body"> | ||
| − | + | ||
<div > | <div > | ||
<h3>Description:</h3> | <h3>Description:</h3> | ||
| Line 1,733: | Line 1,756: | ||
</div> | </div> | ||
<div class="modal-body"> | <div class="modal-body"> | ||
| − | + | ||
<div > | <div > | ||
<h3>Description:</h3> | <h3>Description:</h3> | ||
| Line 1,775: | Line 1,798: | ||
</div> | </div> | ||
<div class="modal-body"> | <div class="modal-body"> | ||
| − | + | ||
<div > | <div > | ||
<h3>Description:</h3> | <h3>Description:</h3> | ||
| Line 1,819: | Line 1,842: | ||
</div> | </div> | ||
<div class="modal-body"> | <div class="modal-body"> | ||
| − | + | ||
<div > | <div > | ||
<h3>Description:</h3> | <h3>Description:</h3> | ||
| Line 1,861: | Line 1,884: | ||
</div> | </div> | ||
<div class="modal-body"> | <div class="modal-body"> | ||
| − | + | ||
<div > | <div > | ||
<h3>Description:</h3> | <h3>Description:</h3> | ||
| Line 1,898: | Line 1,921: | ||
</div> | </div> | ||
<div class="modal-body"> | <div class="modal-body"> | ||
| − | + | ||
<div > | <div > | ||
<h3>Description:</h3> | <h3>Description:</h3> | ||
| Line 2,116: | Line 2,139: | ||
}); | }); | ||
</script> | </script> | ||
| − | + | <script id="mapPage"> | |
| − | + | $( document ).ready( function() { | |
| − | + | //position on 1166px | |
| − | + | var defaultMaps = [ | |
| − | + | [661,248,1026,353], | |
| − | + | [257,356,484,443], | |
| − | + | [653,460,898,558], | |
| − | + | [256,559,488,668], | |
| − | + | [666,712,980,793], | |
| − | + | [86,811,491,926], | |
| − | + | [177,953,998,1327], | |
| − | + | [664,1345,978,1465], | |
| − | + | [204,1458,490,1552], | |
| − | + | [658,1549,924,1656], | |
| − | + | [123,1652,488,1754], | |
| − | + | [660,1750,978,1863], | |
| − | + | [116,1860,489,1959], | |
| − | + | [657,1937,1096,2046], | |
| − | + | [154,2090,489,2192], | |
| − | + | [197,2234,965,2583], | |
| − | + | [647,2622,924,2724], | |
| − | + | [168,2756,478,2860], | |
| − | + | [640,2855,932,2967], | |
| − | + | [240,3021,477,3112], | |
| − | + | [641,3175,869,3276], | |
| − | + | [157,3295,476,3393], | |
| − | + | [638,3410,1090,3524], | |
| − | + | // 163,3299,479,3391 | |
| − | + | // | |
| − | + | // 648,3414,1088,3521 | |
| − | + | // 412,2176,692,2249 | |
| − | + | // 641,3406,1085,3532 | |
| − | + | ]; | |
| − | + | var areas = document.querySelectorAll('area'); | |
| − | + | for (var m = 0; m < areas.length; m++) { | |
| − | + | areas[m] | |
| − | + | } | |
| − | + | console.log(areas[0].coords); | |
| − | + | console.log(areas.length); | |
| − | + | // 图片地址 | |
| − | + | var img_url = '关于.png' | |
| − | + | // 创建对象 | |
| − | + | var img = new Image() | |
| − | + | // 改变图片的src | |
| − | + | img.src = 'https://2019.igem.org/wiki/images/1/1e/T--SZU-CHINA--hpPage2.jpg' | |
| − | + | // 加载完成执行 | |
| − | + | img.onload = function(){ | |
| − | + | // 打印 | |
| − | + | var cuWidth = parseInt($('#mapImg').css('width')) ; | |
| − | + | console.log("cp:"+cuWidth); | |
| − | + | var cp = cuWidth / 1166 ; | |
| − | + | console.log("cp:"+cp); | |
| − | + | console.log( img.width ); | |
| − | + | for (var i = 0; i < defaultMaps.length; i++) { | |
| − | + | for (var n = 0; n < defaultMaps[i].length; n++) { | |
| − | + | console.log(defaultMaps[i][n]); | |
| − | + | defaultMaps[i][n] = defaultMaps[i][n] * cp; | |
| − | + | console.log(defaultMaps[i][n]); | |
| − | |||
| − | |||
} | } | ||
| + | areas[i].setAttribute('coords',defaultMaps[i]); | ||
| + | } | ||
| − | + | }; | |
| − | + | }) | |
| − | + | </script> | |
<script src='https://2019.igem.org/Template:SZU-China/TweenMaxminjs?action=raw&ctype=text/javascript'></script> | <script src='https://2019.igem.org/Template:SZU-China/TweenMaxminjs?action=raw&ctype=text/javascript'></script> | ||
| Line 2,193: | Line 2,216: | ||
<script src='https://2019.igem.org/Template:SZU-China/debugaddIndicatorsminjs?action=raw&ctype=text/javascript'></script> | <script src='https://2019.igem.org/Template:SZU-China/debugaddIndicatorsminjs?action=raw&ctype=text/javascript'></script> | ||
<script src='https://2019.igem.org/Template:SZU-China/animationgsapminjs?action=raw&ctype=text/javascript'></script> | <script src='https://2019.igem.org/Template:SZU-China/animationgsapminjs?action=raw&ctype=text/javascript'></script> | ||
| − | + | <!--<script src="js/jquery-2.2.4.min.js"></script>--> | |
| − | + | <!--<script src="js/bootstrap.min.js"></script>--> | |
| − | + | <!--<script type="text/javascript" src="js/zooming.js"></script>--> | |
</div> | </div> | ||
</body> | </body> | ||
</html> | </html> | ||
Revision as of 05:52, 19 October 2019
Integrated
Human Practices
Click on the different sections of the image to learn more
