Difference between revisions of "Template:UESTC-China/footer"

 
(36 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
 
 
<html>
 
<html>
 
<body>
 
<body>
−
        <footer  style="background-color: #000000">
+
<footer  style="background-color: #000000">
−
            <div class="row">
+
  <div class="row" style="margin:0">
−
                <div class="col-md-12" style="text-alien: center; vertical-align: middle; font-size: 127%; text-align: center;color: #ffffff">Copyright © 2019 iGEM UESTC-China </div>
+
    <div style="font-size: 18px;font-size:1.2vw; text-align: center;color: #ffffff;line-height:1.5em">Copyright © 2019 iGEM UESTC-China </div>
−
                <div class="col-sm-4 col-md-4" >
+
  </div>
−
                          <h6  style="color: white;margin: 0;text-align: right;padding-right: 5em;font-size: 127%">FOLLOW US</h6>           
+
  <div class="row" style="margin:0">
−
                            <a  style="color: white;float: right;padding-right: 3.5em" href="https://www.facebook.com/uestcchinaigem">
+
<img alt="logo" src="https://static.igem.org/mediawiki/2019/5/5d/T--UESTC-China--footer.png" style="width:100%" usemap="#Map" id="imgfoot">  
−
<img alt="logo" src="https://static.igem.org/mediawiki/2019/6/6f/T--UESTC-China--footer1.png" style="width: 35%;" >
+
</div>
−
</a>
+
<map name="Map">
−
                            <a  style="color: white;float: right;margin-right: -0.8em" href="https://twitter.com/UESTC_CHINA">
+
  <area shape="rect" coords="203,24,235,51" href="https://www.facebook.com/uestcchinaigem">
−
<img alt="logo" src="https://static.igem.org/mediawiki/2019/6/6c/T--UESTC-China--footer4.png" style="width:35%">
+
  <area shape="rect" coords="251,22,286,51" href="https://twitter.com/UESTC_CHINA">
−
</a>
+
  <area shape="rect" coords="305,25,346,49" href="https://www.weibo.com/u/5983731394">
−
+
  <area shape="rect" coords="376,5,562,53" href="https://www.uestc.edu.cn/">
−
                            <a  style="color: white;float: right;margin-right: -1.8em" href="https://www.weibo.com/u/5983731394">
+
  <area shape="rect" coords="578,4,842,49" href="http://www.jwc.uestc.edu.cn/Index.action">
−
<img  alt="logo" src="https://static.igem.org/mediawiki/2019/5/5e/T--UESTC-China--footer5.png" style="width: 35%">
+
  <area shape="rect" coords="858,6,1114,50" href="http://www.life.uestc.edu.cn/">
−
</a>
+
</map>
−
                                       
+
</footer>
−
                </div>
+
 
−
<div class="col-sm-4 col-md-4" style="padding-top: 0.5em;padding-left: 6em">
+
<script>//自适应width:100% map标签算法，实际上用正则会简单很多
−
                                     
+
function getxy(target,mult){    
−
                        <a  style="color: white;" href="#">
+
    var str="";
−
<img  alt="logo" src="https://static.igem.org/mediawiki/2019/3/3a/T--UESTC-China--footer2.png" style="width: 70%" >
+
var arr=new Array();
−
</a>
+
target+=",";//提前加,确保输出最后一个
−
                                       
+
for(var i=0;i<target.length;i++){
−
                </div>
+
//这个函数是要从字符串中碰到,时就输出前面的数字 并继续下去，输出为字符串的x1,x2,y1,y2；
−
<div class="col-sm-4 col-md-4" style="padding-left: 6em;padding-bottom: 1em">
+
−
                            <a  style="color: white;" href="#">
+
−
<img  alt="logo" src="https://static.igem.org/mediawiki/2019/2/27/T--UESTC-China--footer3.png" style="width: 30%">         
+
−
                            </a>
+
−
                                       
+
−
                </div>
+
−
            </div>
+
 
 
−
        </footer>
+
            if(target[i]!=",")
 +
{
 +
str+=target[i];
 +
}
 +
else
 +
{
 +
arr.push(str);
 +
str="";//重置继续输出
 +
}
 +
};
 +
var x1=parseFloat(arr[0]*mult).toString();
 +
var y1=parseFloat(arr[1]*mult).toString();
 +
var x2=parseFloat(arr[2]*mult).toString();
 +
var y2=parseFloat(arr[3]*mult).toString();
 +
var Z=x1+","+y1+","+x2+","+y2;
 +
return Z;
 +
}
 +
var aLast=new Array();//全局变量  用来存储上一次的宽度
 +
  $(function(){//第一次变化
 +
var $area=$("area");
 +
var $img=$("#imgfoot");
 +
var _t=$img.width()/1441;//1441为图片原始宽度值
 +
  for(var i=0;i<$area.length;i++){
 +
  $area[i].coords=getxy($area[i].coords,_t);
 +
  }
 +
aLast.push($img.width());//把第一次变得宽度push进入
 +
})
 +
 +
$(window).resize(function(){//调整宽口大小时变化
 +
var $area=$("area");
 +
var $img=$("#imgfoot");
 +
var _t=$img.width()/aLast[aLast.length-1];
 +
aLast.push($img.width());//迭代push进入
 +
for(var i=0;i<$area.length;i++){
 +
$area[i].coords=getxy($area[i].coords,_t);
 +
}
 +
})
 +
</script>
  
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 04:49, 2 December 2019

Copyright © 2019 iGEM UESTC-China
logo