CSS与JavaScript实现圆形头像周围的星级评分布局-html教程-PHP中文网

CSS与JavaScript实现圆形头像周围的星级评分布局

本文详细介绍了如何在圆形头像或图片周围优雅地布局星级评分图标。通过两种主要方法——结合CSS transform与JavaScript动态计算，以及纯JavaScript利用三角函数精确控制——我们能够实现图标的圆形排列。教程将提供详细的代码示例，并探讨两种方法的实现原理、优缺点及应用场景，帮助开发者灵活创建美观且功能丰富的用户界面。

在现代网页设计中，为圆形用户头像或产品图片添加星级评分是常见的需求。然而，将评分星星以圆形路径环绕在图片周围，而非简单地堆叠在下方，需要一些巧妙的css和javascript技巧。本教程将深入探讨两种实现此效果的专业方法。

方法一：利用CSS transform与JavaScript动态定位

这种方法结合了CSS的强大转换能力和JavaScript的灵活性，通过计算每个星形图标的旋转角度和位移，将其精确地放置在圆形路径上。

核心原理

容器定位: 创建一个相对定位的父容器，用于包裹圆形图片和星级评分。
星形图标定位: 每个星形图标被放置在一个绝对定位的子容器中。
CSS transform: 使用 transform: rotate() translateX() 组合属性。首先，通过 rotate() 将图标容器旋转到其在圆周上的起始角度；然后，通过 translateX() 将其从中心点向外推出到所需的半径位置。
图标自身校正: 由于图标容器被旋转了，图标本身也会跟着旋转。为了让星星始终保持垂直，需要对图标应用一个反向的 rotate() 转换。
JavaScript计算: JavaScript负责动态生成星形图标，并根据总数、图标大小和容器半径计算每个图标的精确旋转角度和位移量。

HTML结构

首先，我们需要一个包含头像图片和未来星级评分的容器。为了使用Font Awesome图标，请确保引入其CSS库。

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="photo-container">
  <img style="width: 100%;" src="https://i.ibb.co/bmfXcFw/avatar.png" alt="Profile Avatar" />
</div>

登录后复制

CSS样式

定义容器的基本样式，使其成为一个圆形，并为评分图标提供占位符。

.photo-container {
  position: relative; /* 关键：用于绝对定位子元素 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  border-radius: 50%; /* 使容器成为圆形 */
  overflow: hidden; /* 隐藏超出容器的图片部分 */
  margin: 20px; /* 示例间距 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

.rating-container {
  position: absolute;
  inset: 0; /* 使评分容器覆盖整个父容器 */
}

.rating-container .icons-holder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.icons-holder > div {
  cursor: pointer;
}

.icons-holder > div .icon {
  color: orange; /* 星星颜色 */
}

.icons-holder > div .icon:hover {
  color: darkgoldenrod; /* 悬停效果 */
}

登录后复制

JavaScript逻辑

JavaScript负责计算和生成星形图标，并应用CSS transform。

立即学习“Java免费学习笔记（深入）”；

// 图标数量
const count = 5;
// 图标大小 (px)
const size = 18;
// 图标间距 (px)
const margin = 4;
// 整体旋转角度 (度) - 0度表示从右侧开始
const position = 0; // 例如：55度用于底部，120度用于左侧，240度用于顶部，330度用于右侧

// 获取所有图片容器
const photoContainers = document.querySelectorAll(".photo-container");

photoContainers.forEach((container) => {
  // 获取容器半径
  const r = container.offsetHeight / 2;
  // 计算图标的偏移量，用于调整translateX的精确值
  const offset = (size / Math.PI) * -1;

  const ratingContainer = document.createElement("div");
  ratingContainer.className = "rating-container";
  const iconsHolder = document.createElement("div");
  iconsHolder.className = "icons-holder";

  const posAngles = [];
  for (let i = 0; i < count; i++) {
    // 计算每个图标的旋转角度
    posAngles.push(i * (size + offset + margin));

    const div = document.createElement("div");
    div.style.position = "absolute";
    div.style.display = "block";
    div.style.height = `${size}px`;
    div.style.width = `${size}px`;
    // 应用旋转和位移，将图标放置在圆形路径上
    div.style.transform = `rotate(${posAngles[i]}deg) translateX(${r - size + Math.abs(offset)}px)`;

    const icon = document.createElement("span");
    icon.className = "icon fa fa-star"; // Font Awesome 星星图标
    icon.style.fontSize = `${size}px`;

    // 对图标进行反向旋转，使其保持垂直
    icon.style.transform = `rotate(${posAngles[i] * -1}deg)`;

    div.append(icon);
    iconsHolder.append(div);
  }

  // 应用整体旋转，调整所有图标的起始位置
  iconsHolder.style.transform = `rotate(${position}deg)`;
  ratingContainer.append(iconsHolder);
  container.append(ratingContainer);
});

登录后复制

注意事项

半径计算: r - size + Math.abs(offset) 是调整 translateX 距离的关键，它决定了星星距离圆心有多远。需要根据实际图标大小和希望的环绕紧密度进行微调。
图标方向: icon.style.transform = rotate(${posAngles[i] * -1}deg) 确保了星形图标在旋转后仍然朝上，这是一个常见的细节处理。
Font Awesome: 确保已正确引入Font Awesome CSS库，否则图标将无法显示。

方法二：纯JavaScript结合三角函数定位

这种方法不依赖CSS transform 的 translateX，而是直接通过三角函数计算每个图标在圆周上的 x 和 y 坐标，然后使用 left 和 top 属性进行定位。这种方法通常更易于理解和控制每个图标的精确位置。

核心原理

数学基础: 利用圆的参数方程 x = r * cos(theta) 和 y = r * sin(theta) 来计算圆周上点的坐标。其中 r 是半径，theta 是角度（弧度）。
角度转换: 将度数转换为弧度 theta * (Math.PI / 180)。
中心定位: 所有图标的定位都是相对于其父容器的中心点。
可配置选项: 封装成一个函数，允许用户通过参数控制图标数量、大小、间距、起始角度和旋转方向等。

HTML结构

为了展示可配置性，我们创建多个头像容器。

图像转图像AI

利用AI轻松变形、风格化和重绘任何图像

查看详情

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div style="display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-top: 20px;">
  <div class="avatar" style="width: 300px; height: 300px;">
    <img src="https://i.pravatar.cc/300?random=1" style="height: 100%" alt="Avatar 1" />
  </div>
  <div class="avatar">
    <img src="https://i.pravatar.cc/300?random=2" style="height: 100%" alt="Avatar 2" />
  </div>
  <div class="avatar">
    <img src="https://i.pravatar.cc/300?random=3" style="height: 100%" alt="Avatar 3" />
  </div>
  <div class="avatar">
    <img src="https://i.pravatar.cc/300?random=4" style="height: 100%" alt="Avatar 4" />
  </div>
  <div class="avatar">
    <img src="https://i.pravatar.cc/300?random=5" style="height: 100%" alt="Avatar 5" />
  </div>
  <div class="avatar">
    <img src="https://i.pravatar.cc/300?random=6" style="height: 100%" alt="Avatar 6" />
  </div>
  <div class="avatar">
    <img src="https://i.pravatar.cc/300?random=7" style="height: 100%" alt="Avatar 7" />
  </div>
  <div class="avatar">
    <img src="https://i.pravatar.cc/300?random=8" style="height: 100%" alt="Avatar 8" />
  </div>
  <div class="avatar">
    <img src="https://i.pravatar.cc/300?random=9" style="height: 100%" alt="Avatar 9" />
  </div>
</div>

登录后复制

CSS样式

定义头像容器和评分图标的样式。

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh; /* 确保body至少占据视口高度 */
  margin: 0;
  background: radial-gradient(circle farthest-corner at 10% 20%, rgba(90, 92, 106, 1) 0%, rgba(32, 45, 58, 1) 81.3%);
  font-family: sans-serif;
}

.avatar {
  position: relative; /* 关键：用于绝对定位子元素 */
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  background: #f0f0f0; /* 默认背景色 */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.rating-icons {
  color: orange;
  cursor: pointer;
  transition: all 0.3s ease; /* 添加过渡效果 */
}

.rating-icons:hover {
  color: darkgoldenrod;
  transform: scale(1.15) rotate(70deg); /* 悬停动画 */
}

/* 自定义颜色类 */
.red {
  color: red;
}

.red:hover {
  color: darkred;
}

.green {
  color: green;
}

.green:hover {
  color: yellowgreen;
}

登录后复制

JavaScript逻辑

创建一个名为 ratingStars 的函数，它接受一个根元素和可选配置对象作为参数。

function ratingStars(root, options) {
  // 获取元素的半径
  const getRadius = (element) => {
    if (element.offsetHeight === element.offsetWidth) return Math.round(element.offsetWidth / 2);
    else {
      console.error("The given element is not a perfect circle, positioning might be off.");
      return Math.round(element.offsetWidth / 2); // 即使不是圆形也尝试返回一个半径
    }
  };

  // 根据半径、角度计算x,y坐标
  const pos = (r, theta) => {
    return {
      x: Math.round(r * Math.cos(theta * (Math.PI / 180))),
      y: Math.round(r * Math.sin(theta * (Math.PI / 180))),
    };
  };

  // 默认选项
  let op = {
    count: 6, // 星星数量
    icons_class: "rating-icons", // 图标CSS类
    rotate: 0, // 整体旋转角度 (度)
    clock_wise: true, // 是否顺时针排列
    size: 28, // 图标大小 (pt)
    icons_margin: 3.8, // 图标间距 (px)
    edge_margin: 0, // 距离边缘的额外间距 (px)
  };
  // 合并用户自定义选项
  op = { ...op, ...options };

  const radius = getRadius(root); // 获取根元素的半径

  if (radius) {
    // 创建主容器，用于包裹所有图标
    const rating = document.createElement("div");
    rating.style.position = "absolute";
    // 将主容器移动到根元素的中心
    rating.style.left = `${radius - op.size / 2}px`;
    rating.style.top = `${radius - op.size / 2}px`;
    root.append(rating);

    // 根据图标数量和间距生成角度数组
    let degs = [];
    const angleIncrement = op.size / Math.PI + op.icons_margin;
    for (let i = 0; i < op.count; i++) {
      degs.push(Math.round(i * angleIncrement * (op.clock_wise ? 1 : -1)));
    }

    // 遍历角度数组，为每个图标创建并定位
    degs.forEach((deg) => {
      let iconHolder = document.createElement("div");
      iconHolder.style.position = "absolute";
      iconHolder.style.textAlign = "center";
      // 计算图标的定位半径（从中心到图标中心的距离）
      const currentRadius = radius - op.size / 2 - op.edge_margin;
      // 使用pos函数计算x,y坐标，并加上整体旋转角度
      const { x, y } = pos(currentRadius, deg + op.rotate);
      iconHolder.style.left = `${x}px`;
      iconHolder.style.top = `${y}px`;

      // 插入Font Awesome星星图标
      iconHolder.innerHTML = `<span style="font-size: ${op.size * 0.75}pt;" class="${op.icons_class} fa fa-star"></span>`;
      rating.append(iconHolder);
    });
  }
}

// 获取所有头像元素
const avatars = document.querySelectorAll(".avatar");

// 应用不同的配置选项
ratingStars(avatars[0], { count: 5, rotate: 270, edge_margin: 10 }); // 默认配置，但星星在顶部
ratingStars(avatars[1], { icons_class: 'rating-icons red', count: 4, rotate: 100 }); // 红色星星，数量4，旋转100度
ratingStars(avatars[2], { rotate: 143, count: 7, edge_margin: 5 }); // 旋转143度，数量7
ratingStars(avatars[3], { clock_wise: false, count: 6, icons_margin: 10 }); // 逆时针排列，间距更大
ratingStars(avatars[4], { size: 28, count: 5, rotate: 0 }); // 图标更大，从右侧开始
ratingStars(avatars[5], { icons_margin: 20, count: 3, rotate: 180 }); // 图标间距更大，星星在左侧
ratingStars(avatars[6], { edge_margin: 20, count: 8, rotate: 45 }); // 距离边缘更远
ratingStars(avatars[7], { // 综合示例
  count: 4,
  icons_class: 'rating-icons green',
  rotate: 50,
  clock_wise: true,
  size: 30,
  icons_margin: 40,
  edge_margin: 15
});
ratingStars(avatars[8], { count: 15, size: 16, icons_margin: 2 }); // 大量小星星

登录后复制

注意事项

getRadius 函数: 检查元素是否为正圆形，虽然不是严格必须，但有助于避免非圆形元素导致的不准确布局。
pos 函数: 这是核心的数学计算部分，将角度转换为笛卡尔坐标。
op.size / 2 偏移: 在计算 left 和 top 时，需要减去图标自身宽度/高度的一半，以使图标的中心点对齐计算出的 x,y 坐标。
edge_margin: 这个选项允许你控制星星环绕的紧密程度，使其更靠近或远离头像边缘。
可重用性: ratingStars 函数被设计为可重用的工具，通过传递不同的 options 对象，可以轻松地为不同的头像应用不同的评分样式。

总结与选择

两种方法都能实现圆形头像周围的星级评分布局，但各有侧重：

方法一 (CSS transform + JavaScript)：
- 优点: 利用了CSS硬件加速的优势，动画性能可能更好。在某些情况下，CSS的声明式写法可能更直观。
- 缺点: translateX 的具体值需要通过JavaScript精确计算，且图标自身反向旋转的技巧可能稍显复杂。
- 适用场景: 当需要高性能的动画或更倾向于利用CSS转换进行布局时。
方法二 (纯JavaScript + 三角函数)：
- 优点: 逻辑更清晰，直接通过数学公式计算 x, y 坐标，易于理解和调试。提供了丰富的配置选项，可重用性强。
- 缺点: 对于大量元素，JavaScript直接操作 left/top 可能会在理论上略逊于 transform 的性能（但在现代浏览器中差异通常不明显）。
- 适用场景: 当需要高度可配置、灵活的布局，并且希望通过纯JavaScript来控制所有定位逻辑时。