请教如何做一个弹出环形的选择器？_html/css

首頁

web前端

html教學

请教如何做一个弹出环形的选择器？_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:09 PM

即选择项都是分布在环形的一圈上。
有朋友知道怎么做么？
或者知道有做的比较好看的网站，我去学习一下。谢谢了。

回复讨论(解决方案)

把元素绝对定位在某中心四周排列就行了，但你说的选择项是什么？
我给你个例子吧

<!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="/static/imghwm/default1.png"  data-src="http://c.csdn.net/bbs/t/5/i/pic_logo.gif"  class="lazy"     / alt="请教如何做一个弹出环形的选择器？_html/css_WEB-ITnose" ></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只有select checkbox radio这几个东西才叫选择，不知道文字怎么选择法

你如果有想法，做个图出来是最好的，不然大家不一定猜得懂你的意思的

弄个背景，三段并列定义点击事件就行了。

我的意思
C:\Documents and Settings\User\My Documents\QQ截图未命名10.png

咋从本地上传个图片呢？我看插入图片是要求输入一个http的网址..

就是我头像的这种效果。thx.

如果你是固定的几个栏目，就是CSS绝对定位一下不就可以了，这里样式中的left top我没有写，你自己调一下。这种就是一个背景图，和几个元素的定位。

看过这个贴，表示无语~

不是很明白，如果对flash不限制的话，建议用flash去实现

你意思是不是点击圆的某个部分的时候，当前部分的圆弧移动出来还是什么意思？

告诉你一个最牛X的方法，做一张图片然后画热点吧热点支持多边形，嘎嘎

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

HTML：建立網頁的結構Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract