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