基于javascript实现按圆形排列DIV元素(二)

基于JavaScript实现按圆形排列DIV元素的完整攻略如下：

步骤1：构建HTML结构

首先，我们需要构建一个HTML页面，并在其中添加一个父级div元素和一些子级的div元素。父级div元素用于容纳所有子级div元素，并设置其宽度和高度为固定值，例如600px。子级div元素用于显示实际内容，我们只需要设置它们的宽度和高度即可。

<div id="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  ...
</div>

步骤2：基于CSS样式实现布局

然后，我们使用CSS样式来实现子级div元素的布局，将它们排成一个圆形。一个常见的布局方法是使用绝对定位和transform属性，将每个子级div元素按照一定的角度旋转到固定的位置。

.item {
  position: absolute;
  width: 80px;
  height: 80px;
  transform-origin: center;
}

.item:nth-child(1) {
  transform: rotate(0deg) translate(150px) rotate(0deg);
}

.item:nth-child(2) {
  transform: rotate(45deg) translate(150px) rotate(-45deg);
}

.item:nth-child(3) {
  transform: rotate(90deg) translate(150px) rotate(-90deg);
}

.item:nth-child(4) {
  transform: rotate(135deg) translate(150px) rotate(-135deg);
}

/* 更多item元素样式可以继续添加 */

这些代码将子级div元素排列成一个正方形，其中每个子级div元素都有相同的宽度和高度，并且它们共享相同的旋转角度。下一步是将这个正方形布局转换成一个圆形布局。

步骤3：实现圆形布局效果

要实现圆形布局效果，我们需要修改CSS样式，使得每个子级div元素都位于一个圆周上，而不是从中心点出发。为了实现这一点，我们需要计算每个子级div元素的位置，并将其用作transform属性中的translate参数。

var container = document.getElementById('container');
var items = container.getElementsByClassName('item');
var radius = container.offsetWidth / 2 - items[0].offsetWidth / 2;
var angle = 360 / items.length;

for (var i = 0; i < items.length; i++) {
  var x = Math.round(radius * Math.sin((angle * i) * Math.PI / 180));
  var y = Math.round(radius * Math.cos((angle * i) * Math.PI / 180));
  items[i].style.transform = 'translate(' + x + 'px, ' + y + 'px)';
}

这段代码使用Sin和Cos函数计算出每个元素在固定半径上的x和y坐标，然后将这些坐标作为translate属性的值，将元素移动到正确的位置。

示例1：增加定时器，使每个元素按照自己的速度围绕圆形移动

var container = document.getElementById('container');
var items = container.getElementsByClassName('item');
var radius = container.offsetWidth / 2 - items[0].offsetWidth / 2;
var angle = 360 / items.length;

function moveItems() {
  for (var i = 0; i < items.length; i++) {
    var speed = Math.random() + 0.5;
    var currentAngle = AngleOfElement(items[i]);
    var newAngle = currentAngle + speed;
    var x = Math.round(radius * Math.sin((newAngle) * Math.PI / 180));
    var y = Math.round(radius * Math.cos((newAngle) * Math.PI / 180));
    items[i].style.transform = 'translate(' + x + 'px, ' + y + 'px)';
  }
}

function AngleOfElement(element) {
  var transform = element.style.transform;
  var match = /rotate\(([0-9\.]+)deg\)/.exec(transform);
  if (match) {
    return parseFloat(match[1]);
  } else {
    return 0;
  }
}

setInterval(moveItems, 30);

这段代码增加了一个定时器，将每个元素按照自己的速度围绕圆形移动。我们首先为每个元素定义一个“速度”，然后在每次定时器触发时，根据速度和当前角度计算出当前位置，最后将元素移动到新的位置。注意，我们还需要编写一个辅助函数AngleOfElement，用于解析transform属性中的当前角度。

示例2：增加鼠标移入移出事件，使每个元素在鼠标移入时快速移动到另一个随机位置，在鼠标移出时返回到原位置

var container = document.getElementById('container');
var items = container.getElementsByClassName('item');
var radius = container.offsetWidth / 2 - items[0].offsetWidth / 2;
var angle = 360 / items.length;

container.addEventListener('mouseover', function() {
  for (var i = 0; i < items.length; i++) {
    var x = Math.round(Math.random() * radius * Math.sin((angle * i) * Math.PI / 180));
    var y = Math.round(Math.random() * radius * Math.cos((angle * i) * Math.PI / 180));
    items[i]._originalTransform = items[i].style.transform;
    items[i].style.transform = 'translate(' + x + 'px, ' + y + 'px)';
  }
});

container.addEventListener('mouseleave', function() {
  for (var i = 0; i < items.length; i++) {
    items[i].style.transform = items[i]._originalTransform || '';
  }
});

这段代码增加了两个事件监听器，用于处理鼠标移入移出事件。我们首先在鼠标移入时，为每个元素计算出一个随机位置，并将这些位置设置为元素的新transform属性。同时，我们还将原始的transform属性保存在元素的_originalTransform属性中，以便在鼠标移出时可以还原。注意，这里我们使用了动态创建属性的语法，因为我们需要访问元素的_transform属性，而该属性本身在元素上不存在。在鼠标移出时，我们只需要将元素的transform属性还原即可。如果元素没有_originalTransform属性，我们还需要将transform设置为空字符串，以确保元素恢复到原始的位置。

以上就是基于JavaScript实现按圆形排列DIV元素的完整攻略，希望对你有所帮助。