私はサイズ変更可能なサークルを作成していて、正常に動作しないときは正常に動作しないため、CSSの中央にピボットを持つサークルを作ることができるかどうか尋ねたかった。私はjQueryを使ってサイズを滑らかにしていますが、円のピボットは中間ではなく、その上にあります。ですから、私がresize関数を呼び出すと、円は通常の代わりに下に向かってサイズが変更されます。CSSのピボットを中心に円を描く
1
A
答えて
2
円の位置を保持するには、円の位置(実際にdiv)を絶対に設定し、左と上を自分で設定する必要があります。あなたはあなたが左と上をリセットする必要があるすべてのリサイズで。高さの
width:100px;
height:100px;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;
量を(移動)あなたの設計に依存しているが、マージンはオールウェイズdiv要素のサイズの半分でなければなりません:あなたはこれを行うことができます何かの中央に円を維持する
円のサイズを変更するには、範囲入力を使用しました。このjQueryコードを実行しました:
$('input[type="range"]').change(function(){
$('#c')
.width($(this).val())
.height($(this).val())
.css('border-radius', $(this).val()/2)
.css('margin-left', $(this).val()/-2)
.css('margin-top', $(this).val()/-2);
});
このコードをクリーンアップすることはできますが、動作します。例を見て:
http://jsfiddle.net/mohsen/4PHMj/
アップデート:ここで
は、よりクリーンなコードです:http://jsfiddle.net/mohsen/4PHMj/7/
2
これをチェックしてくださいhttp://raphaeljs.com/
それは何ですか?
Raphaëlは、ウェブ上のベクターグラフィックスを使用して作業を簡素化する小さなJavaScriptライブラリです。たとえば、独自のチャートや画像の切り抜きや回転ウィジェットを作成する場合は、このライブラリを使用して単純かつ簡単に達成できます。
+0
+1非常に便利なライブラリです。 Thx to Raph and you –
関連する問題
- 1. PointFを中心に円を描くC#
- 2. ギャラクシーネクサス、中心の円を描く
- 3. iOS-中心と半径を持つ円を描く
- 4. html5の中心ピボットを中心にコンテンツを回転する
- 5. SVGに中空の円を描く
- 6. CSS - 同心円
- 7. SVGアニメーション:中心から線を描く
- 8. 円で円を描く
- 9. 同心円の六角形を描く方法は?
- 10. 円セクターを描く
- 11. 矩形に円を描く
- 12. 楕円の中に複数の塗りつぶした円弧を描く
- 13. メニューボタンを中心にCSSドロップダウンメニュー
- 14. 円を見つけて円を描く?
- 15. Googleマップのポイントを中心に半径を描く
- 16. 円の部分を描く
- 17. CSS中心テキスト
- 18. 斬新な円弧を描くアンドロイドドロウダブル円
- 19. タッチポイントで中心を持つキャンバスに矩形を描く
- 20. Androidで円を描いて円を描く
- 21. 半円を描く方法
- 22. WPFで円を描く
- 23. Mapkitで円を描く
- 24. Mac用の描画中心のCSS/Webdesignアプリですか?
- 25. Python PIL:イメージの途中で楕円を描く方法は?
- 26. 既存の画像に円を描く
- 27. Openlayers OpenStreetMapsレイヤーのポリゴンに円を描く
- 28. Google Maps v3で中空円を描く方法
- 29. Googleマップを使用して不規則な同心円を描く
- 30. pie-d3グラフの円内に円を描く
はい、それが可能です。しかし、あなたのコードを見ることなく、あなたが何をしているのかわからないので、助けが不可能に近いです。または方法。 –
私は基本的なCSSサークルを使用しています - 幅、高さ+ウェブキット/ moz-border-radius ... –
あなたのコードをあなたの質問に集めてください。 – Kyle