【jquery】优化仿淘宝五星评价打分(附注释)

在前面的博文http://blog.csdn.net/lzgs_4/article/details/47913629，我们已经把仿淘宝五星评价打分功能实现出来了，实现五星打分的思路基本就是前面博文提到的，但当有成千上万颗星星的时候，程序估计会长得很难看了。为了代码更加精简和有效率，我们来优化一下程序。

用到的星星素材可在前面的博客找到云盘链接：http://blog.csdn.net/lzgs_4/article/details/47912753

话不多说，上码：

<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<style type="text/css">img:hover{cursor: pointer;}
</style>
</head>
<body><div><img src="img/star.png"/><img src="img/star.png"/><img src="img/star.png"/><img src="img/star.png"/><img src="img/star.png"/><span></span></div>
</body>
<script type="text/javascript">$('img').each(function(index){var star='img/star.png'; //普通灰色星星图片的存储路径var starRed='img/star_red.png';       //红色星星图片存储路径var prompt=['很差','比较差','一般','比较好','非常好'];    //评价提示语this.id=index;      //遍历img元素，设置单独的id$(this).on("mouseover click",function(){  //设置鼠标滑动和点击都会触发事件$('img').attr('src',star);//当“回滚”、“改变主意”时，先复位所有图片为木有打星的图片颜色$(this).attr('src',starRed);       //设置鼠标当前所在图片为打星颜色图$(this).prevAll().attr('src',starRed);  //设置鼠标当前的前面星星图片为打星颜色图$(this).siblings('span').text(prompt[this.id]);      //根据id的索引值作为数组的索引值});});
</script>
</html>

效果图：

这样程序看起来就不会那么臃肿了，试下吧O(∩_∩)O~

Author:致知

Sign:路漫漫其修远兮，吾将上下而求索。

【jquery】优化仿淘宝五星评价打分(附注释)相关推荐

【jQuery】仿淘宝五星评价打分的实现
我的上一篇博文写到了评价分数的五星显示,这篇博文将介绍如何实现打分的效果. 首先,我们还是先分析我们想要的效果. 1.当鼠标移到星星上面的时候,当前星星以及前面的星星要亮起来,然后星星的右侧出现提示语 ...
【HTML】仿淘宝五星评价显示任何分数
最近做项目做到一个五星评分的,这个分数的显示,要精确到小数,就是如果分数是4.3分,就显示4.3颗星星,这个看上去好像挺难的,但是做起来很简单. 首先我们整理一下思路,这效果要怎么做出来,因为这个分数 ...
Android仿淘宝首页UI（附代源代码及示例图片）
Android仿淘宝首页UI(附代源代码及示例图片) 可以收获运行出来的效果部分代码源代码可以收获更改Layout中的文字和drawble中的图片即可生成适应于不同情景的APP,帮助开发者完 ...
javascript实现的淘宝五星评价（版本2）
今天又用了一下淘宝评价,发现淘宝评价不是鼠标移上去变化,而是直接用手点击.所以把前两天的代码又修改了一下,改成点击选中. 第一种实现方式 <!DOCTYPE html> <html& ...
js实现仿淘宝商品评价的星级评定效果
HTML: <div class="shop-rating"><span class=&q ...
自定义商品分类，选择分类之后，添加商品附属性；仿淘宝后台添加商品附属性的价格和数量
效果图(图片较大,加载较慢) 页面部分: <div class="layui-form-item" id="add_attribute"><l ...
基于BootStrap仿淘宝星星商品评价案例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
仿淘宝中的评价晒单中选择图片可以预览，添加，删除
前一篇文章写了如何把input="file"的默认样式改为自己想要的样式所以这篇是在这个的基础上写的,也就是说改变成了自己想要的样式之后,点击选择图片,可以放在一个div中预览,同 ...
jquery特效-基于jQuery仿淘宝红色分类导航
今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 实现的代码. ...

【jquery】优化仿淘宝五星评价打分(附注释)

【jquery】优化仿淘宝五星评价打分(附注释)相关推荐

最新文章

热门文章