************************************************************
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が指定されているため、最後の2コマは表示されません。
アニメーション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 公開
************************************************************