JQuery 五星评价

//星级图片为雪碧图，上为满星，下为空星，每个星高14px
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="../node_modules/jquery/dist/jquery.js"></script>
</head>
<body><script>$("body").append(createStar());function createStar(){var div=$("<div></div>").data("index",-1).width(70).height(14).css({float:"left"});for(var i=0;i<5;i++){$("<div></div>").appendTo(div).css({width:14,height:14,float:"left",backgroundImage:"url(./img/commstar02.png)",backgroundPositionY:-14}).hover(function(e){var index0=div.data("index");var index1=Array.from(div.children()).indexOf(this);if(index1<index0) return;$(this).css({backgroundPositionY:0}).prevAll().css({backgroundPositionY:0});$(this).nextAll().css({backgroundPositionY:-14})},function(){var index=div.data("index");if(index===-1){div.children().css({backgroundPositionY:-14})}else{div.children().slice(0,index).css({backgroundPositionY:0});div.children().slice(index+1).css({backgroundPositionY:-14})}}).click(function(e){var index=Array.from(div.children()).indexOf(this);div.data("index",index);div.children().slice(0,index).css({backgroundPositionY:0});div.children().slice(index+1).css({backgroundPositionY:-14})})}return div;}</script>
</body>
</html>

JQuery 五星评价相关推荐

【jquery】优化仿淘宝五星评价打分(附注释)
在前面的博文http://blog.csdn.net/lzgs_4/article/details/47913629,我们已经把仿淘宝五星评价打分功能实现出来了,实现五星打分的思路基本就是前面博文提到 ...
【jQuery】仿淘宝五星评价打分的实现
我的上一篇博文写到了评价分数的五星显示,这篇博文将介绍如何实现打分的效果. 首先,我们还是先分析我们想要的效果. 1.当鼠标移到星星上面的时候,当前星星以及前面的星星要亮起来,然后星星的右侧出现提示语 ...
Vue手动封装实现一个五星评价得效果
我是歌谣放弃很难但是坚持一定很酷微信公众号关注小歌谣一起学习前后端知识今天要说得是实现一个vue中实现五星评价得效果简单来说就是封装组件把具体需要我们了解组件间得相互传值数据绑定等知 ...
JS写一个简单的五星评价
JS写一个简单的五星评价在做前端网页页面的时候很多时候回有遇到星级评价的模块,用到的地方挺多所以自己就上传下方便大家和自己使用(不支持半星评价因为没有半星的图). 效果图如下: 下面是我们的代码: ...
微信小程序开发-五星评价
今天在做自己的小程序的时候做到一个对店铺的评价,文字什么的都很easy,遇到一个有趣的五星评价.先想到一个直接选择12345星的五星评价,以后有3星半的评价的效果再继续补充. 开始撸代码..... 首 ...
php做五星评价系统,微信小程序之五星评价功能制作
这篇文章主要介绍了微信小程序五星评价功能的实现的相关资料,这里附有实例代码及实现效果图,需要的朋友可以参考下微信小程序五星评价功能话不多说,我们来看一下效果图: 要实现的效果:点击到第几颗星, ...
jQuery五星好评界面反馈界面
星星: jQuery五星好评界面反馈界面 <!DOCTYPE html> <html><head><meta charset="UTF-8" ...
微信小程序五星评价功能实现
实现五星评价功能,效果图如下: .wxml文件: <view class="star-title">1.品质效果</view><view class= ...
通俗易懂的五星评价代码——微信小程序如何展示像淘宝天猫那样五星好评？
项目背景 2020年起始,微信官方宣布支持小程序直播.陆续有很多的商家与开发者参与到这场微信生态直播大潮中,作为电商小程序评价内容必不可少的,官方没有提供评价组件只能自己动手丰衣足食.网上看了很多资料 ...

JQuery 五星评价

JQuery 五星评价相关推荐

最新文章

热门文章