纯JS与CSS实现的淘宝风格星级评分组件详解

实现原理与核心逻辑

星级评分的核心在于视觉交互与数据反馈的配合。视觉上，通常采用“底层静态星图 + 顶层半透明覆盖”的技术：底层显示所有5颗星的完整图形（或仅底色），顶层根据鼠标悬停的位置动态截取相应数量的星星显示为高亮或不同颜色。当用户点击某颗星时，记录当前分数并更新隐藏域的值，以便提交表单时使用。

第1步：准备 HTML 结构

首先构建评分容器的基础布局。需要一个父容器包裹标题、评分列表和结果展示区。每个星级选项应使用链接元素 <a> 以支持键盘导航和屏幕阅读器，并通过自定义属性存储分值。

<div class="shop-rating">
  <span class="title">你对我人品的评价:</span>
  <ul class="rating-level" id="stars2">
    <li><a href="javascript:void(0);" class="one-star" star:value="20">2</a></li>
    <li><a href="javascript:void(0);" class="two-stars" star:value="40">4</a></li>
    <li><a href="javascript:void(0);" class="three-stars" star:value="60">5</a></li>
    <li><a href="javascript:void(0);" class="four-stars" star:value="80">7</a></li>
    <li><a href="javascript:void(0);" class="five-stars" star:value="100">10</a></li>
  </ul>
  <span id="stars2-tips" class="result"></span>
  <input type="hidden" id="stars2-input" name="b" value="" />
</div>

注意：.rating-level 是评分主体容器，#stars2-tips 用于实时显示评语，#stars2-input 是隐藏域，用于在表单提交时携带最终得分。

第2步：编写 CSS 样式

CSS 负责处理定位、尺寸以及图片背景的切换。关键在于利用 background-position 来显示不同的星星状态。假设使用的图片 o_star.png 包含了一组从暗色到亮色的星星过渡序列。

<style>
ul, li {margin: 0; padding: 0; border: 0;}
.shop-rating {
  height: 25px;
  overflow: hidden;
  zoom: 1;
  padding: 2px 0;
  position: relative;
  z-index: 999;
  font:12px Arial;
  color:#000;
  line-height:1.2em
}
.rating-level, .rating-level a {
  background: url(/path/to/o_star.png) no-repeat scroll 1000px 1000px;
}
.rating-level {
  background-position: 0px 0px; /* 默认全灰/空心 */
  width: 120px;
  height: 23px;
  position: relative;
  z-index: 1000;
}
.rating-level li { display: inline; }
.rating-level a {
  line-height: 23px;
  height: 23px;
  position: absolute;
  top: 0px;
  left: 0px;
  text-indent: -999em; /* 隐藏文字 */
  outline: none;
}
/* 设置每一颗星的宽度占比 */
.rating-level a.one-star { width: 20%; z-index: 6; }
.rating-level a.two-stars { width: 40%; z-index: 5; }
.rating-level a.three-stars { width: 60%; z-index: 4; }
.rating-level a.four-stars { width: 80%; z-index: 3; }
.rating-level a.five-stars { width: 100%; z-index: 2; }
/* 状态切换：hover 和当前选中状态 */
.rating-level .current-rating, .rating-level a:hover {
  background-position: 0 -28px; /* 亮色星星位置 */
}
/* 特殊处理前两颗星的 hover 颜色差异（可选） */
.rating-level a.one-star:hover,
.rating-level a.two-stars:hover,
.rating-level a.one-star.current-rating,
.rating-level a.two-stars.current-rating{
  background-position: 0 -116px;
}
</style>

代码说明：每个 <a> 绝对定位在左侧，宽度分别为 20%~100%。当鼠标划过时，改变背景Y轴偏移量，显示出不同状态的星星图片。

第3步：添加 JavaScript 交互逻辑

JS 部分主要处理鼠标悬停时的即时反馈和点击时的数据保存。这里采用一个简单的闭包模式封装逻辑，避免全局变量污染。

<script>
var TB = function() {
  var T$ = function(id) { return document.getElementById(id) };
  var T$$ = function(r, t) { return (r || document).getElementsByTagName(t); };
  
  var Stars = function(cid, rid, hid, config) {
    var lis = T$$(T$(cid), 'li');
    var curA;
    
    for (var i = 0, len = lis.length; i < len; i++) {
      lis[i]._val = i; // 存储索引
      
      // 点击事件：确定最终评分
      lis[i].onclick = function() {
        var score = T$$(this, 'a')[0].getAttribute('star:value');
        // 更新提示文本和隐藏域
        T$(rid).innerHTML = '<em>' + (T$(hid).value = score) + '分</em> - ' + config.info[this._val];
        curA = T$$(T$(cid), 'a')[score / config.step - 1];
      };
      
      // 鼠标移出：恢复上一次选中的状态
      lis[i].onmouseout = function() {
        curA && (curA.className += config.curcss);
      };
      
      // 鼠标移入：清除上一次的状态，准备显示新的
      lis[i].onmouseover = function() {
        curA && (curA.className = curA.className.replace(config.curcss, ''));
      };
    }
  };
  
  return {Stars: Stars};
}();

// 初始化
TB.Stars('stars2', 'stars2-tips', 'stars2-input', {
  'info' : ['人品极差', '人品不咋地', '人品一般吧', '人品不错', '人品极好啊'],
  'curcss': ' current-rating',
  'step': 20
});
</script>

逻辑解析：

• 初始化参数：'info' 数组定义了每颗星对应的文案，'step' 定义了分值步进（这里是20分一档）。
• Hover 交互：当鼠标从一个星星移到另一个时，先移除之前星星的 .current-rating 类，再让新悬停的星星应用该类，从而实现平滑的视觉切换。
• Click 交互：读取 star:value 属性，写入隐藏输入框，并固定显示最终的评语。

完成判断与注意事项

测试时，确保图片路径正确替换。由于原版使用了外部 CDN 图片，本地部署时需将 url(...) 中的路径更改为本地资源路径。此外，该代码片段依赖全局作用域变量，若在现代前端框架（如 React/Vue）中使用，建议将其重构为组件形式或使用 addEventListener 替代内联事件属性以提升可维护性。

简要总结

上述代码展示了一个经典的纯前端星级评分实现方案。它结合了 CSS 的背景定位技术和 JavaScript 的事件委托机制，实现了轻量级的交互功能。开发者只需修改图片资源和文案配置，即可快速复用到各类网页项目中。 以上就是纯JS与CSS实现淘宝风格星级评分效果的详细内容，更多关于JavaScript CSS星级评分的代码示例资料请关注本站其它相关文章！