如何使用css / html构建循环对话框

Question

我使用html / css构建移动应用程序以显示联系人列表。我想在附加的屏幕截图的行上显示呼叫/电子邮件的快捷方式。有关如何使用css / html进行此操作的任何想法？我已尝试使用JS进行一些更改以进行回调，但没有代表流行语。

Answer 1

根据Positioning divs in a circle上的答案进行一些更改后，您就可以这样做了。

我们的想法是使用三角函数和JavaScript将div放在一个圆圈中。

Fiddle

函数generate(n, r, id)有三个参数：n - div的数量，r - 半径和id - main案件。如果您打算更改r以外的变量100，则需要更改变量adjust以使其正确对齐。

HTML：

<div id="main"></div>

的JavaScript：

var theta = [];

var setup = function (n, r, id) {
    var main = document.getElementById(id);
    main.style.width = r * 2 + 'px';
    main.style.height = r * 2 + 'px';
    var adjust = 4.8;
    var mainHeight = parseInt(window.getComputedStyle(main).height.slice(0, -2));
    var circleArray = [];
    for (var i = 0; i < n; i++) {
        var circle = document.createElement('div');
        circle.className = 'circle number' + i;
        circleArray.push(circle);
        circleArray[i].posx = Math.round(r * (Math.cos(theta[i]))) + 'px';
        circleArray[i].posy = Math.round(r * (Math.sin(theta[i]))) + 'px';
        circleArray[i].style.position = "absolute";
        circleArray[i].style.backgroundColor = 'black';
        circleArray[i].style.top = ((mainHeight / 2 - (n * adjust)) - parseInt(circleArray[i].posy.slice(0, -2))) + 'px';
        circleArray[i].style.left = ((mainHeight/ 2 - (n * adjust)) + parseInt(circleArray[i].posx.slice(0, -2))) + 'px';
        main.appendChild(circleArray[i]);
    }
};

var generate = function(n, r, id) {
    var frags = 360 / n;
    for (var i = 0; i <= n; i++) {
        theta.push((frags / 180) * i * Math.PI);
    }
    setup(n, r, id)
}
generate(4, 100, 'main');

CSS：

div {
    box-sizing: border-box;
}

div#main {
    height: 100px;
    width: 100px;
    position: absolute;
    left: 5%;
    top: 5%;
    transform: rotate(45deg);
    border: 1px solid black;
    border-radius: 100px;
}

div.circle {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid black;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

^{如果您需要进行任何进一步的更改，请告诉我}