【jQuery】仿淘宝五星评价打分的实现

我的上一篇博文写到了评价分数的五星显示，这篇博文将介绍如何实现打分的效果。

首先，我们还是先分析我们想要的效果。

1.当鼠标移到星星上面的时候，当前星星以及前面的星星要亮起来，然后星星的右侧出现提示语，1星：很差，2星：比较差，3星：一般，4星：比较好，5星：很好。

2.当鼠标点击的时候，打分，这个时候当前星星以及前面的星星要亮起来，提示语也要隐藏。

3.但鼠标移开是，就显示我此前打得分数。

我这么说可能也有点不太清楚，大家可以到淘宝感受感受，也可以下载我的源码看看（http://pan.baidu.com/s/1c0ruT3q），下面直接贴代码：

<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
</head>
<body><div><a href="javascript:click(1)"><img src="img/star.png" id="star1" onMouseOver="over(1)" onMouseOut="out(1)"/></a><a href="javascript:click(2)"><img src="img/star.png" id="star2" onMouseOver="over(2)" onMouseOut="out(2)" /></a><a href="javascript:click(3)"><img src="img/star.png" id="star3" onMouseOver="over(3)" onMouseOut="out(3)" /></a><a href="javascript:click(4)"><img src="img/star.png" id="star4" onMouseOver="over(4)" onMouseOut="out(4)"/></a><a href="javascript:click(5)"><img src="img/star.png" id="star5" onMouseOver="over(5)" onMouseOut="out(5)"/></a><span id="message"></span></div>
</body>
<script type="text/javascript">
var check = 0;//该变量是记录当前选择的评分
var time = 0;//该变量是统计用户评价的次数，这个是我的业务要求统计的（改变评分不超过三次），可以忽略/*over()是鼠标移过事件的处理方法*/
function over(param){if(param == 1){$("#star1").attr("src","img/star_red.png");//第一颗星星亮起来，下面以此类推$("#message").html("很差");//设置提示语，下面以此类推}else if(param == 2){$("#star1").attr("src","img/star_red.png");$("#star2").attr("src","img/star_red.png");$("#message").html("比较差");}else if(param == 3){$("#star1").attr("src","img/star_red.png");$("#star2").attr("src","img/star_red.png");$("#star3").attr("src","img/star_red.png");$("#message").html("一般");}else if(param == 4){$("#star1").attr("src","img/star_red.png");$("#star2").attr("src","img/star_red.png");$("#star3").attr("src","img/star_red.png");$("#star4").attr("src","img/star_red.png");$("#message").html("比较好");}else if(param == 5){$("#star1").attr("src","img/star_red.png");$("#star2").attr("src","img/star_red.png");$("#star3").attr("src","img/star_red.png");$("#star4").attr("src","img/star_red.png");$("#star5").attr("src","img/star_red.png");$("#message").html("很好");}
}
/*out 方法是鼠标移除事件的处理方法，当鼠标移出时，恢复到我的打分情况*/
function out(){if(check == 1){//打分是1，设置第一颗星星亮，其他星星暗，其他情况以此类推$("#star1").attr("src","img/star_red.png");$("#star2").attr("src","img/star.png");$("#star3").attr("src","img/star.png");$("#star4").attr("src","img/star.png");$("#star5").attr("src","img/star.png");$("#message").html("");}else if(check == 2){$("#star1").attr("src","img/star_red.png");$("#star2").attr("src","img/star_red.png");$("#star3").attr("src","img/star.png");$("#star4").attr("src","img/star.png");$("#star5").attr("src","img/star.png");$("#message").html("");}else if(check == 3){$("#star1").attr("src","img/star_red.png");$("#star2").attr("src","img/star_red.png");$("#star3").attr("src","img/star_red.png");$("#star4").attr("src","img/star.png");$("#star5").attr("src","img/star.png");$("#message").html("");}else if(check == 4){$("#star1").attr("src","img/star_red.png");$("#star2").attr("src","img/star_red.png");$("#star3").attr("src","img/star_red.png");$("#star4").attr("src","img/star_red.png");$("#star5").attr("src","img/star.png");$("#message").html("");}else if(check == 5){$("#star1").attr("src","img/star_red.png");$("#star2").attr("src","img/star_red.png");$("#star3").attr("src","img/star_red.png");$("#star4").attr("src","img/star_red.png");$("#star5").attr("src","img/star_red.png");$("#message").html("");}else if(check == 0){$("#star1").attr("src","img/star.png");$("#star2").attr("src","img/star.png");$("#star3").attr("src","img/star.png");$("#star4").attr("src","img/star.png");$("#star5").attr("src","img/star.png");$("#message").html("");}
}
/*click()点击事件处理，记录打分*/
function click(param){time++;//记录打分次数check = param;//记录当前打分out();//设置星星数
}
</script>
</html>

效果图：

上一篇博文：仿淘宝五星评价分数显示

Author：立礼
Sign：人生不要有太多的幻想，而要有更多的行动。

【jQuery】仿淘宝五星评价打分的实现相关推荐

【jquery】优化仿淘宝五星评价打分(附注释)
在前面的博文http://blog.csdn.net/lzgs_4/article/details/47913629,我们已经把仿淘宝五星评价打分功能实现出来了,实现五星打分的思路基本就是前面博文提到 ...
【HTML】仿淘宝五星评价显示任何分数
最近做项目做到一个五星评分的,这个分数的显示,要精确到小数,就是如果分数是4.3分,就显示4.3颗星星,这个看上去好像挺难的,但是做起来很简单. 首先我们整理一下思路,这效果要怎么做出来,因为这个分数 ...
jquery特效-基于jQuery仿淘宝红色分类导航
今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 实现的代码. ...
一款基于jQuery仿淘宝红色分类导航
今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
jquery仿淘宝SKU选择商品属性代码
jquery仿淘宝SKU选择商品属性代码下载地址:https://www.yujianni.top/news/comp_artinfo.html?id=103
jQuery仿淘宝鼠标悬停动画图标导航特效
jQuery仿淘宝鼠标悬停动画图标导航特效下载地址:jQuery仿淘宝鼠标悬停动画图标导航特效 http://www.sucaijiayuan.com/Js/DaoHangDaiMa/1462.ht ...
javascript实现的淘宝五星评价（版本2）
今天又用了一下淘宝评价,发现淘宝评价不是鼠标移上去变化,而是直接用手点击.所以把前两天的代码又修改了一下,改成点击选中. 第一种实现方式 <!DOCTYPE html> <html& ...
jQuery仿淘宝精品服饰广告的实现
技术栈涉及隐式迭代的遍历筛选选择器和为元素排序等代码如下: <!DOCTYPE html> <html><head><meta charset=&q ...
jQuery模仿淘宝商品评价
最近做项目要做个商品评价的功能,我直接就跑到淘宝那里去研究了,可看着晕晕的,还不知道他是怎么做的,于是把图扣了下来,自己写了一个,接下来就展示一下我是怎么做的,大家有不同的实现方法可要记得分享一下呀. ...

【jQuery】仿淘宝五星评价打分的实现

【jQuery】仿淘宝五星评价打分的实现相关推荐

最新文章

热门文章