更新

エフェクト ライブラリ: effect.js

小山智史(弘前大学)
2005.11.16 スライドやワイプなどのプレゼンテーション機能を追加し「effect.js」に改称
1999.9.27 Netscape社のDrag and Drop Conponentを拡張し「dragable.js」を作成

1. 概要

 JavaScriptのエフェクトライブラリです。典型的な利用例はサンプルをご覧ください。

 本ソフトは一部弘前大学総合情報処理センター研究開発費の補助を得て開発しました。

 当初、本ソフトはNetscape社が公開していた "Drag and Drop Conponent" を参考に「ドラッグ&ドロップライブラリ:dragable.js」として開発しました。Netscape社のページの旧URLは下記ですが、現在は閲覧できません。

http://developer.netscape.com/docs/examples/dynhtml/dragable/index.html
その後、ワイプやスライドなどのプレゼンテーション効果の機能を追加して「エフェクト ライブラリ:effect.js」と改称しました。

 本ソフトはフリーソフトです。再配布も改造も自由です。改造したソフトの配布は、そのことを明記して自由に行ってください。作者への連絡は不要です。でも、お気付きの点や改良された点を、作者にご連絡いただけるとうれしいです。

 WindowsのIE6, IE7, FireFox2.0, NN7.1, NN4.78で動作を確認しています。

2. ファイルの構成

3. 簡単なサンプル

 それぞれリンクされているのでお試しください。また、どのようなプログラムになっているか「ソースを表示」してご覧ください。

4. 使用例

5. 機能の説明

 effect.jsで利用できる機能とその使い方を下表にまとめました。

プロパティまたはメソッド 機能
D=new Obj(x, y, html)
D=putObj(x,y,html)
(x,y)にObjのインスタンスを生成する
D.layer DのレイヤID またはスタイルID
D.ondrop=function ... Dのondropイベントハンドラ
D.onmove=function ... Dのonmoveイベントハンドラ
D.ondrag=function ... Dのondragイベントハンドラ
D.ondown=function ... Dのdownイベントに対するイベントハンドラ
D.Width(W) Dの幅をWにする
D.Height(H) Dの高さをHにする
D.bgColor(color) Dの背景色をcolorにする
D.dragable() Dをドラッグ可能にする
D.show() Dを見せる
D.hide() Dを隠す
D.clip(x1,y1,x2,y2) 相対座標(x1,y1),(x2,y2)でクリップする
D.bound(x1,y1,x2,y2) Dの移動範囲を(x1,y1),(x2,y2)の範囲に制約する
D.bind(b) Dをオブジェクトbにバインドする
(bをドラッグするとDも移動する)
D.moveBy(x,y) Dを(x,y)だけ移動する
D.moveBy(x,y,x1,y1,x2,y2) 移動後のDを(x1,y1),(x2,y2)でクリップする
D.moveTo(x,y) Dを(x,y)に移動する
D.forced(t) Dがオブジェクトtの外周上にあった場合、tの内部/外部に移動する
D.inside(x,y) 座標(x,y)がDの中にあればtrue、外にあればfalseを返す
D.width, D.height Dの幅と高さ
D.x, D.y Dの左上位置
dstartX, dstartY ドラッグ開始時のマウスポインタの位置
droppedX, droppedY ドロップ時のマウスポインタの位置
D.Z trueならばDをマウス操作した時に最も上のレイヤにする
D.wipein(1〜4)
D.wipein(1〜4,s)
Dをモード1〜4(順に左・右・上・下)から(s秒で)ワイプインする
D.wipeout(1〜4)
D.wipeout(1〜4,s)
Dをモード1〜4(順に左・右・上・下)へ(s秒で)ワイプアウトする
D.slidein(1〜4)
D.slidein(1〜4,s)
Dをモード1〜4(順に左・右・上・下)から(s秒で)スライドインする
D.slideout(1〜4)
D.slideout(1〜4,s)
Dをモード1〜4(順に左・右・上・下)へ(s秒で)スライドアウトする
D.slideBy(x,y) Dを(x,y)だけスライドする
D.slideTo(x,y) Dを(x,y)にスライドする

koyama@cc.hirosaki-u.ac.jp