フェードイン・アウト
フェードイン・アウト
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD.xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta HTTP-EQUIVE="Content-Type" CONTENT="text/html;charset=utf-8" />
<title>フェードイン・アウト</title>
<!-- フェードイン・アウト -->
<script src="../js/prototype.js" type="text/Javascript"></script>
<script src="../js/rico.js" type="text/Javascript"></script>
<!--フェードイン・アウトが実行するスクリプト-->
<script src="../js/test2.js" type="text/Javascript"></script>
</head>
<body>
<input type=button id=btnFadeInOut value="フェードイン/アウト" />
<div id=divFade class="standard" >
<!--pngでもjpgでもフェードイン・アウトが実行できます。-->
<img src=1.png>
</div>
</body>
</html>
<!--
test2.js
//フェードイン・アウトをロードします。
Event.observe(window, 'load', fadeInOut);
//フラグを用意してフェードイン・アウトを切り替えるために使います
var flg = false;
//フェードイン・アウト
function fadeInOut(){
Event.observe(
'btnFadeInOut',
'click',
function(){
if(flg==true){
//透過色が「1」なので見えます。
var opacity = 1.0;
//次の切り替え準備をします
flg = false;
}else{
//透過色が「0」なので見えなくなります。
var opacity = 0;
//次の切り替え準備をします
flg = true;
}
//次のフェイドの実行をします
//第3引数は時間です。※ミリ秒
//第4引数はステップです。
new Rico.Effect.FadeTo("divFade", opacity, 3000, 100);
}
);
}
Ricoはprototype.jsとペアで用います。
JavascriptのAPIを拡張してAjaxなどの実現に
サポートしてくれます。
Googleで「openrico」キーワードを入力して検索します。
sourceは次のURLで表示できます。
※2016/08/29 [月]現在
[URL]
https://sourceforge.net/projects/openrico/files/openrico/
昔はhttp://openrico.orgで表示できたのですが、
現在はできないため、上記URLもしくは
上記キーワードでGoogleで検索してください。
--------------------------------------------------
-->
|
|