Carpe Diem

  Top > スポンサー広告> JavaScript > 画像の拡大縮小ボタン  

スポンサーサイト

-- - --/-- [--] - --:--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

画像の拡大縮小ボタン

2011 - 09/09 [Fri] - 12:18

PHPの方は表示する際にリサイズして~という流れでした。
JavaScriptはブラウザ側の操作を受け付けてくれるので、ユーザが自分で拡大、縮小したいボタンも用意できます。

何度も繰り返すと計算の過程でアスペクト比が狂うこともありますが、そこまで繰り返し拡大縮小することもないでしょう。またサイズのリセットもできるので、アスペクト比が狂ったらそこで修正すれば良いと思います。

では以下コードです。

<HEAD>
<SCRIPT language="JavaScript">
var i=0;

timeID=0;
function kakudai(){

var xw =document.rfq.height;
var yh =document.rfq.width;

for (i=0;i<10;i++){
w=xw*(1+0.1*i);
h=yh*(1+0.1*i);
document.rfq.height=w;
document.rfq.width=h;
}

}

function shuku(){

var xw =document.rfq.height;
var yh =document.rfq.width;

for (i=0;i<10;i++){
w=xw*(1-0.05*i);
h=yh*(1-0.05*i);
document.rfq.height=w;
document.rfq.width=h;
}

}
</SCRIPT></HEAD>
<BODY>
<form>
<input type="button" value="縮小" onClick="shuku()">

<input type="button" value="拡大" onClick="kakudai()">
</form>
<IMG src="004a.gif" name="rfq">

</BODY>


ソース先のコピペです。拡大率・縮小率は+、ーの部分を修正すれば出来ます。

document.name属性.height現在の大きさを、
document.name属性.naturalHeight画像本来の大きさを取得できます。
これらを使えば簡単に拡大縮小できますし、元の大きさにもすぐに戻せます。


ソース:
http://popup.tok2.com/home2/yosiaki/C20.html

コメントの投稿





管理者にだけ表示を許可する

 | ホーム | 

プロフィール

Cicatrice

Author:Cicatrice
備忘録

検索フォーム

カテゴリ

最新記事

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。