************************************************************ dabmaki.js (ver. 1.0) 【 種別 】 フリーウェア 【 制作 】 神崎渉瑠, 2012 【 URL 】 http://www.wi-wi.jp/ ************************************************************ ・ダウンロードしていただきありがとうございます。 画像拡大ライブラリです。 解凍すると以下のファイルが作成されます。 readme.txt（このファイル） dabmaki.js dabmaki.js 利用 ============================================================ スクリプトファイルをロード ------------------------------------------------------------ Wings-Windsサイトのファイルを直リンクする場合は以下をコピーして下さい。 ------------------------------------------------------------ 画像へのリンクを作成 ------------------------------------------------------------ スクリプト ============================================================ ・環境に合わせてpropertiesを変更してください。 ---------------------------------------- properties= { DELAY: [1000, 1000, 1000, 1000], BASE_URL: null, COLOR: '#00F', BGCOLOR: '#FF0', BORDER: '1px solid blue', RADIUS: '10px', PADDING: '0 10px', MASK_COLOR: '#FFF', MASK_OPACITY: 0.5, FILE_SHEET:['background.png',0], FILE_LOADING:['loading.png'], FILE_LEAD_BASE:['lead.png'], FILE_LEAD_TOP:['lead_top.png'], FILE_LEAD_BOTTOM:['lead_bottom.png'], FILE_PULL_BASE:['pull.png'], FILE_PULL_TOP:['pull_top.png'], FILE_PULL_BOTTOM:['pull_bottom.png'], FILE_MARGIN_TOP:['margin_top.png'], FILE_MARGIN_BOTTOM:['margin_bottom.png'], METRIX_LOADING:[90,190], METRIX_SHEET:[14,14,14], METRIX_LEAD:[82,52,52], METRIX_MARGIN:[41,26,52] }; 各プロパティ解説 ---------------------------------------- DELAY: [1000, 1000, 1000, 1000] 順に、 [ローディング画像表示時間, 伸長時間, 拡大画像表示時間, 閉塞時間] BASE_URL: null 画像が保存されているURL（ディレクトリ） nullを指定するとスクリプトと同じディレクトリをセットします。 HTMLファイルと同じディレクトリを指定する場合は "./"を指定してください。 COLOR: '#00F' タイトルの文字色。 BGCOLOR: '#FF0' タイトルの背景色。 BORDER: '1px solid blue' タイトルのボーダー。 CSSのborderプロパティと同じルールです。 RADIUS: '10px' タイトルの角丸サイズ。 PADDING: '0 10px' タイトルのパディング CSSのpaddingプロパティと同じルールです。 MASK_COLOR: '#FFF' オーバーレイの色。 MASK_OPACITY: 0.5 オーバーレイの透明度。 FILE_SHEET:['background.png',0] 拡大画像の背景。 [ファイル名, マージン] FILE_LOADING:['loading.png'] FILE_LEAD_BASE:['lead.png'] FILE_LEAD_TOP:['lead_top.png'] FILE_LEAD_BOTTOM:['lead_bottom.png'] FILE_PULL_BASE:['pull.png'] FILE_PULL_TOP:['pull_top.png'] FILE_PULL_BOTTOM:['pull_bottom.png'] FILE_MARGIN_TOP:['margin_top.png'] FILE_MARGIN_BOTTOM:['margin_bottom.png'] ローディング画像、リード中心、リード上端、リード下端 引き手中心、引き手上端、引き手下端、マージン上端、マージン下端 [ファイル名, スプライトサイズ, fps, アニメーション終了時の表示フレーム] スプライトサイズは数値のみの場合はwidth、JSONでwidth、height、limitを指定できます。 fpsのデフォルトは10（単位fps）です。 スプライトサイズを省略するとアニメーションしません。 例） ['loading.png', 180] 画像サイズ 幅:180px、高さ:METRIX_LOADINGの高さと同じ、10fps ['loading.png', 180, 60] 画像サイズ 幅:180px、高さ:METRIX_LOADINGの高さと同じ、60fps ['loading.png', {width:360,height:540,limit:10}] 画像サイズ 幅:360px、高さ:450、全10コマ、10fps width、heightは表示サイズではなく、画像サイズを指定してください。 limitに関して。 以下のような指定の場合。 FILE_LOADING: ['loading.png', {width:360,height:540,limit:10}] METRIX_LOADING:[90,190] ローディング中の表示画像サイズは、幅90px、高さ190px。 loading.png画像のサイズは幅360px、高さ450px。 コマ数は360/90 * 540/190 = 12ですが、limit:10が指定されているため、最後の２コマは表示されません。 アニメーションGIFで作成すると、スプライトサイズ以降の項目を省略できます。 METRIX_LOADING:[90,190] ローディング画像サイズ [幅, 高さ] METRIX_SHEET:[14,14,14] シートサイズ [引き手幅, マージン上端高さ, マージン下端高さ] METRIX_LEAD:[82,52,52] リードサイズ [リード幅, リード上端高さ, リード下端高さ] METRIX_MARGIN:[1,2,3] その他マージン [シートとリードの重なり, リード中心部とリード上端の重なり, タイトルの左マージン] ・外部からconfig()メソッドを使用して、プロパティーを更新できます。 ページの読み込みが完了する前にメソッドを呼び出してください。 ---------------------------------------- Dabmaki.config( { DELAY: [1000, 1000, 1000, 1000], BASE_URL: null, COLOR: '#00F', BGCOLOR: '#FF0', BORDER: '1px solid blue', RADIUS: '10px', PADDING: '0 10px', MASK_COLOR: '#FFF', MASK_OPACITY: 0.5, FILE_SHEET:['background.png',0], FILE_LOADING:['loading.png'], FILE_LEAD_BASE:['lead.png'], FILE_LEAD_TOP:['lead_top.png'], FILE_LEAD_BOTTOM:['lead_bottom.png'], FILE_PULL_BASE:['pull.png'], FILE_PULL_TOP:['pull_top.png'], FILE_PULL_BOTTOM:['pull_bottom.png'], FILE_MARGIN_TOP:['margin_top.png'], FILE_MARGIN_BOTTOM:['margin_bottom.png'], METRIX_LOADING:[90,190], METRIX_SHEET:[14,14,14], METRIX_LEAD:[82,52,52], METRIX_MARGIN:[41,26,52] } ); 対応ブラウザ（確認済み） ============================================================ IE8 Safari3.0/5.1 Firefox3.6.0/11 Opera11 Chrome11 標準準拠モード 改変・転載・再配布について ============================================================ だぶ巻きスクリプトファイル（JavaScriptファイル）はMITラインセンスの利用条件に準拠します。 下記著作権表記を記載することを条件に、商用、非商用にかかわらず、自由に改変、ご利用頂けます。 このライブラリを使用したことにより不具合等が生じた場合でも、作者は一切の責任を負いません。 画像ファイルは神崎水裕が著作権を保持しています。 改変や合成を禁止します。 『だぶ巻スクリプトファイル』と同梱し、だぶ巻デザインとして使用する場合に限り、商用、非商用にかかわらず自由に再配布可能です。 ご要望がありましたら、Wings-Windsまでご報告頂けると幸いです。 ************************************************************ Wings-Winds http://www.wi-wi.jp/ Copyright (c) 神崎渉瑠, 2012 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 更新履歴 2012.04.10 ver.1.0 公開 ************************************************************