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

 
(62 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
 
 
<html>
 
<html>
 
<body>
 
<body>
−
+
<footer  style="background-color: #000000">
−
+
  <div class="row" style="margin:0">
−
+
    <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>
 +
  <div class="row" style="margin:0">
 +
<img alt="logo" src="https://static.igem.org/mediawiki/2019/5/5d/T--UESTC-China--footer.png" style="width:100%" usemap="#Map" id="imgfoot">
 +
</div>
 +
<map name="Map">
 +
  <area shape="rect" coords="203,24,235,51" href="https://www.facebook.com/uestcchinaigem">
 +
  <area shape="rect" coords="251,22,286,51" href="https://twitter.com/UESTC_CHINA">
 +
  <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/">
 +
  <area shape="rect" coords="578,4,842,49" href="http://www.jwc.uestc.edu.cn/Index.action">
 +
  <area shape="rect" coords="858,6,1114,50" href="http://www.life.uestc.edu.cn/">
 +
</map>
 +
</footer>
  
−
+
<script>//自适应width:100% map标签算法，实际上用正则会简单很多
−
+
function getxy(target,mult){    
−
        <footer  style="background-color: #000000;margin-bottom:-2em">
+
    var str="";
−
            <div class="row">
+
var arr=new Array();
−
                <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>
+
target+=",";//提前加,确保输出最后一个
−
                <div class="col-md-12" style="text-alien: center; vertical-align: middle; font-size: 127%; text-align: center;">
+
for(var i=0;i<target.length;i++){
−
                    <div class="social-icons" style="font-size: 170%;">
+
//这个函数是要从字符串中碰到,时就输出前面的数字 并继续下去，输出为字符串的x1,x2,y1,y2；
−
                     
+
−
                            <a  style="color: white;" href="https://www.facebook.com/uestcchinaigem">
+
−
<img alt="logo" src="test photo/facebook1.png" >
+
−
</a>
+
−
                            <a  style="color: white;" href="https://twitter.com/UESTC_CHINA">
+
−
<img alt="logo" src="test photo/tutter1.png" >
+
−
</a>
+
−
+
−
                            <a  style="color: white;" href="https://www.weibo.com/u/5983731394">
+
−
<img  alt="logo" src="test photo/sinla1.png" >
+
−
</a>
+
−
                           
+
−
                       
+
−
                    </div>
+
−
                   
+
−
                </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