no-image

JavaScript

HTML要素を回転させれる「jquery-ui-rotatable」

jquery-ui-rotatableはHTML要素を回転させれるjQuery UIのプラグインです。HTML要素に小さいハンドルが追加されるので、ここから好きな角度に回転できます。オプションもたくさん用意されていてカスタマイズ性も良好です。

jquery-ui-rotatable

デモ

デモページにはたくさんのサンプルが設置されています。各要素には小さい回転矢印アイコンが表示されていて、ここをドラッグすることでその要素を回転できるようになっています。スムーズに回転する動きがいい感じですね。

デモでは回転だけではなくドラッグ移動やリサイズできる要素も中にはあります。例えば、上から3つ目の要素にはボックスの右下にリサイズのアイコンが表示されています。ここをドラッグすることで要素のボックスサイズを自由に調節できるようになっています。

また、jquery-ui-rotatableにはたくさんのオプションが用意されています。スタート時の角度設定やハンドルの画像設定など、いろいろな項目のセッティングが可能です。

主なオプションは、angle、degrees、handle、handleOffset、radians、rotationCenterOffset、snap、step、start、transforms、wheelRotateです。

そのほか、スタート、回転、ストップによるコールバックの指定などもできます。

jquery-ui-rotatable

関連記事

  1. jquery.confirm

    JavaScript

    jQueryとBootstrapを使ったボタンとリンクによるダイアログ実装「jquery.confi…

    jquery.confirmは、ページ内のボタンやリンクをクリックする…

  2. Tippy.js

    JavaScript

    軽量ながらも多彩なツールチップを実装できるJSライブラリ「Tippy.js」

    Tippy.jsは軽量でありながらも多彩なツールチップを実装することが…

  3. Material ScrollTop Button
  4. jQuery-TimelineMe

    JavaScript

    シンプルなタイムラインを簡単につくれる「jQuery-TimelineMe」

    jQuery-TimelineMeは、タイムラインを簡単に構築すること…

  5. AnimateScroll

    JavaScript

    面白いエフェクトのページ内スクロールを実装できるjQueryプラグイン「AnimateScroll」…

    ページの任意の場所にスクロールできるjQueryプラグイン「Anima…

  6. no-image

    JavaScript

    Bootstrap 4を使ったステッパープラグイン「bs-stepper」

    bs-stepperはBootstrap 4を使ったステッパーを実装で…

最近の記事

  1. ブラジルイパネマ
  2. 梅しば
  3. BM-IBCDH13RD
  4. 雪
  5. ホットのドリップ

アーカイブ

PAGE TOP