今日の人気記事

  1. Bootstrapを利用した画像ポップアップ・スライダー「Bootstrap Image Gallery」
  2. ページごとに画面をスクロール遷移「Scrollify」

マウスカーソルを動かした距離を測定 「Measure Cursor Distance」

スポンサーリンク

マウスカーソルを動かした距離を測定するプラグイン「Measure Cursor Distance」を紹介します。

jQueryプラグイン「Measure Cursor Distance」

このプラグインを使えば、Webサイト上でユーザーが動かしたマウスカーソルの距離を測定することができます。

測定した数値は要素を指定するだけで、簡単に表示することができます。

スポンサーリンク

それではデモページでマウスを動かしまくってみてください。

「Measure Cursor Distance」のデモ

ソース( 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>
スポンサーリンク

関連記事(一部広告含む)