仿商业网站——商品评分效果实现【提高篇】_仿商业网站—

本文链接：https://blog.csdn.net/u014716259/article/details/44260209

本文介绍如何使用CSS Sprite技术实现商品评分效果的动态变化。当鼠标移动到星星上时，星星会有明显的点亮或熄灭动画。通过改变背景图片的位置，结合HTML和JavaScript，可以创建出逼真的评分交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

看过之前的那一篇仿商业网站——商品评分效果的实现，就可能发现之前的那种实现方式还差一点点效果：就是当鼠标移动到每个星星上的时候，星星最好有动态的变化，如下图：

已选择后星星的状态

鼠标移动到星星上面后，星星的状态：

这里用到一点点CSS sprite的技术，将点亮和未点亮的星星放置在一张图片（star.png）中，通过改变背景贴图的样式来实现星星点亮或熄灭。

HTML没有太大变化，CSS代码如下：

.container {width:70%; height:auto; margin-right:auto; margin-left:auto; background:#efefef; padding:10px; border-radius:10px; font-family:"Microsoft YaHei","Î¢ÈíÑÅºÚ";}
.container .item {width:95%; height:50px; margin-right:auto; margin-left:auto; background:white; margin-top:10px; margin-bottom:10px; font:20px;}
.container .item dt {height:30px; margin:12px 10px; float:left;}
.container .item dt.star {margin:5px 0px; float:left;}
.container .item dt.grade {height:30px; margin:12px 0px 12px 160px; float:left; color:#ffdd22; font:bold;}
.container .item dt.fen {height:30px; margin:12px 0px; float:left; color:#ffdd22; font:bold;}
.container .item dt.comment {height:30px; margin:12px 0px; float:left; color:#ffdd22; font:bold;}

ul {width:0px; height:0px; display:inline; position:absolute; left:333px; top:155px; padding:0px;}
.list1 ul {top:25px;}
.list2 ul {top:90px;}
ul li {list-style:none; display:inline; float:left; background:url(star1.png) 0 0 repeat-x; position:absolute; z-index:3; width:30px; height:30px; cursor:pointer;}
ul li:hover {background:url(star1.png) 0 -30px repeat-x; left:0px;}
ul li.star1 {left:0px;width:30px; z-index:9;}
ul li.star2 {left:0px;width:60px; z-index:8;}
ul li.star3 {left:0px;width:90px; z-index:7;}
ul li.star4 {left:0px;width:120px; z-index:6;}
ul li.star5 {left:0px;width:150px; z-index:5;}
.current {position:absolute; left:333px; top:171px; padding:0px; z-index:1; width:0px; height:30px; background:url(star1.png) 0 -30px repeat-x;}
.list1 .current {top:41px;}
.list2 .current {top:106px;}

未点亮状态为：background:url(star1.png) 0 0 repeat-x;

让图片背景沿x轴方向贴图，贴图位置为（0,0），宽度为图片star.png的宽度*N（N取决于第几个星星）。

点亮状态为：{background:url(star1.png) 0 -30px repeat-x; left:0px;}

贴图位置为（0，-30px），其实就是让被点亮的星星出现隐藏未点亮的星星。

五颗星星分别设计成五层：

<strong>ul li.star1 {left:0px;width:30px; z-index:9;}
ul li.star2 {left:0px;width:60px; z-index:8;}
ul li.star3 {left:0px;width:90px; z-index:7;}
ul li.star4 {left:0px;width:120px; z-index:6;}
ul li.star5 {left:0px;width:150px; z-index:5;}</strong>

用z-index设置贴图的层次，1号在最上层，5号在最下层。这样做是为了当星星被点亮时，每层最外面的一颗星星不会被遮挡。例如，当3颗星星被点亮时，第一颗和第二课还能被mouseover。

current那一层为最底层，目的是显示点亮的星星。（这里为什么不直接点亮star12345呢？其实是在编写时发现如果改变这五层，会导致z-index发生变化，遮盖掉部分星星）

具体实现的js文件如下：

$(document).ready(function(){
	//鼠标点击事件
	$("div.item").find("li").on("click",function(){
		n = parseInt($(this).attr("title"));
		var starW = 30;
		listN = $(this).parent("ul").parent("dl");
		//改变星星颜色
		listN.find("div.current").css("width",starW*n);
		//改变分数描述
		listN.find("dt.grade").text(n);
		comment = listN.find("dt.comment");
		switch(n)
		{
		case 1:
			comment.text("很不满意");
			break;
		case 2:
			comment.text("不满意");
			break;
		case 3:
			comment.text("一般");
			break;
		case 4:
			comment.text("比较满意");
			break;
		case 5:
			comment.text("非常满意");
			break;
		}
	});

})

关键是： listN.find("div.current").css("width",starW*n);

就是改变current层的宽度来贴出星星的个数。

（应该会有更好的实现方法，等技术进步后再来改进，欢迎指导。）