公式配布ページ

• 集中線を追加するJQueryプラグイン「Booom」がバージョンアップ | STACKSTOCK

jQueryとプラグインの読み込み

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="./js/booom.js"></script>

jQueryとBooomプラグインを読み込みましょう。

使い方

div要素などで囲って $(指定したい要素).Booom(); といった感じで記述します。

<div class="line">
  <img src="pakutaso_kyouhei.jpg" alt="" title="" width="610" />
</div>

<script>
$(function(){
	$(".line").Booom();
});
</script>

画像に集中線が追加されました！
ちなみにこのデフォルトの集中線はプラグイン内にbase64エンコードされたデータが格納されているようなので、集中線の画像をファイルとして配置しなくてもこのように表示してくれます。

集中線の座標をずらす

オプションで width や height を指定すると集中線の座標を中心からずらすことができます。

<div class="line">
  <img src="pakutaso_kyouhei.jpg" alt="" title="" width="610" />
</div>

<script>
$(function(){
  $(".line").Booom({ width:-60, height:-80 });
});
</script>

集中線の画像を指定する

オプションで path を指定するとオリジナルの集中線を指定できます。

<div class="line">
  <img src="pakutaso_kyouhei.jpg" alt="" title="" width="610" />
</div>

<script>
$(function(){
  $(".line").Booom({ width:-60, height:-80, path:"line.png" });
});
</script>