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"> </p> | <p align="justify"> </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> | ||