淘宝评分控件怎么实现

官方工作人员 · 2011-10-21 12:18 上传

我们在淘宝网上买完东西之后，对卖家评分的时候都有一个很漂亮的控件，那个动态的效果怎么实现呢？有动态的特效，而且鼠标放到每个每个星星上有效果有提示描述！怎么实现呢？

黄朝辉 · 黄朝辉

本帖最后由黄朝辉于 2011-10-21 19:26 编辑

楼上的那位朋友，楼主问的是怎么实现而不是找个插件哈！
楼主你看下我写的吧！基于JQ的
http://blog.csdn.net/huihuidetiantang/article/details/6894882

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>星星评分</title>
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#divimg").css("cursor","pointer"); //鼠标移到上面去变手指pointer
$("img").click(function(){
if($(this).attr("id")=="yi")
{
$("#yi").attr("src","Star.gif");
$("img").not("#yi").attr("src","GrayStar.gif");
$("#msg").html("1分");
}
else if($(this).attr("id")=="er")
{
$("#yi,#er").attr("src","Star.gif");
$("img").not("#yi,#er").attr("src","GrayStar.gif");
$("#msg").html("2分");
}
else if($(this).attr("id")=="san")
{
$("#yi,#er,#san").attr("src","Star.gif");
$("img").not("#yi,#er,#san").attr("src","GrayStar.gif");
$("#msg").html("3分");
}
else if($(this).attr("id")=="si")
{
$("#yi,#er,#san,#si").attr("src","Star.gif");
$("img").not("#yi,#er,#san,#si").attr("src","GrayStar.gif");
$("#msg").html("4分");
}
else
{
$("img").attr("src","Star.gif");
$("#msg").html("5分");
}
});
});
</script>
</head>
<body>
<div id="divimg" style="width:120px; height:15px">
<img id = "yi" src="GrayStar.gif" />
<img id = "er" src="GrayStar.gif" />
<img id = "san" src="GrayStar.gif" />
<img id = "si" src="GrayStar.gif" />
<img id = "wu" src="GrayStar.gif" />
<span id="msg">0分</span>
</body>
</html>

复制代码

黑马黄友 · 黑马黄友

用Jquery吧

杨恩锋 · 杨恩锋

好，回答的都不错！jq的库确实能实现炫目的特效，很赞！！！

10642491

推荐看看高手写的自定义评分星形控件，肯定会大有帮助的呵呵。
http://www.cnblogs.com/holywolf/archive/2008/12/11/1352574.html

帐号		自动登录	找回密码
密码			加入黑马

4 个回复