请教如何做一个弹出环形的选择器？_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 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