Template:KIT-Kyoto.Header

From 2012.igem.org

(Difference between revisions)
m
Line 3: Line 3:
<br>
<br>
<br>
<br>
-
<link rel="stylesheet" type="text/css" href="http://www.bluebamboo.co.jp/rule/template/jslist/file_016/css/change.css" media="all" />
+
 
-
<script type="text/javascript" src="http://www.bluebamboo.co.jp/rule/template/jslist/file_016/js/jquery-1.2.6.min.js"></script>
+
 
 +
<a href="https://2012.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2012/3/3f/Igem.png"class="iGEM" align="left" width="170" height="120"></a>
 +
<img src="" class="KITlogo" align="right" width="170" height="120" title="KITlogo">
 +
 
 +
</div>
 +
<head>
 +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
<script type="text/javascript">
-
<!--
 
$(function(){
$(function(){
-
var imgNo = 4; //画像枚数
+
var setImg = '#viewer';
-
var currentNo = 0;
+
var fadeSpeed = 1500;
-
var targetNo = 0;
+
var switchDelay = 5000;
-
var timerId;
+
-
var fspeeds=1500; //切り替え時間
+
-
+
-
var links = [ //画像にリンクを指定（不用な場合は、spaceでOK）
+
-
"http://www.yahoo.co.jp/",
+
-
"http://www.yahoo.co.jp/",
+
-
"http://www.yahoo.co.jp/",
+
-
"http://www.yahoo.co.jp/"
+
-
];
+
-
var alts = [ //画像の説明文（不用な場合は、spaceでOK）
+
-
"画像の説明その1",
+
-
"画像の説明その2",
+
-
"画像の説明その3",
+
-
"画像の説明その4"
+
-
];
+
-
+
-
//initialize
+
-
(function(){
+
-
for(var i=1; i<=imgNo; i++){
+
-
//create element
+
-
$('<div id="rImg'+i+'">').appendTo($('#mainImg'));
+
-
+
-
//load image
+
-
var img = $('<img>').attr('src','Kittop'+i+'.jpg');
+
-
img.attr('alt',alts[i-1]);
+
-
img.load(imgLoaded.call(img, i));
+
-
}
+
$(setImg).children('img').css({opacity:'0'});
-
})();
+
$(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed);
-
+
-
function imgLoaded(no){
+
-
//add image
+
-
var obj = $('#rImg'+no);
+
-
obj.children('img').remove();
+
-
obj.append($(this));
+
-
$('<a href="'+links[no-1]+'" />').append(this).appendTo(obj);
+
-
//start animation
+
setInterval(function(){
-
if(no==1) loop();
+
$(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg);
-
}
+
},switchDelay);
-
+
-
//rotation image
+
-
function loop(){
+
-
//fadeout current image
+
-
if(currentNo!=0) $('#rImg'+currentNo).fadeOut(fspeeds);
+
-
+
-
if(targetNo==0) currentNo = ++currentNo>imgNo?1:currentNo;
+
-
else currentNo = targetNo;
+
-
targetNo = 0;
+
-
+
-
//fadein next image
+
-
$('#rImg'+currentNo).fadeIn(fspeeds);
+
-
timerId = setTimeout(loop, 7000)
+
-
}
+
});
});
-
--!>
 
</script>
</script>
-
+
 
-
<body>
+
<style type="text/css">
-
<div id="mainImg">
+
<!--
-
　　<noscript><img src="https://static.igem.org/mediawiki/2012/6/68/Kittop1.jpg" alt="" width="650" height="400" /></noscript>
+
◆CSS
-
</div>
+
#viewer {
-
</body>
+
margin: 0 auto;
 +
width: 900px;
 +
height: 196px;
 +
text-align: left;
 +
overflow: hidden;
 +
position: relative;
 +
}
 +
 
 +
#viewer img {
 +
top: 0;
 +
left: 0;
 +
position: absolute;
 +
}
 +
 
 +
</style>
-
<a href="https://2012.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2012/3/3f/Igem.png"class="iGEM" align="left" width="170" height="120"></a>
 
-
<img src="" class="KITlogo" align="right" width="170" height="120" title="KITlogo">
 
-
<div align="center"><img src="a" width="1000" height="150" class="Header"></div>
 
-
</div>
 
-
<head>
 
<style type="text/css">  
<style type="text/css">  
Line 181: Line 147:
</head>
</head>
<body>
<body>
 +
<body>
 +
 +
<div id="viewer">
 +
<img src="https://static.igem.org/mediawiki/2012/7/7e/KIT-KyotoA.jpg" width="900" height="191" alt="" />
 +
<img src="https://static.igem.org/mediawiki/2012/0/02/KIT-KyotoB.jpg" width="900" height="191" alt="" />
 +
<img src="https://static.igem.org/mediawiki/2012/9/9b/KIT-KyotoC.jpg" width="900" height="191" alt="" />
 +
<img src="https://static.igem.org/mediawiki/2012/2/29/KIT-KyotoD.jpg" width="900" height="191" alt="" />
 +
</div><!--/#viewer-->
 +
 +
<BR><BR>
<BR><BR>

Revision as of 04:38, 25 August 2012








Retrieved from "http://2012.igem.org/Template:KIT-Kyoto.Header"