User:Lytao/1

From 2011.igem.org

< User:Lytao(Difference between revisions)
 
(32 intermediate revisions not shown)
Line 1: Line 1:
 +
{{Team:USTC-China/temp}}
 +
{{Team:USTC-China/temp2}}
<html>
<html>
<head>
<head>
-
 
+
<meta http-equiv="Refresh"
-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
+
content="9;url=https://2011.igem.org/Team:USTC-China/Project/application">
-
<script type="text/javascript">
+
-
 
+
-
$(document).ready(function() {
+
-
 
+
-
//Set Default State of each portfolio piece
+
-
$(".paging").show();
+
-
$(".paging a:first").addClass("active");
+
-
+
-
//Get size of images, how many there are, then determin the size of the image reel.
+
-
var imageWidth = $(".window").width();
+
-
var imageSum = $(".image_reel img").size();
+
-
var imageReelWidth = imageWidth * imageSum;
+
-
+
-
//Adjust the image reel to its new size
+
-
$(".image_reel").css({'width' : imageReelWidth});
+
-
+
-
//Paging + Slider Function
+
-
rotate = function(){
+
-
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
+
-
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
+
-
 
+
-
$(".paging a").removeClass('active'); //Remove all active class
+
-
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
+
-
+
-
//Slider Animation
+
-
$(".image_reel").animate({
+
-
left: -image_reelPosition
+
-
}, 500 );
+
-
+
-
};
+
-
+
-
//Rotation + Timing Event
+
-
rotateSwitch = function(){
+
-
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
+
-
$active = $('.paging a.active').next();
+
-
if ( $active.length === 0) { //If paging reaches the end...
+
-
$active = $('.paging a:first'); //go back to first
+
-
}
+
-
rotate(); //Trigger the paging and slider function
+
-
}, 4000); //Timer speed in milliseconds
+
-
};
+
-
+
-
rotateSwitch(); //Run function on launch
+
-
+
-
//On Hover
+
-
$(".image_reel a").hover(function() {
+
-
clearInterval(play); //Stop the rotation
+
-
}, function() {
+
-
rotateSwitch(); //Resume rotation
+
-
});
+
-
+
-
//On Click
+
-
$(".paging a").click(function() {
+
-
$active = $(this); //Activate the clicked paging
+
-
//Reset Timer
+
-
clearInterval(play); //Stop the rotation
+
-
rotate(); //Trigger rotation immediately
+
-
rotateSwitch(); // Resume rotation
+
-
return false; //Prevent browser jump to link anchor
+
-
});
+
-
+
-
});
+
-
</script>
+
-
 
+
-
<style type="text/css">
+
-
 
+
-
body {
+
-
background-color: #f4f4f4 /*#aaa*/;
+
-
font-family: Lucida Grande, Verdana, Arial, sans-serif;
+
-
text-align: justify;
+
-
}
+
-
 
+
-
 
+
-
#top-section {
+
-
    border-left: 0px solid #00ff00;
+
-
    border-right: 0px solid #00ff00;
+
-
}
+
-
 
+
-
#content {
+
-
border-left: 0px solid #00ff00;
+
-
border-right: 0px solid #00ff00;
+
-
}
+
-
 
+
-
lh {
+
-
font-weight: bold;
+
-
font-size: 110%;
+
-
}
+
-
 
+
-
/*--Window & Text Table--*/
+
-
table#rotator_news {
+
-
margin-bottom: 25px;
+
-
}
+
-
 
+
-
/*--Main Image Rotator Container--*/
+
-
.main_view {
+
-
float: left;
+
-
position: relative;
+
-
/*border: 0px solid #fff;*/
+
-
width: 650px;
+
-
}
+
-
/*--Image Rotator Window/Masking Styles--*/
+
-
.window {
+
-
height:286px;
+
-
width: 650px;
+
-
overflow: hidden; /*--Hides anything outside of the set width/height--*/
+
-
position: relative;
+
-
}
+
-
.image_reel {
+
-
position: absolute;
+
-
top: 0; left: 0;
+
-
}
+
-
.image_reel img {float: left;}
+
-
 
+
-
/*--Paging Styles--*/
+
-
.paging {
+
-
position: absolute;
+
-
bottom: 0px; right: -15px;
+
-
width: 400px; height:47px; /*--Increase this width when adding more numbers in paging--*/
+
-
z-index: 100; /*--Assures the paging stays on the top layer--*/
+
-
text-align: center;
+
-
line-height: 40px;
+
-
background: url(paging_bg2.png) no-repeat;
+
-
display: none; /*--Hidden by default, will be later shown with jQuery--*/
+
-
}
+
-
.paging a {
+
-
padding: 5px;
+
-
text-decoration: none;
+
-
color: #fff;
+
-
}
+
-
.paging a.active {
+
-
font-weight: bold;
+
-
/*background: #cdcdcd;*/
+
-
border: 1px solid #cdcdcd;
+
-
-moz-border-radius: 3px;
+
-
-khtml-border-radius: 3px;
+
-
-webkit-border-radius: 3px;
+
-
}
+
-
.paging a:hover {font-weight: bold;}
+
-
 
+
-
 
+
-
/*--Window Text Styling--*/
+
-
 
+
-
table#rotator_news td#window_text {
+
-
z-index: 100;
+
-
/*border: 1px solid #f4f4f4;*/
+
-
width: 400px;
+
-
padding: 10px;
+
-
/*vertical-align:top;*/
+
-
}
+
-
 
+
-
table#rotator_news td#window_text p.window_feature {
+
-
padding: 50px 0px 20px 0px;
+
-
text-align: center;
+
-
}
+
-
 
+
-
table#rotator_news td#window_text hr {
+
-
margin-top: 35px;
+
-
margin-bottom: 10px;
+
-
}
+
-
 
+
-
table#rotator_news td#window_text ul.window_news {
+
-
/*padding-top: 50px;*/
+
-
font-size: 95%;
+
-
}
+
-
 
+
-
table#rotator_news td#window_text p.window_feature a {
+
-
font-weight: bold;
+
-
font-size: 200%;
+
-
color: #40834b;
+
-
text-shadow: 0.05em 0.05em /*0.05em*/ #aaa;
+
-
}
+
-
 
+
-
table#rotator_news td#window_text ul.window_news {
+
-
list-style-image: url('https://static.igem.org/mediawiki/2010/6/6c/Grey_circle_bullet_10px.png');
+
-
}
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
</style>
+
</head>
</head>
 +
<object type="application/x-shockwave-flash" height=800 width=900 data="https://static.igem.org/mediawiki/2011/4/43/Application.swf" >
 +
<param name="movie" value="https://static.igem.org/mediawiki/2011/4/43/Application.swf" />
 +
<param name="quality" value="high" />
 +
<param name="" value="Exactfit"/>
 +
</object>
-
 
+
</html>
-
<body>
+
-
 
+
-
 
+
-
 
+
-
 
+
-
<table id="rotator_news">
+
-
<tr>
+
-
<td id="window_images">
+
-
<div class="main_view">
+
-
    <div class="window">
+
-
        <div class="image_reel">
+
-
                    <img src="https://static.igem.org/mediawiki/igem.org/9/9f/2010-jam-cheering_650x286.jpg" alt="" />
+
-
                    <img src="https://static.igem.org/mediawiki/igem.org/2/23/2010-jam-thumbwars_650x286.jpg" alt="" />
+
-
                    <img src="https://static.igem.org/mediawiki/igem.org/f/fb/2010-jam-hope_650x286.jpg" alt="" />
+
-
                    <img src="https://static.igem.org/mediawiki/igem.org/7/79/Igem_regions_650w.png" alt="" />
+
-
                    <img src="https://static.igem.org/mediawiki/igem.org/d/d4/2011_igem_in_plates_650x286.jpg" alt="" />
+
-
                    <img src="https://static.igem.org/mediawiki/igem.org/5/50/Team_outside_stata_650x286.jpg" alt="" />
+
-
                    <img src="https://static.igem.org/mediawiki/igem.org/6/63/2011_distribution_stickers_650x286.jpg" alt="" />
+
-
                    <img src="https://static.igem.org/mediawiki/igem.org/6/6b/2009-jam-james_brown_650x286.jpg" alt="" />
+
-
                    <img src="https://static.igem.org/mediawiki/igem.org/b/bb/Distribution_photo_pipette_tips_650x286.jpg" alt="" />
+
-
                    <img src="https://static.igem.org/mediawiki/igem.org/6/6a/2010-jam-tudelft_ladies_650x286.jpg" alt="" />
+
-
                    <img src="https://static.igem.org/mediawiki/igem.org/4/4e/2010_dna_distribution_plate_650x286.jpg" alt="" />
+
-
                    <img src="https://static.igem.org/mediawiki/igem.org/2/2f/Igem_above_2010_650x286.jpg" alt="" />
+
-
        </div>
+
-
    </div>
+
-
    <div class="paging">
+
-
        <a href="#" rel="1">1</a>
+
-
        <a href="#" rel="2">2</a>
+
-
        <a href="#" rel="3">3</a>
+
-
        <a href="#" rel="4">4</a>
+
-
        <a href="#" rel="5">5</a>
+
-
        <a href="#" rel="6">6</a>
+
-
        <a href="#" rel="7">7</a>
+
-
        <a href="#" rel="8">8</a>
+
-
        <a href="#" rel="9">9</a>
+
-
        <a href="#" rel="10">10</a>
+
-
        <a href="#" rel="11">11</a>
+
-
        <a href="#" rel="12">12</a>
+
-
    </div>
+
-
</div> <!-- close "main_view" div -->
+
-
</td>
+

Latest revision as of 11:43, 27 October 2011