Biomod/2012/TeamSendaiA/Top: Difference between revisions
No edit summary |
No edit summary |
||
| Line 118: | Line 118: | ||
<title></title> | <title></title> | ||
<div id="viewer"> | <div id="viewer"> | ||
<img src="http://openwetware.org/wiki/Image:Sendai_2012_title.jpg" width=" | <img src="http://openwetware.org/wiki/Image:Sendai_2012_title.jpg" width="1000" height="1000" alt="title" /> | ||
<img src="http://openwetware.org/wiki/Image:Sendai_2012_editor.jpg" width=" | <img src="http://openwetware.org/wiki/Image:Sendai_2012_editor.jpg" width="1000" height="1000" alt="" /> | ||
<img src="http://openwetware.org/wiki/Image:7d5d3f1a.jpg" width="499" height="546" alt="neko" /> | |||
</div><!--/#viewer--> | </div><!--/#viewer--> | ||
| Line 126: | Line 127: | ||
#viewer { | #viewer { | ||
margin: 0 auto; | margin: 0 auto; | ||
width: | width: 499px; | ||
height: | height: 546px; | ||
text-align: left; | text-align: left; | ||
overflow: hidden; | overflow: hidden; | ||
Revision as of 06:14, 22 August 2012
<html> <head> </head> <body> <script language="JavaScript"> var imgs = new Array(); imgs[0] = "http://openwetware.org/wiki/Image:Sendai_2012_title.jpg"; imgs[1] = "http://openwetware.org/wiki/Image:Sendai_2012_editor.jpg"; i = 0; function Blend(){ document.getElementById("imgframe").filters.blendTrans.apply(); document.all.item("imgframe").src = imgs[i++]; document.getElementById("imgframe").filters.blendTrans.play(); if(i>=imgs.length) i=0; } onload = function(){setInterval(Blend,5*1000)}
document.write("いや～信州は寒いですな～。") </script> <img src="http://openwetware.org/wiki/Image:Sendai_2012_editor.jpg" id="imgframe" style="filter:blendTrans(duration=2);"> </body> </html>
<html> <HEAD> <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"> <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css"> <TITLE>blendTrans</TITLE> <SCRIPT TYPE="text/javascript"> <!-- flag = 0 //画像を変更させるためのフラグ function Blend(id){ document.all.item(id).filters.blendTrans.apply(); if(flag == 0){ document.all.item(id).src="http://openwetware.org/wiki/Image:Sendai_2012_title.jpg"; flag = 1; }else{ document.all.item(id).src="http://openwetware.org/wiki/Image:Sendai_2012_editor.jpg"; flag = 0; } document.all.item(id).filters.blendTrans.play(); } //--> </SCRIPT> </HEAD> <BODY>
<FORM>
<IMG ID="blend1" SRC="Image1.jpg" STYLE="filter:blendTrans(duration=2);">
<INPUT TYPE="BUTTON" VALUE=" GO " onClick='Blend("blend1")'>
</FORM>
</BODY>
</html>
<html>
<head><title>test</title>
<style type="text/css">
div#photo { position:relative; width:200px; height:100px; }
div#photo img { position:absolute; top:0; left:0; }
</style>
<script type="text/javascript"> window.onload = function() { func('photo'); }
function func(id) { var intvl = 4000; //←次の画像処理までの時間(msec) var fspeed = 50; //←フェードアウトの速度(msec) var fstep = 3; // ←フェードアウトの透明度の変化率
if (id) this.id = id; var i, e, op = 100; setTimeout(search, intvl); function search() { var elm = document.getElementById(this.id).getElementsByTagName('IMG'); for (i = elm.length-1; i>0; i--) if (elm[i].style.display != 'none') { e = elm[i]; fade(); break; } } function fade(){ op -= fstep; if (op<0) op = 0; //@cc_on e.style. /*@if( @_jscript ) filter = 'alpha(opacity='+ op +')' @else@*/ opacity = ( op / 100 ) + '' /*@end@*/; if (op>0) { setTimeout(fade, fspeed); } else { e.style.display = 'none'; setTimeout(function(){ func(); }, fspeed); } } } </script> </head>
<body> <div id="photo"> <img src="http://openwetware.org/wiki/Image:Sendai_2012_title.jpg" alt="title"> <img src="http://openwetware.org/wiki/Image:Sendai_2012_editor.jpg" alt="editor">
</div> </body> </html>
<html>
<head>
<title></title>
<div id="viewer">
<img src="http://openwetware.org/wiki/Image:Sendai_2012_title.jpg" width="1000" height="1000" alt="title" />
<img src="http://openwetware.org/wiki/Image:Sendai_2012_editor.jpg" width="1000" height="1000" alt="" />
<img src="http://openwetware.org/wiki/Image:7d5d3f1a.jpg" width="499" height="546" alt="neko" />
</div><!--/#viewer-->
- viewer {
margin: 0 auto; width: 499px; height: 546px; text-align: left; overflow: hidden; position: relative; }
- viewer img {
top: 0; left: 0; position: absolute; }
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var setImg = '#viewer'; var fadeSpeed = 1500; var switchDelay = 5000;
$(setImg).children('img').css({opacity:'0'}); $(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed);
setInterval(function(){ $(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg); },switchDelay); }); </script>
</head> <body> </body>
</html>
