Difference between revisions of "Template:China Tongji Content"
(34 intermediate revisions by the same user not shown) | |||
Line 15: | Line 15: | ||
color: #FFF; | color: #FFF; | ||
text-align: left; | text-align: left; | ||
− | margin: | + | 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 # | + | border-left: 3px solid #6D2E1A; |
padding-left:10px; | padding-left:10px; | ||
} | } | ||
Line 58: | Line 58: | ||
} | } | ||
.listTwo:hover{ | .listTwo:hover{ | ||
− | border-left: 2px solid # | + | 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: | + | font-size: 25px; |
− | font-family: | + | font-family: Helvetica,Arial,Tahoma,Verdana; |
font-weight: bold; | font-weight: bold; | ||
line-height: 40px; | line-height: 40px; | ||
− | color:# | + | color:#626231; |
} | } | ||
+ | |||
#mainContent .contentP{ | #mainContent .contentP{ | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
text-align: justify; | text-align: justify; | ||
text-indent: 3%; | text-indent: 3%; | ||
Line 102: | Line 96: | ||
height:3px; | height:3px; | ||
background:#eee; | background:#eee; | ||
+ | clear:both; | ||
} | } | ||
.imgName{ | .imgName{ | ||
− | font-size: | + | 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 115: | 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