怎么达到5html5 星级评价demo

JS五星级评分效果(类似与淘宝打分效果) - 龙恩0707 - 推酷
JS五星级评分效果(类似与淘宝打分效果) - 龙恩0707
今天晚上研究下 五星级评分效果,类似于淘宝后台评分效果,如下图所示:
思路: 当鼠标移到一颗星的时候 判断当前的索引 当前及当前的索引前面的星星亮起来 每当移到任何一颗星星时候 下面跟随提示 mouseout时候 提示消失,移出时 全部变灰。每当点击一颗星星时候 同样判断当前的索引 当前及当前之前的星星都亮起来,mouseout时候 点击时候的星星(亮) 同样保持亮的状态。
1 &div class=&star&&
&span&js星级评论打分&/span&
&li&&a href=&javascript:;&&1&/a&&/li&
&li&&a href=&javascript:;&&2&/a&&/li&
&li&&a href=&javascript:;&&3&/a&&/li&
&li&&a href=&javascript:;&&4&/a&&/li&
&li&&a href=&javascript:;&&5&/a&&/li&
*{margin:0;padding:0;font-size:13px;}
ul,li{list-style:none;}
.star {position:relative;width: .star li{float:left;width:24px;height:22px;text-indent:-9999px;background:url('star.png') no-repeat;cursor:pointer;}
.star li.on{background-position:

参考资料

 

随机推荐