[JS]限られた領域内で大きい画像をドラッグでスライドできるスクリプト -SpryMap

大きい画像を限られた領域内に表示し、Googleマップのようにマウスのクリックとドラッグでその画像をアニメーションでスライドできるスクリプトを紹介します。

SpryMap
デモページ

[ad#ad-2]

スクリプトはjQueryなどの他のライブラリは必要とせず、単独で動作します。

SpryMapの特徴

• 他のライブラリに依存せずに動作する超軽量（3KB）のスクリプト。
• 画像を表示する領域はピクセル単位で指定が可能。
• 画像を最初に表示する座標を設定可能。
• スクロールのアニメーションの時間を設定可能。

SpryMapの実装

実装は簡単で、画像にidを指定して使用します。

HTML

スクリプトでラッパーとなるdiv要素を追加します。divのclassはオプションで設定できます。

<img id="worldMap" src="map.jpg" alt="A map of the world." />

JavaScript

「spryMap.js」を外部ファイルとして記述し、下記のスクリプトを記述します。

window.onload = function() {
	var map = new SpryMap({id : "worldMap",
		height: 400,
		width: 800,
		startX: 200,
		startY: 200,
		cssClass: "mappy"});
}

画像に任意のclass「mappy」を付与しています。

[ad#ad-2]

SpryMapのオプション

スクリプトのオプションは、下記のようになります。

JavaScript

var map = new spryMap({
// 使用する画像のidを記述
	id : "",
// 画像を表示する領域の幅（px）
	width: 800,
// 画像を表示する領域の高さ（px）
	height: 800,
// 最初に表示する座礁（X軸）
	startX: 0,
// 最初に表示する座礁（Y軸）
	startY: 0,
// 止まる際のアニメーションの有無
	scrolling: true,
// スクロールする際の時間（ms）
	scrollTime: 300,
// エッジを超えて移動した際の処理
	lockEdges: true,
// 画像のラッパーとなるdiv要素のclass
	cssClass: ""
});