ポップアップリングセレクターの作り方を教えてください。 _html/css

ポップアップリングセレクターの作り方を教えてください。 _html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:09:46

オリジナル

1344 人が閲覧しました

つまり、リングの円の中に選択項目が配置されます。
これを行う方法を知っている人はいますか？
または、より見栄えの良い Web サイトをご存知の場合は、そこから学びます。ありがとう。

ディスカッションへの返信（解決策）

要素を絶対的に配置し、特定の中心の周りに配置するだけですが、あなたが話しているオプションは何ですか?
例を挙げましょう

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title>  <style type="text/css" >#div1{ position:relative;height:800px; border:1px solid red;}#div1 div{ position:absolute;border:1px solid gray;}</style></head><body><div id="div1"><div><a href="">CSDN</a></div><div><a><img src="http://c.csdn.net/bbs/t/5/i/pic_logo.gif"   /></a></div><div>姓名<input size="5" /></div><div><select><option>选择</option></select></div><div>helloworld</div></div><script type="text/javascript" >    var centerx = 400; //圆心X    var centery = 300; //圆心Y    var r = 300; //半径    var odivs = document.getElementById("div1").getElementsByTagName("DIV"); //图片集合    var cnt = odivs.length; //图片数    var da = 360 / cnt; //图片间隔角度     for (var i = 0; i < cnt; i++) {        odivs[i].style.left = centerx + r * Math.cos(da * i  / 180 * Math.PI) + "px";        odivs[i].style.top = centery + r * Math.sin(da * i  / 180 * Math.PI) + "px";    }     </script> </body> </html>

ログイン後にコピー

申し訳ありませんが、明確に説明できていないかもしれません。

どういうことかというと、ポップアップレイヤー上にリングがあり、そのリングが3等分され、それぞれのセグメントに何らかの情報が表示されます。ユーザーはこれら 3 つのセグメントを選択できます。

指輪自体はjsでは作成できませんが、ポップアップレイヤーに指輪の背景画像を使用することはできますか？
複数の段落に分割する場合は、必要なだけ複数の段落に分割できます。
もちろん、必要に応じて変更できます。すべての単語を円の中に配置することは、単語ごとに動的に要素を作成しない限り不可能です。
ユーザーが選択できる段落の数についてあなたが言ったことについては、いつも理解できないと言われます。
ユーザーは何を選択できますか? 私の考えでは、HTML には選択、チェックボックス、ラジオしかありません

アイデアがある場合は、画像を作成するのが最善です。必ずしも推測する必要はありません

背景を作成し、クリックイベントを 3 つの段落で並行して定義するだけです。

どういう意味ですか
C:Documents and SettingsUserMy DocumentsQQ スクリーンショット unnamed 10.png

ローカルから写真をアップロードするにはどうすればよいですか?画像を挿入するには http URL を入力する必要があることがわかりました...

これは私のアバターの効果です。 thx.

固定列がいくつかある場合は、CSS での絶対位置を指定するだけで十分です。ここではスタイルに左上を記述しません。これは背景画像といくつかの要素の配置です。

登録
ログアウト<

この投稿を見て絶句しました〜

Flashに制限がない場合はFlashを使用して実装することをお勧めします

ということでしょうか。円の特定の部分をクリックすると、円弧の現在の部分が移動することは何を意味しますか?

最も素晴らしい方法を教えてください。画像を作成してから、ホットスポットがポリゴンをサポートしています。すごいです