Movatterモバイル変換


[0]ホーム

URL:


BLOGTIMES

cles::blog

平常心是道
« :: »
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>

参考


    byhsur at 21:04[5年前][4年前][3年前][2年前][1年前][1年後][2年後][3年後][4年後][5年後] |
    こんな記事もあります 「オブジェクト HTML JavaScript
    福岡銀がデマの投稿者への刑事告訴を検討中
    世界サーバ投げ選手権 (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.
    サイト内検索
    検索ワードランキング
    へぇが多いエントリ
    閲覧数が多いエントリ
    1 .アーロンチェアのポスチャーフィットを修理(99665)
    2 .年次の人間ドックへ(99081)
    3 .福岡銀がデマの投稿者への刑事告訴を検討中(99070)
    4 .三菱鉛筆がラミーを買収(98680)
    5 .2023 年分の確定申告完了!(1つめ)(98649)
    最新のエントリ
    cles::blogについて
    誰が書いてる?
    最近行った場所
    サイトポリシー
    タグ一覧
    検索ワードランキング

    Referrers

      Powered by CLES
      Nucleus CMS v3.31SP3/w memcached
      21376056(W:6681 Y:1720 T:0155)
      cles::blogのはてなブックマーク数
      benchmark


      [8]ページ先頭

      ©2009-2025 Movatter.jp