脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQuery模仿淘宝商品评价，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 最近做项目要做个商品评价的功能，我直接就跑到淘宝那里去研究了，可看着晕晕的，还不知道他是怎么做的，于是把图扣了下来，自己写了一个，接下来就展示一下我是怎么做的，大家有不同的实现方法可要记得分享一下呀。
经过研究，我发现在脚本事件上来说，就分三个事件，鼠标移入事件，鼠标离开事件和点击事件。移入就让鼠标移入的星星和之前的星星都变色，点击在移入的基础上保存了当前点击的星星位置，离开则恢复到上次点击的那个星星。从样式上来说，这些星星可以共用一个图片，切换星星时让图片的一部分展示出来就可以了。
这里展示Demo就只搞三个星星了，星星右边的文字提示也不弄了。这里用无链接的链接标签来放星星，使用链接有个好处就是如果以后要在点击星星时触发服务器的操作，比如点击星星直接完成评价操作，就可以直接用了，再用一个隐藏input来存放最近一次点击的星星的值：
复制代码
<p id="rating-star">
<a href="#">1</a>
<a href="#">2</a>
<input tyPE="hidden" id="goodLevel" />
</p>
复制代码
接着给rating-star和链接一个样式，切换图片的关键只需要修改background-posITion就可以了：
复制代码
#rating-star {
margin: 50px;
}
#rating-star a {
background: url(commentstar.png) no-repeat 0 -90px;
display: inline-block;
height: 23px;
text-indent: -999em;
width: 23px;
}
复制代码
最后就是关键的脚本了：
复制代码
$('#rating-star').on('click', 'a', function () {
$('#goodLevel').val(this.innerHTML);
}).on(';mouseenter', 'a', function () {
setStar(this);
}).on('mouseleave', 'a', function () {
VAR level = $('#goodLevel').val();
var $stars = $('#rating-star > a');
if (level == '') {
$stars.css('background-position', '0 -90px');
} else {
setStar($stars[level]);
}
});
function setStar(star) {
var $this = $(star);
var level = $this.html();
var n;
if (level == '2') {
n = '0 -30px';
} else if (level == '1') {
n = '0 0';
} else {
n = '0 -60px';
}
$this.prevAll().andSelf().css('background-position', n);
$this.nextAll().css('background-position', '0 -90px');
}
复制代码
这里有必要解释一下我的思路，可以看到点击事件只是给隐藏控件赋值，没做其他事，本来点击事件是要变换图片的，这事我发现鼠标移入事件已经做了，所以我就不再重复了，然后你会发现鼠标移入和离开最终都调用了setStar函数，那个方法其实就是把传入的星星以及他之前的星星改成相应的图片，把传入的星星之后的星星改成无颜色的星星，其实setStar也可以原htML对象的数字下标，这样也可以用jquery的slice来实现。有些同志可能不知道'0 -30px'这些的是干什么的，其实'0 0'就是在原本默认的图片展示，-30px意思就是在y轴上把图片向上移动30个像素，这样在链接大小限定为长宽都为23px的情况下，我们看到的就是好评图片了，'0 0'对应的就是中评图片，'0 -60px'对应的就是差评图片，'0 -90px'对应的就是还没评价的图片。把原本的四个图片合成一张图片有什么好处呢，可以减少请求数，写代码也比较方便吧，估计脚本性能也会好点。
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery模仿淘宝商品评价全部内容，希望文章能够帮你解决javascript代码实例教程-jQuery模仿淘宝商品评价所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。