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

sharpor 2012-04-06 11:40:47

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

...全文

164 13 打赏收藏转发到动态举报

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

bennman 2012-04-10

打赏
举报

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

zhoulina251314 2012-04-10

打赏
举报

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

zhoulina251314 2012-04-10

打赏
举报

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

lgc8023 2012-04-10

打赏
举报

看过这个贴，表示无语~

wzhiyuan 2012-04-07

打赏
举报

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

wzhiyuan 2012-04-07

打赏
举报

圆环本身js没办法做，你在弹出层上用一个圆环背景图不就行了？
至于分几段，我这个里是一堆元素，随便你分几段，就用几个元素，你显示文字什么的都可以随便改，
当然如果要每个字都是在环形上排列，除非你把每个字都动态建一个元素，否则不可能。
则于你说的用户选择几段什么的，老是说我没看明白。
用户可以选择什么，我的思想里HTML只有select checkbox radio这几个东西才叫选择，不知道文字怎么选择法

sharpor 2012-04-07

打赏
举报

对不起，我可能没有描述清楚。

我的意思是弹出层上就是圆环，比如圆环被3等分，每个段上显示一些信息。用户可以选择这3段。

sharpor 2012-04-07

打赏
举报

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

sharpor 2012-04-07

打赏
举报

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

sharpor 2012-04-07

打赏
举报

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

Acesidonu 2012-04-07

打赏
举报

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

wzhiyuan 2012-04-07

打赏
举报

如果你是固定的几个栏目，就是CSS绝对定位一下不就可以了，这里样式中的left top我没有写，你自己调一下。这种就是一个背景图，和几个元素的定位。
<style>
#div1{position:absolute;width:300px;height:300px;background:url('circle.gif') no-repeat;}
#div1 a{position:absolute;}
#a1{left:xxpx;top:xxpx;}
#a2{left:xxpx;top:xxpx;}
#a3{left:xxpx;top:xxpx;}
</style>
<div id="div1">
<a id='a1' >注册</a>
<a id='a2'>登录</a>
<a id='a3'>注销</a>
</div>

wzhiyuan 2012-04-06

打赏
举报

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



<!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>