自己写的效果，代码有点乱。所以做了下注释以便阅读。技术还是不行，加油加油！希望下次的东西更完美~~
定义评分的横排显示。span 是评分图标 strong 是最左边的“评分：” em是最右边的 评分状态文字
CSS代码
- <style type="text/css"><!--
- #pingfen_sect { height:18px;line-height:18px; font-size:12px;}
- #pingfen_sect span { display:inline; float:left; width:20px; height:18px; background:url(heartx.gif) no-repeat 0 0; cursor: pointer;}
- #pingfen_sect strong {display:inline; float:left; font-weight:normal; }
- #pingfen_sect em {display:inline; float:left; font-style:normal; padding-left:10px; }
- --></style>
xhtml不需要清除浮动，应为我 #pingfen_sect 已经定义好了高度。
XML/HTML代码
- <div id="pingfen_sect"><strong>评分：</strong><span></span><span></span><span></span><span></span><span></span><em></em></div>
js代码，满足了一下几个需求：
1.用户第一次进来默认评分显示为 0；用户评分以后再次进来 显示上次评分。
2.进入页面只能评分一次。
3.未评分 鼠标离开评分范围以后 没有评分结果，评分以后鼠标离开评分范围锁定并显示评分结果。
4.通过设定标签属性 v 给5个状态的评分传递不同的参数。现在五个参数对应的是1 2 3 4 5，也可以改成A B C D E F。 结果和显示信息互不冲突。
XML/HTML代码
- <script src="jquery.js"></script>
- <script>
- $(document).ready(function(){
- //默认评分 -1为没有评分
- var i=-1;
- //设定默认评分信息
- $("#pingfen_sect em").html(["很差","较差","还行","推荐","力荐"][i]);
- //设定默认评分信息图标 给所有图标建立索引
- $('#pingfen_sect span').slice(0,i+1).css("background-position","0 -20px").end().each(function(index){
- //当前图标注册鼠标触摸事件
- $(this).mouseover(function(){
- //当前图标 以及 当前图标之前的所有图标 改变； 当前图标之后 的所有图标设置为默认状态！
- $(this).css("background-position","0 -20px").prevAll().css("background-position","0 -20px").end().nextAll().css("background-position","0 0");
- //根据图标索引 设定 评分信息 状态 评分值
- $("#pingfen_sect em").html(["很差","较差","还行","推荐","力荐"][index]).attr("v",["1","2","3","4","5"][index]);
- // 当前图标注册鼠标移出事件
- }).mouseout(function(){
- //设置 图标状态 为进入时候的默认状态
- $('#pingfen_sect span').slice(0,i+1).css("background-position","0 -20px").end().slice(i+1,$("#pingfen_sect span").length).css("background-position","0 0");
- //设置 评分信息 为进入时候的默认状态 评分值
- (i<0)?$("#pingfen_sect em").html(""):$("#pingfen_sect em").html(["很差","较差","还行","推荐","力荐"][i]).attr("v",["1","2","3","4","5"][i]);
- //当前图片注册鼠标点击事件
- }).click(function(){
- //点击以后完成打分，卸载所有 的 事件，并移除鼠标手势。
- $("#pingfen_sect span").unbind().css("cursor","auto");
- //设置评分信息的值ii
- var ii = $("#pingfen_sect em").attr("v");
- //调用评分操作
- alert(ii+"分");
- });
- });
- })
#1
