Team:ZJU-China/aboutus.htm

From 2012.igem.org

(Difference between revisions)
Line 192: Line 192:
   display: none;
   display: none;
}
}
 +
 +
#banner {
 +
position: relative;
 +
left: 10%;
 +
width: 561px;
 +
height: 400px;
 +
border: 1px solid #666;
 +
overflow: hidden;
 +
}
 +
 +
#banner_list img {
 +
border: 0px;
 +
}
 +
 +
#banner_bg {
 +
position: absolute;
 +
bottom: 20px;
 +
background-color: #000;
 +
height: 44px;
 +
filter: Alpha(Opacity = 50);
 +
opacity: 0.5;
 +
z-index: 1000;
 +
cursor: pointer;
 +
width: 561px;
 +
}
 +
 +
#banner_info {
 +
position: absolute;
 +
bottom: 20px;
 +
left: 5px;
 +
height: 44px;
 +
color: #fff;
 +
z-index: 1001;
 +
cursor: pointer
 +
}
 +
 +
#banner_text {
 +
position: absolute;
 +
width: 120px;
 +
z-index: 1002;
 +
right: 3px;
 +
bottom: 3px;
 +
}
 +
 +
#banner ul {
 +
position: absolute;
 +
list-style-type: none;
 +
filter: Alpha(Opacity = 80);
 +
opacity: 0.8;
 +
border: 1px solid #fff;
 +
z-index: 1002;
 +
margin: 0;
 +
padding: 0;
 +
bottom: 3px;
 +
right: 5px;
 +
}
 +
 +
#banner ul li {
 +
padding: 0px 8px;
 +
float: left;
 +
display: block;
 +
color: #FFF;
 +
border: #e5eaff 1px solid;
 +
background: #6f4f67;
 +
cursor: pointer
 +
}
 +
</style>
</style>
Line 296: Line 363:
<p align="justify">&nbsp;</p>
<p align="justify">&nbsp;</p>
<p align="justify">Here we want to show you a set of amazing photos shot by Gang Cheng, an alumnus of  Zhejiang University.</p>
<p align="justify">Here we want to show you a set of amazing photos shot by Gang Cheng, an alumnus of  Zhejiang University.</p>
 +
 +
<script type="text/javascript">
 +
var t = n = 0, count;
 +
$(document).ready(function(){
 +
counta=$("#banner_list a").length;
 +
$("#banner_list a:not(:first-child)").hide();
 +
$("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));
 +
$("#banner_info").click(function(){window.open($("#banner_list a:first-child").attr('href'), "_blank")});
 +
$("#banner li").click(function() {
 +
var i = $(this).text() - 1;//1,2,3,4
 +
n = i;
 +
if (i >= counta) return;
 +
$("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'));
 +
$("#banner_info").unbind().click(function(){window.open($("#banner_list a").eq(i).attr('href'), "_blank")})
 +
$("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
 +
document.getElementById("banner").style.background="";
 +
$(this).toggleClass("on");
 +
$(this).siblings().removeAttr("class");
 +
});
 +
 +
})
 +
 +
 +
</script>
 +
<div id="banner">
 +
<div id="banner_bg"></div>
 +
<div id="banner_info"></div>
 +
<ul>
 +
<li class="on">1</li>
 +
<li>2</li>
 +
<li>3</li>
 +
<li>4</li>
 +
</ul>
 +
<div id="banner_list"><a href="#" target="_blank"><img
 +
src="http://www.jiajunlu.com/igem/zju_about1.jpg" width="600px"
 +
title="" alt="The gate of Yuquan and BG Tree" /></a>
 +
<a href="#" target="_blank"><img
 +
src="http://www.jiajunlu.com/igem/zju_about2.jpg"
 +
title="" alt="Chairman Mao with Gesture Like Calling a Taxi" width="600px" hight="600px" /></a> <a href="#"
 +
target="_blank"><img
 +
src="http://www.jiajunlu.com/igem/zju_about3.jpg" width="600px"
 +
title="" alt="One of Libraries" /></a>
 +
<a href="#" target="_blank"><img
 +
src="http://www.jiajunlu.com/igem/zju_about4.jpg" width="600px" hight="600px"
 +
alt="Lovely President Chu Kochen" title="" /></a>
 +
<a href="#" target="_blank"><img
 +
src="http://www.jiajunlu.com/igem/zju_about5.jpg" width="600px"
 +
alt="Lovers' Slope" title="" /></a>
 +
<a href="#" target="_blank"><img
 +
src="http://www.jiajunlu.com/igem/zju_about6.jpg" width="600px"
 +
alt="Square of Yongqian" title="" /></a>
 +
<a href="#" target="_blank"><img
 +
src="http://www.jiajunlu.com/igem/zju_about7.jpg" width="600px"
 +
alt="One of  Teaching Buildings of  Long History" title="" /></a>
 +
<a href="#" target="_blank"><img
 +
src="http://www.jiajunlu.com/igem/zju_about8.jpg" width="600px"
 +
alt="The Modern Zijingang" title="" /></a></div>
 +
</div>

Revision as of 14:39, 26 September 2012

ABOUT US

01 ABOUT ZJU

02 TEAM

03 ACKNOWLEDGE

04 CONTACT US