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. no-image

    JavaScript

    シンプルなイメージカルーセルを実装できる「Boishakh carousel」

    Boishakh carouselはシンプルなイメージカルーセルを実装…

  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでsetTimeoutを使えば各要素のアニメーションを実行させる時間を調整できる

    jQueryのsetTimeoutを使えば何秒後に実行するかといったこ…

  3. no-image
  4. WEB TICKER

    JavaScript

    テキストや画像を無限にスクロールさせれるティッカー実装「WEB TICKER」

    WEB TICKERは、テキストや画像、リストなどさまざまなコンテンツ…

  5. Nex

    JavaScript

    ダイナミックで美しいフルスクリーンのjQueryスライダーを実装できる「Nex」

    Nexはダイナミックで様々なアニメーションエフェクトが用意されたフルス…

  6. Slinky

    JavaScript

    モバイルライクなナビゲーションメニューを実装できる「Slinky」

    Slinkyは軽量でレスポンシブに対応したモバイルライクなナビゲーショ…

最近の記事

  1. Anker PowerWave 10 Pad & Stand セット
  2. ミノン メン 薬用全身シャンプー

アーカイブ

PAGE TOP