Home >Web Front-end >HTML Tutorial >Please tell me how to make a pop-up ring selector? _html/css_WEB-ITnose
Please tell me how to make a pop-up ring selector? _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:09:461344browse
That is, the selection items are distributed in a circle of the ring.
Does anyone know how to do this?
If you know of a better looking website, I will go and learn from it. Thank you.
Reply to discussion (solution)
Just absolutely position the elements around a certain center, but what are the options you are talking about?
Let me give you an example
<!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> Sorry, I may not have described it clearly.
What I mean is that there is a ring on the pop-up layer. For example, the ring is divided into 3 equal parts, and some information is displayed on each segment. Users can select these 3 segments.
There is no way to make the ring itself using js. Can you just use a ring background image on the pop-up layer?
As for how many paragraphs it is divided into, I have a bunch of elements here. You can divide it into as many paragraphs as you want, just use a few elements, and you can change the displayed text or whatever.
Of course, if you want each word to be in Arrangement in a circle is impossible unless you dynamically create an element for each word.
As for what you said about how many paragraphs the user can choose, they always say I don’t understand.
What can users choose? In my mind, HTML only has select, checkbox and radio. I don’t know how to choose text.
If you have an idea, it would be best to make a picture. , otherwise people may not be able to guess what you mean.
Just create a background and define the click event in three parallel paragraphs.
What I mean
C:Documents and SettingsUserMy DocumentsQQ screenshot unnamed 10.png
How to upload a picture from local? I see that inserting a picture requires entering an http URL...
This is the effect of my avatar. thx.
If you have a few fixed columns, just use CSS absolute positioning. I didn’t write the left top in the style here. You can adjust it yourself. This is a background image and the positioning of several elements.
c9ccee2e6ea535a969eb3f532ad9fe89
#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;}
531ac245ce3e4fe3d50054a55f265927
fdad121881eba0db172e661337727885
4c680655c2d4f549d8665b5033ea38b9Register5db79b134e9f6b82c0b36e0489ee08ed
3af6fc61265b7e236553f681ab350d6d Login5db79b134e9f6b82c0b36e0489ee08ed
88a4f14d1b1a6a4ce93b2ef7120acadbLogout5db79b134e9f6b82c0b36e0489ee08ed
16b28748ea4df4d9c2150843fecfba68
I am speechless after seeing this post~
I don’t quite understand. If there are no restrictions on flash, it is recommended to use flash to implement it
Do you mean that when you click on a certain part of the circle, the arc of the current part moves out or something? mean?
Let me tell you the most awesome method, make a picture and then draw hot spots. Hot spots support polygons, quack