ズームイン・アウト
ズームイン・アウト
<?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=btnZoomInOut value="ズームイン/アウト" /><br />
<!--pngでもjpgでもズームイン・アウトが実行できます。-->
<img id=zoomImage src=1.png>
</body>
</html>
<!--
test2.js
//ズームイン・アウトをロードします。
Event.observe(window, 'load', zoomInOut);
//フラグを用意してズームイン・アウトを切り替えるために使います
var flg = false;
//ズームイン・アウト
function zoomInOut(){
Event.observe(
'btnZoomInOut',
'click',
function(){
var width=0;
var height=0;
if(flg==true)
{
//大きくするケース
width=500;
height=500;
flg=false;
}
else
{
//小さくするケース
width=50;
height=50;
flg=true;
}
//rico.jsのメソッドを使ってサイズの変更をします
new Rico.Effect.Size("zoomImage", width, height, 2000, 20);
}
);
}
--------------------------------------------------
-->
|
|