Difference between revisions of "Template:China Tongji Content"

 
(25 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 58: Line 58:
 
}
 
}
 
.listTwo:hover{
 
.listTwo:hover{
−
border-left: 2px solid #F0F;
+
border-left: 2px solid #6D2E1A;
 
padding-left:5px;
 
padding-left:5px;
 
}
 
}
Line 77: 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;
Line 98: Line 99:
 
}
 
}
 
.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;
 
}
 
}
  
Line 164: Line 168:
  
 
<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 --------------- -->
 
<script type="text/javascript">
 
<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){
 
function picMove(bannerTab,bannerCtrl,bannerPrev,bannerNext){
 
var bannerSlider = new Slider(bannerTab, {
 
var bannerSlider = new Slider(bannerTab, {
Line 184: Line 225:
 
});
 
});
 
}
 
}
 +
//------------滚动条向下滚动超过一定距离时，内容列表固定在指定位置 函数-----------//
 +
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>
 
</script>
 
</body>
 
</body>
  
 
</html>
 
</html>

Latest revision as of 20:39, 16 September 2015

close label