Template:Team:KIT-Kyoto/hp

From 2014.igem.org

(Difference between revisions)
 
(70 intermediate revisions not shown)
Line 2: Line 2:
<script type="text/javascript">
<script type="text/javascript">
$(function(){
$(function(){
-
$(document).ready(function(){
 
-
    function showHeight(ele, w) {
 
-
      $(".windowsize").text("The height for the " + ele +
 
-
                    " is " + w + "px.");
 
-
}
 
-
    $("#getw").click(function () {
 
-
      showHeight("window", $("#picbox").width());
 
-
    });
 
-
});
 
$(".hp_img_link a").hover(function(){
$(".hp_img_link a").hover(function(){
var hpnum = $(".hp_img_link a").index(this);
var hpnum = $(".hp_img_link a").index(this);
-
$(".hp_img").eq(hpnum).stop().animate({"width":"100px","height":"100px","margin-left":"-22px","margin-top":"-30px"},100,'linear').css({"border-radius":"100px","-webkit-border-radius":"100px","-moz-border-radius":"100px"});
+
$(".hp_img").eq(hpnum).stop(true,false).animate({"width":"100px","height":"100px","margin-left":"-22px","margin-top":"-30px"},100,'linear').css({"border-radius":"100px","-webkit-border-radius":"100px","-moz-border-radius":"100px"});
},
},
function(){
function(){
var hpnum = $(".hp_img_link a").index(this);
var hpnum = $(".hp_img_link a").index(this);
-
$(".hp_img").eq(hpnum).stop().animate({"width":"60px","height":"60px","margin-left":"-2px","margin-top":"-10px"},100,'linear').css({"border-radius":"60px","-webkit-border-radius":"60px","-moz-border-radius":"60px"});
+
$(".hp_img").eq(hpnum).stop(true,false).animate({"width":"60px","height":"60px","margin-left":"-2px","margin-top":"-10px"},100,'linear').css({"border-radius":"60px","-webkit-border-radius":"60px","-moz-border-radius":"60px"});
 +
});
});
});
 +
 +
$(function(){
var checkpbw = function(){
var checkpbw = function(){
var pbw = $("#container").width();
var pbw = $("#container").width();
-
if(pbw <= 1158){
+
if(pbw >= 1158){
 +
$("#picbox").css({"width":"810px"});
 +
}else if(pbw >= 569){
$("#picbox").css({"width":"540px"});
$("#picbox").css({"width":"540px"});
}else {
}else {
-
$("#picbox").css({"width":"810px"});
+
$("#picbox").css({"width":"270px"});
 +
}
}
}
-
};
 
$(function(){
$(function(){
Line 34: Line 30:
});
});
-
var picbox = $("#picbox").width();
+
$("#stop a").click(function(){
-
$(window).resize(picbox);
+
var stopfunc = $("#stop").hasClass("stop");
-
setTimeout(function(){
+
if(stopfunc){
-
    if(picbox = 810){
+
clearInterval(loop1);
-
    $(".pic1 li:nth-child(4)").animate({opacity:"1"},1200);
+
clearInterval(loop2);
-
    }
+
clearInterval(loop3);
-
    else {
+
$("#stop").removeClass('stop');
-
    $(".pic1 li:nth-child(3)").animate({opacity:"1"},1200);
+
$("#stop a").css("background-image","url(/wiki/images/0/0c/Kit_Play.png)");
-
    }
+
}else {
-
},8000);
+
loop1 = setInterval(slide1,5000);
 +
loop2 = setInterval(slide2,5000);
 +
loop3 = setInterval(slide3,5000);
 +
$("#stop").addClass('stop');
 +
$("#stop a").css("background-image","url(/wiki/images/9/90/Kit_Pause.png)");
 +
}
 +
});
 +
$("#stop a").hover(function(){
 +
$("#stop a").stop().animate({opacity:"0.7"},400);
 +
},
 +
function(){
 +
$("#stop a").stop().animate({opacity:"1"},400);
 +
}
 +
);
-
var loop = setInterval(function() {
+
var picbox = $("#picbox").width();
 +
var picw = 809;
 +
var mpicw = 569;
 +
var loop1 = setInterval(slide1,5000);
 +
    function slide1() {
     var clone = $(".pic1 li:first").clone(true);
     var clone = $(".pic1 li:first").clone(true);
-
     clone.css({"opacity":"0"});
+
     if(picbox >= picw){
-
     if(picbox = 810){
+
    $(".pic1 li:nth-child(4)").css({opacity:"0"});
-
     $(".pic1 li:gt(3)").css({opacity:"0"});
+
     }else if(picbox >= mpicw){
 +
     $(".pic1 li:nth-child(3)").css({opacity:"0"});
     }else {
     }else {
-
     $(".pic1 li:gt(2)").css({opacity:"0"});
+
     $(".pic1 li:nth-child(2)").css({opacity:"0"});
     }
     }
     $(".pic1 li:first").animate({
     $(".pic1 li:first").animate({
-
     marginRight : "-290px",opacity:"0"
+
     marginRight : "-270px",opacity:"0"
     }, {
     }, {
     duration : 800,
     duration : 800,
     complete : function() {   
     complete : function() {   
-
     if(picbox = 810){
+
     if(picbox >= picw){
     $(".pic1 li:nth-child(4)").animate({opacity:"1"},1200);
     $(".pic1 li:nth-child(4)").animate({opacity:"1"},1200);
     }
     }
-
     else {
+
     else if(picbox >= mpicw){
 +
    $(".pic1 li:nth-child(3)").animate({opacity:"1"},1200);
 +
    }else {
     $(".pic1 li:nth-child(2)").animate({opacity:"1"},1200);
     $(".pic1 li:nth-child(2)").animate({opacity:"1"},1200);
     }
     }
         $(".pic1 li:first").remove();
         $(".pic1 li:first").remove();
-
         clone.clone(true).animate({opacity:"1"},500).insertAfter($(".pic1 li:last"));
+
         clone.clone(true).insertAfter($(".pic1 li:last"));
     }
     }
     });
     });
-
}, 6000);
+
    }
-
var loop = setInterval(function() {
+
    var loop2 = setInterval(slide2,5000);
 +
    function slide2() {
     var clone = $(".pic2 li:first").clone(true);
     var clone = $(".pic2 li:first").clone(true);
-
     clone.css({"opacity":"0"});
+
     if(picbox >= picw){
 +
    $(".pic2 li:nth-child(4)").css({opacity:"0"});
 +
    }else if(picbox >= mpicw){
 +
    $(".pic2 li:nth-child(3)").css({opacity:"0"});
 +
    }else {
 +
    $(".pic2 li:nth-child(2)").css({opacity:"0"});
 +
    }
     $(".pic2 li:first").animate({
     $(".pic2 li:first").animate({
-
     marginLeft : "-290px",opacity:"0"
+
     marginLeft : "-270px",opacity:"0"
     }, {
     }, {
-
     duration : 1200,
+
     duration : 800,
     complete : function() {
     complete : function() {
 +
    if(picbox >= picw){
 +
    $(".pic2 li:nth-child(4)").animate({opacity:"1"},1200);
 +
    }else if(picbox >= mpicw){
 +
    $(".pic2 li:nth-child(3)").animate({opacity:"1"},1200);
 +
    }else {
 +
    $(".pic2 li:nth-child(2)").animate({opacity:"1"},1200);
 +
    }
         $(".pic2 li:first").remove();
         $(".pic2 li:first").remove();
-
         clone.clone(true).animate({opacity:"1"},500).insertAfter($(".pic2 li:last"));
+
         clone.clone(true).insertAfter($(".pic2 li:last"));
     }
     }
     });
     });
-
}, 3000);
+
    }
-
});
+
var loop3 = setInterval(slide3,5000);
 +
    function slide3() {
 +
    var clone = $(".pic3 li:first").clone(true);
 +
    if(picbox >= picw){
 +
    $(".pic3 li:nth-child(4)").css({opacity:"0"});
 +
    }else if(picbox >= mpicw){
 +
    $(".pic3 li:nth-child(3)").css({opacity:"0"});
 +
    }else {
 +
    $(".pic3 li:nth-child(2)").css({opacity:"0"});
 +
    }
 +
    $(".pic3 li:first").animate({
 +
    marginRight : "-270px",opacity:"0"
 +
    }, {
 +
    duration : 800,
 +
    complete : function() { 
 +
    if(picbox >= picw){
 +
    $(".pic3 li:nth-child(4)").animate({opacity:"1"},1200);
 +
    }
 +
    else if(picbox >= mpicw){
 +
    $(".pic3 li:nth-child(3)").animate({opacity:"1"},1200);
 +
    }else {
 +
    $(".pic3 li:nth-child(2)").animate({opacity:"1"},1200);
 +
    }
 +
        $(".pic3 li:first").remove();
 +
        clone.clone(true).insertAfter($(".pic3 li:last"));
 +
    }
 +
    });
 +
    }
 +
 
 +
 
 +
});
</script>
</script>
Line 150: Line 210:
#picbox{
#picbox{
position:relative;
position:relative;
-
max-width:930px;
 
-
min-width:620px;
 
margin:20px auto;
margin:20px auto;
}
}
-
.pic1,.pic2{  
+
.pic1,.pic2,.pic3{  
   list-style: none;
   list-style: none;
   width:100%;
   width:100%;
Line 164: Line 222:
}
}
-
.pic1{
+
.pic1,.pic3{
margin:10px 0px;
margin:10px 0px;
}
}
Line 171: Line 229:
margin:10px 5px 10px 0px;
margin:10px 5px 10px 0px;
}
}
-
.pic1 img{
+
.pic1 img,.pic3 img{
width:260px;
width:260px;
float:right;
float:right;
Line 183: Line 241:
}
}
-
#getw{
+
#stop{
-
font-size:12px;
+
position:absolute;
-
position:fixed;
+
right:-25px;
-
bottom:50px;
+
bottom:0;
-
left:0px;
+
-
z-index:10;
+
}
}
-
.windowsize{
+
 
-
color:#ffffff;
+
#stop a{
-
width:250px;
+
display:block;
-
height:30px;
+
background-image:url(/wiki/images/9/90/Kit_Pause.png);
-
position:fixed;
+
background-size:25px 25px;
 +
width:25px;
 +
height:25px;
 +
}
 +
 
 +
#stop span{
 +
visibility:hidden;
 +
}
 +
@media screen and (max-width: 568px) {
 +
#stop{
 +
right:-10px;
bottom:10px;
bottom:10px;
-
left:0;
+
}
-
border:1px dashed #fff;
+
-
z-index:10;
+
}
}
</style>
</style>
-
 
-
<button id="getw">Get Window width</button>
 
-
<div class="windowsize"> </div>
 

Latest revision as of 13:10, 1 October 2014

Retrieved from "http://2014.igem.org/Template:Team:KIT-Kyoto/hp"