BLOGTIMES
« :: »
2017/12/07

HTML の任意の要素を矢印で結んでくれる LeaderLine が便利そう

  javascript 
このエントリーをはてなブックマークに追加

LeaderLine Sample - HTML の任意の要素を矢印で結んでくれる LeaderLine が便利そう

LeaderLineという HTML の要素を矢印で結んでくれるライブラリが便利そうだったのでメモ。

† 実際の使用例

使い方は簡単で leader-line.min.js を読み込んだら、LeaderLine というオブジェクトを作るだけです。
npm に入っているので今回は jsdelivr からロードするようにしてみました。

極簡単な例ですが、start と end を矢印で結ぶとこんな感じになります。モダンな見た目なのが、なかなかいいですね。

ここから　　　　　ここまでを矢印でつなぐ。

実際のコードもこんな感じでシンプルな記述です。

<span id="start" style="background-color: mintcream">ここ</span>から 　　　　　<span id="end" style="background-color: mintcream">ここ</span>までを矢印でつなぐ。 <script src="https://cdn.jsdelivr.net/npm/leader-line@1.0.1/leader-line.min.js"></script> <script>new LeaderLine( document.getElementById('start'), document.getElementById('end'), { dash: {animation: true}, startSocketGravity: [100, -70], endSocketGravity: [-100, 70], color: 'rgba(30, 130, 250, 0.5)' } ); </script>

† 参考


    by hsur at 21:04 [5年前][4年前][3年前][2年前][1年前][1年後][2年後][3年後][4年後][5年後] |
    こんな記事もあります 「オブジェクト HTML 例示」
    ・福岡銀がデマの投稿者への刑事告訴を検討中
    ・世界サーバ投げ選手権 (WSTC) が開催されるらしい
    ・ローマ字表記のルールが変わる？
    ・有機 EL テレビのリサイクル料は 2,970 円に
    ・バレット食道？
    ・Amazon の無料配送の基準額が 2000円 → 3500円に
    ・Google が AI によるファイル判別ツールをリリース
    ・公的資金の研究成果は無料で即時公開するように義務づけ
    ・新型コロナワクチン接種証明書アプリがサービスを終了
    ・今年も確定申告がスタート
    トラックバックについて
    Trackback URL:
    お気軽にどうぞ。トラックバック前にポリシーをお読みください。[policy]
    このエントリへのTrackbackにはこのURLが必要です→https://blog.cles.jp/item/9808
    Trackbacks
    このエントリにトラックバックはありません
    Comments
    愛のあるツッコミをお気軽にどうぞ。[policy]
    古いエントリについてはコメント制御しているため、即時に反映されないことがあります。
    コメントはありません
    Comments Form

    コメントは承認後の表示となります。
    OpenIDでログインすると、即時に公開されます。

    OpenID を使ってログインすることができます。

    Identity URL: Yahoo! JAPAN IDでログイン

    « :: »
    Copyright © 2004-2023 by CLES All Rights Reserved.