Contents
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>LeapMotionSample</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://js.leapmotion.com/0.3.0/leap.js"></script>
<script src="http://sample.com/javascript/main.js"></script>
<style>
#pictures img {
display: inline-block;
}
div#pictures {
white-space: nowrap;
overflow-x: scroll;
margin-top: 200px;
}
</style>
</head>
<body>
<div id="pictures">
<img src="http://sample.com/images/1.jpg" style="width:300px; height:180px" />
<img src="http://sample.com/images/2.jpg" style="width:300px; height:180px" />
<img src="http://sample.com/images/3.jpg" style="width:300px; height:180px" />
<img src="http://sample.com/images/4.jpg" style="width:300px; height:180px" />
<img src="http://sample.com/images/5.jpg" style="width:300px; height:180px" />
<img src="http://sample.com/images/6.jpg" style="width:300px; height:180px" />
<img src="http://sample.com/images/7.jpg" style="width:300px; height:180px" />
<img src="http://sample.com/images/8.jpg" style="width:300px; height:180px" />
<img src="http://sample.com/images/9.jpg" style="width:300px; height:180px" />
<img src="http://sample.com/images/10.jpg" style="width:300px; height:180px" />
</div>
</body>
</html>
$(document).ready(function() {
var controller = new Leap.Controller({enableGestures: true});
var position = 0;
controller.gesture('swipe').stop(function(g) {
var stopGesture = g.gestures[g.gestures.length - 1];
var startX = stopGesture.startPosition[0];
var stopX = stopGesture.position[0];
position += (startX - stopX) * 2;
$("#pictures").animate({scrollLeft: position + "px"}, "fast");
});
controller.connect();
});
