说明:
本方法采用了Jquery库,暂时检测兼容IE8版本。本示例的2种颜色的星星都是放入了一张png图片当中,当然还有其他的一些实现思路。本示例展示的情况是当前页面只有一个星级评价的情况。
思路:
通过对星级显示元素的,mouseenter,mouseout,click 三个事件的监听,从而星星显示的个数。其中我用了2个变量(temp_value,choice_value)来存放当前选定星级的值和当前临时的星级值;
- temp_value : 临时的星级值;
- choice_value : 选择的星级值;
- mouseenter : 鼠标移入,获取当前所在的星星级别赋予temp_value,调整当前星星的图片颜色;
- mouseout : 鼠标移除,通过对比choice_value值,重新调整星星图片颜色;
- click : 鼠标单击后,获取当前的星级值,赋值给choice_value;(注意在click前已经进行过mouseenter事件了,click后进行了mouseout事件了)
- 当完成选定值后,在需要提交评价值的时候,可以通过JS去获取变量choice_value的值;
HTML结构代码:
<h1>评价:</h1>
<ul id="star">
<li title="很差" id="star1" star="1"></li>
<li title="差" id="star2" star="2"></li>
<li title="一般" id="star3" star="3"></li>
<li title="好" id="star4" star="4"></li>
<li title="很好" id="star5" star="5"></li>
</ul>
注:如果页面中不止一个星级评价,也就是出现多行的情况,这个时候只需要对Dom中li的id进行一些改造,加上动态的下标,从而区分不同的元素。另外有个点就是,我把选定的星级值放入的是JS变量中去了,多个评价值的情况下,建议可以在Dom中加上隐藏表单域去存放选定的当前星级值。
JS实现代码:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var _temp_value = 0,//鼠标hover时的等级value
choiceValue = 0;//默认选定的等级值为1
//鼠标移入的时候
$("#star li").mouseenter(function() {
//获取当前的星级
_temp_value = new Number($(this).attr("star"));
showStar();
//鼠标移入的时候
}).mouseout(function(){
hideStar();
//鼠标移入的时候
}).click(function(){
//单击时,设定当前的选定值
choiceValue = _temp_value;
hideSatr();
});
//星级显示
function showStar() {
for (var i = 1 ; i < _temp_value+1; ++i) {
$("#star"+i).addClass("choice");
}
}
function hideStar() {
for (var i = 5 ; i > choiceValue; --i) {
$("#star"+i).removeClass("choice");
}
}
});
</script>
如有问题,请联系我!这里是Demo地址:http://xiaoweijs.duapp.com/demo/star-level/index.html
分享到:
相关推荐
利用js实现的一个简单的星级评价的例子,方便使用,非常简单易懂
本文实例为大家分享了js实现星级评价效果展示的具体代码,供大家参考,具体内容如下 背景图片实现 图片是width:36px; height:25px; 背景是白色,中间一个空的五角星,空的边缘有一像素的边框;(不然就看不到了); ...
基于H5以及js实现的五星评价脚本,可兼容PC以及移动设备
js实现的星级评论打分效果,比较简单,但是还算比较实用吧。分享一下 <span>js星级评论打分 <a href="javascript:;">1 <a href="javascript:;">2 <a href="javascript:;...
javascript+html星级评分(支持半星),通过一个下拉选择框控制星星的多少。
采用CSS+javascript技术的一个星级评分系统。支持多级评分,通用实例,绝对给力!
事件onmouseover <!DOCTYPE ...<... <head>...JavaScript星级评分</title> <style type="text/css"> *{margin:0;padding:0;} .wrapper{height:20px;padding:5
星级评分效果,让用户可以对正在浏览的文章、电影、资源等进行评分,让网站增添了几分互动效果。本文将讲解如何使用jQuery和PHP来实现星级评分效果
效果描述: 不需要js支持,只用CSS3就可以实现的评分效果 使用方法: 1、将CSS中的样式拷贝到你的网页中 2、将body中需要的代码部分拷贝到你需要的地方即可
jquery实现星级评价的代码,和大家分享一下
本文实例为大家分享了js实现星星打分的具体代码,供大家参考,具体内容如下 最终效果如下 html部分 小主的评价: <span></span> css样式 <style> .star { font-size: 20px; color: gold; cursor: ...
JS 实现多维度的星级评价,并取得评价后的值。
jquery 实现星星打分效果,利用jquery.raty.js, 需要的可以下载
通过点击星星来评价,模仿淘宝的宝贝评价。
- 选择医生:医生名字、工作年限、评价星级 - 点击医生查看医生详情:头像、名字、科室、工作年限、评论,点击预约功能 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!...
MNRP技术开发原型星级评定和进度栏npm install react-rating-stars-component-保存npm开始