マウスカーソルを動かした距離を測定 「Measure Cursor Distance」
当ページのリンクには広告が含まれています。
スポンサーリンク
マウスカーソルを動かした距離を測定するプラグイン「Measure Cursor Distance」を紹介します。
jQueryプラグイン「Measure Cursor Distance」
このプラグインを使えば、Webサイト上でユーザーが動かしたマウスカーソルの距離を測定することができます。
測定した数値は要素を指定するだけで、簡単に表示することができます。
スポンサーリンク
それではデモページでマウスを動かしまくってみてください。
ソース（ HTML + jQuery ）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Measure Cursor Distanceのデモでーす。">
<title>Measure Cursor Distance - jQuery Plugin Demo</title>
<link rel="stylesheet" href="css/odometer-theme-car.css">
</head>
<body>
<h1>Measure Cursor Distance のデモでーす。</h1>
<h2>あなたがカーソルを動かした距離は？ → <span class="distance-container" id="current-distance"></span> [m]</h2>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script src="js/jquery.cursormeter.min.js"></script>
<script src="js/odometer-patched.js"></script>
<script src="js/jquery.syntaxhighlighter.min.js"></script>
<!-- <script src="js/init.js"></script> -->
<script>
$(function() {
var cursorMeter = $.cursorMeter({
autoUnitsConverter: false,
unitsBase: 'm'});
var current = new Odometer({
el: $('#current-distance').get(0),
});
});
</script>
</body>
</html>
スポンサーリンク