js+css 圆形环形 排列

JavaScript040

js+css 圆形环形 排列,第1张

项目需要做个环形的导航排列,网上找到一篇详细介绍原理的文章 javascript-按圆形排列DIV元素(一)---- 分析 ,然后尝试着把它实现了,效果图如下:

源码分享给大家哦,拿走不谢O(∩_∩)O

vue版本的根据项目需求做了些略微的修改

下面的数字其实是一个小列表ul li,你可以把li设置出边框 设置border-radius属性为50%,就能实现圆圈效果了.

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

<style>

    li{border:solid 1px purpleborder-radius:50%magin-right:10px }

</style>

//即可实现数字边框变成圆形

然后根据鼠标左键在菜单坐标内按下放开的事件提取当前鼠标的x,y坐标,然后修改属性菜单的top和left属性 或者当鼠标在菜单坐标内按下之后触发鼠标的移动事件,然后在移动事件里设置菜单的top和left对应鼠标当前坐标y和x,这样当鼠标移动时菜单的坐标也会根本改变,实现同步移动