NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

指定した範囲内で大きな画像や写真をドラッグして動かせるようにする「Dragscroll」

2015年6月10日jQueryプラグイン活用

指定した範囲内で大きな画像や写真をドラッグして動かせるようにする「Dragscroll」

「Dragscroll」は指定した範囲内で大きな画像や写真をドラッグして動かせるようにすることができます。JSを読みこみドラッグさせる要素の親要素にclass=”dragscroll”を追加すると、その子要素がドラッグで動くようになります。

デモページ

HTML

<div class="dragscroll"><img src="img01.jpg"></div>

CSS

.dragscroll {
	width: 80%;
	height: 300px;
	margin: 0 auto 60px;
	overflow: auto;
	cursor : -webkit-grab;
	cursor : -moz-grab;
	cursor : -o-grab;
	cursor : grab;
}
.dragscroll:active {
	cursor : -webkit-grabbing;
	cursor : -moz-grabbing;
	cursor : -o-grabbing;
	cursor : grabbing;
}

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

  1. 指定した範囲内で大きな画像や写真をドラッグして動かせるようにする「Dragscroll」

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com