AI编程助手
AI免费问答

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

  2016-06-24 12:09   1598浏览 原创

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


回复讨论(解决方案)

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

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><meta><title>无标题文档</title>  <style>#div1{ position:relative;height:800px; border:1px solid red;}#div1 div{ position:absolute;border:1px solid gray;}</style><div>
<div><a>CSDN</a></div>
<div><a>@@##@@</a></div>
<div>姓名<input>
</div>
<div><select><option>选择</option></select></div>
<div>helloworld</div>
</div><script>    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>  

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

我的意思是弹出层上就是圆环,比如圆环被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的方法,做一张图片 然后画热点吧 热点支持多边形,嘎嘎

前端入门到VUE实战笔记:立即学习
>在学习笔记中,你将探索 前端 的入门与实战技巧!

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。