ここでは画面クリックでわっかを表示jQuery pointerの紹介をしていきます。

デモはこちら
https://office-goto.info/demo/pointer/

pointer.jsのダウンロード
http://nejimaki-act.com/lab/pointer/
nejimakiact様

head内で読み込み

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script><script type="text/javascript" src="pointer.js"></script>

pointer.jsを読み込んでください。これだけでわっかが表示されるようになります。

カスタマイズ

pointer.js

var settings = {
    size : 130,
    spd : 500,
    color : "#ffc3dd"
}
settings = $.extend(settings, options);

var circle_style = {
    "position":"absolute",
    "z-index":9999,
    "height":10,
    "width":10,
    "border":"solid 4px "+settings.color,
    "border-radius":settings.size
}

サイズ、スピード、色を設定できます。
var settings = {} 内をお好みに設定してください。