Javascriptを使って画像を回転させる(jQuery+RotateImage)
Wilq32.RotateImageというjQueryのプラグインを使うと、簡単に画像の傾斜・回転が可能。
以下、使い方の覚え書き。
用意するもの
・jQuery(今回使用したのはver.1.3.2)
・jQueryRotate.js(ここからダウンロード)
ファイルを読み込む。
<script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jQueryRotate.js"></script>
body上部に以下の記述を追加。
<script type="text/javascript">
$(function() {
$(element).rotate(45);
});
</script>
これだけだとIEでうまく動作しないので、以下の記述をbody下部に追加。
<!-- Include the VML behavior -->
<style>v\:image { behavior:url(#default#VML); display:inline-block }</style>
<!-- Declare the VML namespace -->
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />
ここまでで動作が確認できればＯＫ。
パラメーターを設定する場合は、以下のように記述。
$(element).rotate({
angle:45, //回転角度の設定
animateAngle:45, //アニメーションを用いた回転角度の設定
maxAngle:85, //右回りの最大回転角度
minAngle:-35, //左回りの最大回転角度
callback:callbackFunc, //コールバック関数
bind:[ //イベントハンドラの設定
{'mouseover':function(){ //マウスオーバー時の処理
mouseoverFunc();
}},{'mouseout':function(){ //マウスアウト時の処理
mouseOutFunc();
}}
]
});
ここで実際に画像を描画しているのはjavascript自身ではなく、<canvas>やVMLであり、jQueryRotate.jsを使うと、このへんのめんどうな処理をラップし、ヨロシクやってくれる、ということになります。
作ったデモはここに。
10:31:02-8 月.14
自家製本郷ゴーヤ
ベランダで育てていたゴーヤがでっかい実を付けたので収穫。
保存方法についてちょっと調べてみたのだが、縦に2つに切って中のワタと種をとりだし、新聞紙で包んでビニール袋に入れて冷蔵庫っていうのが良いらしいので早速やってみた。
まだまだ獲れそうな気がします。
10:37:49-8 月.13
映画を観た訳ではないんですが。