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

This by Tinrocket背景にあわせてテキストを見やすく挿入できるiPhoneアプリ「This by Tinrocket」前のページ

シンプルなイメージカルーセルを実装できる「Boishakh carousel」次のページno-image

関連記事

  1. GoogleSheets-HTMLImporter
  2. Playful Little Tooltip Ideas
  3. no-image

    JavaScript

    スワイプでのスライドもできるシンプルなスライダー「jquery-slide」

    jquery-slideはスワイプでのスライドにも対応したシンプルなス…

  4. Freewall

    JavaScript

    レスポンシブ対応のグリッドレイアウトを実装できるjQueryプラグイン「Freewall」

    FreewallというjQueryプラグインを使えばレスポンシブに対応…

  5. jquery.simple-scroll-follow
  6. Clock Timepicker Plugin for jQuery

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP