Difference between revisions of "Template:China Tongji Content"

Line 164: Line 164:
  
 
<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){

Revision as of 19:21, 4 September 2015

close label