Template:Team:KIT-Kyoto/hp

From 2014.igem.org

(Difference between revisions)
 
(173 intermediate revisions not shown)
Line 3: Line 3:
$(function(){
$(function(){
$(".hp_img_link a").hover(function(){
$(".hp_img_link a").hover(function(){
-
$(".hp_img").stop().animate({"width":"100px","height":"100px","margin-left":"-12px","margin-top":"-10px"},200,'swing').css("border-radius":"100px","-webkit-border-radius":"100px","-moz-border-radius":"100px");
+
var hpnum = $(".hp_img_link a").index(this);
 +
$(".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(){$(".hp_img").stop().animate({"width":"80px","height":"80px","margin-left":"-2px","margin-top":"0px"},200,'swing').css("border-radius":"80px","-webkit-border-radius":"80px","-moz-border-radius":"80px");
+
function(){
 +
var hpnum = $(".hp_img_link a").index(this);
 +
$(".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 pbw = $("#container").width();
 +
if(pbw >= 1158){
 +
$("#picbox").css({"width":"810px"});
 +
}else if(pbw >= 569){
 +
$("#picbox").css({"width":"540px"});
 +
}else {
 +
$("#picbox").css({"width":"270px"});
 +
}
 +
}
 +
 +
$(function(){
 +
checkpbw();
 +
    $(window).resize(checkpbw);
 +
});
 +
 +
$("#stop a").click(function(){
 +
var stopfunc = $("#stop").hasClass("stop");
 +
if(stopfunc){
 +
clearInterval(loop1);
 +
clearInterval(loop2);
 +
clearInterval(loop3);
 +
$("#stop").removeClass('stop');
 +
$("#stop a").css("background-image","url(/wiki/images/0/0c/Kit_Play.png)");
 +
}else {
 +
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 picbox = $("#picbox").width();
 +
var picw = 809;
 +
var mpicw = 569;
 +
var loop1 = setInterval(slide1,5000);
 +
    function slide1() {
 +
    var clone = $(".pic1 li:first").clone(true);
 +
    if(picbox >= picw){
 +
    $(".pic1 li:nth-child(4)").css({opacity:"0"});
 +
    }else if(picbox >= mpicw){
 +
    $(".pic1 li:nth-child(3)").css({opacity:"0"});
 +
    }else {
 +
    $(".pic1 li:nth-child(2)").css({opacity:"0"});
 +
    }
 +
    $(".pic1 li:first").animate({
 +
    marginRight : "-270px",opacity:"0"
 +
    }, {
 +
    duration : 800,
 +
    complete : function() { 
 +
    if(picbox >= picw){
 +
    $(".pic1 li:nth-child(4)").animate({opacity:"1"},1200);
 +
    }
 +
    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:first").remove();
 +
        clone.clone(true).insertAfter($(".pic1 li:last"));
 +
    }
 +
    });
 +
    }
 +
 +
 +
    var loop2 = setInterval(slide2,5000);
 +
    function slide2() {
 +
    var clone = $(".pic2 li:first").clone(true);
 +
    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({
 +
    marginLeft : "-270px",opacity:"0"
 +
    }, {
 +
    duration : 800,
 +
    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();
 +
        clone.clone(true).insertAfter($(".pic2 li:last"));
 +
    }
 +
    });
 +
    }
 +
 +
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>
 +
 +
<style type="text/css">
 +
.hp_img_link{
 +
width:250px;
 +
height:40px;
 +
position:relative;
 +
margin:30px 12px;
 +
padding:10px auto;
 +
border:2px solid rgba(0,200,50,0.7);
 +
  border-radius: 200px 0px 0px 200px/160px 0px 0px 160px;
 +
  -webkit-border-radius: 200px 0px 0px 200px/160px 0px 0px 160px;
 +
  -moz-border-radius: 200px 0px 0px 200px/160px 0px 0px 160px;
 +
float:left;
 +
}
 +
 +
.hp_img{
 +
position:relative;
 +
  width: 60px;
 +
margin-left:-2px;
 +
margin-top:-10px;
 +
border:3px solid rgba(0,200,50,0.7);
 +
  border-radius: 60px;
 +
  -webkit-border-radius: 60px;
 +
  -moz-border-radius: 60px;
 +
z-index:2;
 +
}
 +
 +
.hp_box{
 +
position:absolute;
 +
top:0;
 +
right:0;
 +
width:230px;
 +
height:40px;
 +
text-align:right;
 +
  border-radius: 200px 0px 0px 200px/160px 0px 0px 160px;
 +
  -webkit-border-radius: 200px 0px 0px 200px/160px 0px 0px 160px;
 +
  -moz-border-radius: 200px 0px 0px 200px/160px 0px 0px 160px;
 +
z-index:1;
 +
}
 +
 +
.hp_img_link a{
 +
position:relative;
 +
display:block;
 +
padding:10px 20px;
 +
background-color:rgba(300,300,300,0.2);
 +
text-decoration:none;
 +
font-weight:bold;
 +
z-index:1;
 +
font-family:'Lucida Grande',
 +
'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
 +
Meiryo, メイリオ, sans-serif;
 +
}
 +
 +
.hp_img_link a:hover{
 +
color: #00ff00;
 +
background-color:rgba(0,200,30,0.1);
 +
}
 +
.hp_img_link a:link,.hp_img_link a:active,.hp_img_link a:visited{
 +
color: forestgreen;
 +
}
 +
 +
#picbox{
 +
position:relative;
 +
margin:20px auto;
 +
}
 +
 +
.pic1,.pic2,.pic3{
 +
  list-style: none;
 +
  width:100%;
 +
  height:195px;
 +
  overflow: hidden;
 +
  position: relative;
 +
  top: 10px;
 +
}
 +
 +
.pic1,.pic3{
 +
margin:10px 0px;
 +
}
 +
 +
.pic2{
 +
margin:10px 5px 10px 0px;
 +
}
 +
.pic1 img,.pic3 img{
 +
width:260px;
 +
float:right;
 +
margin-right:10px;
 +
}
 +
 +
.pic2 img{
 +
width:260px;
 +
float:left;
 +
margin-right:10px;
 +
}
 +
 +
#stop{
 +
position:absolute;
 +
right:-25px;
 +
bottom:0;
 +
}
 +
 +
#stop a{
 +
display:block;
 +
background-image:url(/wiki/images/9/90/Kit_Pause.png);
 +
background-size:25px 25px;
 +
width:25px;
 +
height:25px;
 +
}
 +
 +
#stop span{
 +
visibility:hidden;
 +
}
 +
@media screen and (max-width: 568px) {
 +
#stop{
 +
right:-10px;
 +
bottom:10px;
 +
}
 +
}
 +
</style>

Latest revision as of 13:10, 1 October 2014

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