Heim >Web-Frontend >HTML-Tutorial >请教如何做一个弹出环形的选择器？_html/css_WEB-ITnose
请教如何做一个弹出环形的选择器？_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:09:461361Durchsuche
即选择项都是分布在环形的一圈上。
有朋友知道怎么做么？
或者知道有做的比较好看的网站，我去学习一下。谢谢了。
回复讨论(解决方案)
把元素绝对定位在某中心四周排列就行了，但你说的选择项是什么？
我给你个例子吧
<!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" / 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的方法，做一张图片 然后画热点吧 热点支持多边形，嘎嘎