画像のドラッグを実装「JQ Image Drag」
当ページのリンクには広告が含まれています。
スポンサーリンク
画像のドラッグを実装するプラグイン「JQ Image Drag」を紹介します。
jQueryプラグイン「JQ Image Drag」
このプラグインを使えば、要素を指定するだけで簡単に画像のドラッグを実装することができます。しかも、ドラッグした距離（px）まで表示してくれます。
画面に入りきらない大きな画像をドラッグで表示させるユーザー補助や画像の一部をあえて見せないようにしてユーザーのドラッグで衝撃画像が！みたいなネタとして使えるかもしれません。
スポンサーリンク
デモの画像をドラッグしてみてください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="description" content="jQuery Tridのデモでーす。">
<title>JQ Image Drag - jQuery Plugin Demo</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="jquery.imagedrag.js"></script>
<script>
$(function(){
$('.demo').imagedrag({
input: "#output",
position: "top",
attribute: "html"
});
});
</script>
<style type="text/css">
.demo {
width: 900px;
height: 300px;
overflow: hidden;
cursor: -webkit-grab;
}
</style>
</head>
<body>
<h1>JQ Image Dragのデモでーす</h1>
<p>画像をドラッグしてみてください。</p>
<div class="demo">
<img src="image.jpg" alt="JQ Image Drag" style="width:1024px; height:768px;"/>
</div>
<p>こんだけ動かしたよ → <span id="output"></span></p>
</body>
</html>
スポンサーリンク