Difference between revisions of "Template:China Tongji Content"

 
(38 intermediate revisions by the same user not shown)
Line 15: Line 15:
 
color: #FFF;
 
color: #FFF;
 
text-align: left;
 
text-align: left;
−
margin:60px 0px 0px 0px;
+
margin:68px 0px 0px 0px;
 
padding:0px;
 
padding:0px;
 
padding-left:8%;
 
padding-left:8%;
Line 45: Line 45:
 
}
 
}
 
.listOne p:hover{
 
.listOne p:hover{
−
border-left: 3px solid #F0F;
+
border-left: 3px solid #6D2E1A;
 
padding-left:10px;
 
padding-left:10px;
 
}
 
}
Line 54: Line 54:
 
list-style-type: none;
 
list-style-type: none;
 
margin-left: 10px;
 
margin-left: 10px;
−
}
+
font-family:"Palatino Linotype", Arial, "Book Antiqua", Palatino, serif;
−
.listTwo{
+
−
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
+
 
font-size: 14px;
 
font-size: 14px;
 
}
 
}
 
.listTwo:hover{
 
.listTwo:hover{
−
border-left: 2px solid #F0F;
+
border-left: 2px solid #6D2E1A;
 
padding-left:5px;
 
padding-left:5px;
 
}
 
}
Line 79: Line 77:
 
#mainContent .titleTwo{
 
#mainContent .titleTwo{
 
text-align: left;
 
text-align: left;
−
font-size: 24px;
+
font-size: 25px;
−
font-family: Arial,Verdana,Helvetica,Tahoma;
+
font-family: Helvetica,Arial,Tahoma,Verdana;
 
font-weight: bold;
 
font-weight: bold;
 
line-height: 40px;
 
line-height: 40px;
−
color:#333;
+
color:#626231;
 
}
 
}
 +
 
#mainContent .contentP{
 
#mainContent .contentP{
 
text-align: justify;
 
text-align: justify;
 
text-indent: 3%;
 
text-indent: 3%;
−
font-size: 16px;
+
font-size: 18px;
−
font-family: "Palatino Linotype","Times New Roman",Georgia, Times, "Book Antiqua","MS Serif";
+
font-family: "Times New Roman",Georgia, Times, "Book Antiqua","MS Serif";
 
text-decoration: none;
 
text-decoration: none;
 
}
 
}
Line 97: Line 96:
 
height:3px;
 
height:3px;
 
background:#eee;
 
background:#eee;
 +
clear:both;
 
}
 
}
 
.imgName{
 
.imgName{
−
font-size: 14px;
+
font-size: 15px;
 
text-align:center;
 
text-align:center;
 
margin:5px;
 
margin:5px;
 +
line-height: 35px;
 +
font-family: "Palatino Linotype", "MS Serif", Verdana;
 +
color:#069;
 
}
 
}
  
 +
/* team page css */
 +
.hoverHand:hover{
 +
cursor:pointer;
 +
}
 +
.fontPala{
 +
font-family: "Palatino Linotype", "MS Serif", Verdana;
 +
text-decoration: none;
 +
}
 +
.fivePx{
 +
display:block;
 +
height:5px;
 +
clear:both;
 +
}
 +
 +
/* bug pic css */
 +
.bugDiv{
 +
float:right;
 +
margin-right:55px;
 +
}
 +
.bugImg{
 +
height:200px;
 +
}
 +
 +
/* big pic show css */
 +
#showPicBac{
 +
display:none;
 +
position:fixed;
 +
left:0px;
 +
top:0px;
 +
z-index:10001;
 +
width:100%;
 +
height:100%;
 +
background:url(https://static.igem.org/mediawiki/2015/e/e7/China_Tongji-showPicBac.png);
 +
text-align:center;
 +
padding-top:100px;
 +
}
 +
#picAndWords{
 +
background:#FFF;
 +
width:200px;
 +
height:200px;
 +
overflow:hidden;
 +
padding:20px;
 +
margin:0px auto;
 +
text-align:left;
 +
}
 +
#showPicTitle{
 +
text-align: left;
 +
font-size: 20px;
 +
color:#333;
 +
font-family: "Palatino Linotype", "MS Serif",Helvetica;
 +
font-weight:bolder;
 +
line-height:30px;
 +
}
 +
#picClose{
 +
padding-top:5px;
 +
}
 
</style>
 
</style>
  
Line 110: Line 169:
 
<body>
 
<body>
  
 +
<!--动态展示大图-->
 +
<div id="showPicBac">
 +
    <div id="picAndWords">
 +
        <p><img id="bigImage" src="" alt=""/></p>
 +
        <p class="showPicDown"><img class="hoverHand" id="picClose" src="https://static.igem.org/mediawiki/2015/9/95/China_Tongji-PicClose.gif" alt="close label" align="right"/><p id="showPicTitle"></p></p>
 +
    </div>
 +
</div> 
 +
 +
 +
<!-- ---------------- script --------------- -->
 +
<script type="text/javascript">
 +
//文档就绪时触发
 +
jQuery(document).ready(function($){
 +
//大图展示
 +
$('.bigImgShow').ready(function() {
 +
$('.bigImgShow').click(function(){
 +
var picWidth = parseInt(this.title.substring(0,3));  //parseInt将字符串转换为数字
 +
var picHeight = parseInt(this.title.substring(4));
 +
var windowHeight = $(window).height();
 +
var paddingTop = (windowHeight-picHeight-83)/2; 
 +
$('#showPicBac').css("padding-top",paddingTop);
 +
$('#showPicBac').css("display","block");
 +
$('#bigImage').attr("src",this.src);
 +
$('#bigImage').css("width",picWidth+"px");
 +
$('#bigImage').css("height",picHeight+"px");
 +
$('#showPicTitle').text(this.alt);
 +
$('#picAndWords').animate({width:picWidth},750);
 +
$('#picAndWords').animate({height:picHeight+43},300);
 +
});
 +
});
 +
//关闭大图展示
 +
$('#picClose,#showPicBac').click(function(){
 +
$('#showPicBac').css("display","none");
 +
$('#picAndWords').css("width","100px");
 +
$('#picAndWords').css("height","100px");
 +
}); 
 +
});
 +
 +
//---------------图片轮播控制函数--------------------//
 +
function picMove(bannerTab,bannerCtrl,bannerPrev,bannerNext){
 +
var bannerSlider = new Slider(bannerTab, {
 +
time: 3000,
 +
delay: 400,
 +
event: 'hover',
 +
auto: true,
 +
mode: 'fade',
 +
controller: bannerCtrl,
 +
activeControllerCls: 'active'
 +
});
 +
bannerPrev.click(function() {
 +
bannerSlider.prev()
 +
});
 +
bannerNext.click(function() {
 +
bannerSlider.next()
 +
});
 +
}
 +
//------------滚动条向下滚动超过一定距离时，内容列表固定在指定位置 函数-----------//
 +
function fixContentList(scrollTop,contentList){
 +
if( scrollTop >= 200 ) {
 +
contentList.css("position","fixed");
 +
contentList.css("top","78px");
 +
} else {
 +
contentList.css("position","static");
 +
}
 +
}
 +
//----------侧边栏位置指示函数-----------------//
 +
function locationFirstShow(scrollTop,firstST,list,listDrop){
 +
if( (scrollTop<firstST-68) ){
 +
list.css("color","#F0F");
 +
listDrop.css("display","block");
 +
}else{
 +
list.css("color","#000");
 +
listDrop.css("display","none");
 +
}
 +
} //第一个二级标题位置指示
 +
function locationShow(scrollTop,firstST,secondST,list,listDrop){
 +
if( (scrollTop>=firstST-68) ){
 +
list.css("color","#F0F");
 +
listDrop.css("display","block");
 +
if(scrollTop>=secondST-68){
 +
list.css("color","#000");
 +
listDrop.css("display","none");
 +
}}else{
 +
list.css("color","#000");
 +
listDrop.css("display","none");
 +
}
 +
} //中间的二级标题位置指示
 +
function locationLastShow(scrollTop,lastST,list,listDrop){
 +
if( (scrollTop>=lastST-68) ){
 +
list.css("color","#F0F");
 +
listDrop.css("display","block");
 +
}else{
 +
list.css("color","#000");
 +
listDrop.css("display","none");
 +
}
 +
} //最后的二级标题位置指示
 +
</script>
 
</body>
 
</body>
  
 
</html>
 
</html>

Latest revision as of 20:39, 16 September 2015

close label