Javascript(JQuery)で画像のフィルター効果を追加しました。

 前回の作ったフィルター効果は画像を移動させるだけだったので、今回は、画像を分割移動、フェイドイン、フェイドアウトするフィルター効果にしました。分割できる向きは、縦割また横割だけです。
 
 使い方は、右側のボタンを押すと、指定の効果で画像が切り替わります。画像切替え処理をしているときに、ボタンを押しても画像が動かないでの注意してください。一つの切替に約4秒から6秒ほどかります。この処理時間は、メソッドの引数で設定できます。分割数も引数で設定できますが、細かくすると表示速度が遅くなり、画像が乱れることがあるので注意してください。
 使い方の詳細は下記のようになります。

JavaScript イメージフィルターの効果(画像分割編)

「ImageChange-Combine.js」の使い方

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

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

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

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

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

(今回のポイント f_good_04.GIF
 「ImageChange-Combine.js」ファイルですが、一つの処理(フィルター名)を一つのメソッドで完結させています。(共通部分をべつの関数にまとめないで別々に記述しました。)その意図は、将来各フィルターごとに変更する可能性が高いからです。変更の必要がある場合は、メソッド内(フィルター名)を変更するだけで完了します。

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

Leave a comment