Javascript(JQuery)で画像のフィルター効果を作りました

 最近、Javascriptのネタばかりですが、今回もJavascriptです。以前から作っているスライドショーで画像が切り替わるときの効果がなくて寂しかったので、切替時の画像の動きを何パターンか作りました。
 
 使い方は、右側のボタンを押すと、指定の効果で画像が切り替わります。画像切替え処理をしているときに、ボタンを押しても画像が動かないでの注意してください。一つの切替に約4秒から6秒ほどかります。この時間は、メソッドの引数で設定できます。今回は、自動で切り替わる処理を入れていません。
 使い方の詳細は下記のようになります。

JavaScript イメージフィルターの効果
 注意 一つの処理が完了するまで次の処理ができないようになっています。「ズームイン」は少し遅いかもしれません。

「ImageChange.js」の使い方

「java.js」にて
//表示領域のIDを定義しています。
var ViewId = “#ViewArea”;

//フィルターのオブジェクトを呼び出す
var I = new ImageFilter();

//メソッドを呼び出す
I.cover(Vname,Vhtml,2000);
第一引数は、フィルター名または、フィルター番号(半角数字)、必須です。「ImageChange.js」のswitchの部分を参照してください。
第二引数は、変更後のhtml(画像)です。必須です。
第三引数は、変更までの時間(ミリ秒)、無かった場合は、「ImageChange.js」のTimer値を参照します。

「ImageChange.js」にて
//表示領域のIDを定義しています。
var ViewId = “#ViewArea”;

 ソースコードは、以下のようになっています。もし良かったら参考にしてください。
tar形式でダウンロード
zip形式でダウンロード

Be the first to comment on "Javascript(JQuery)で画像のフィルター効果を作りました"

Leave a comment