admin 管理员组

文章数量: 887021

评分

CSS:

 1 #score1 i {
 2     vertical-align: middle;
 3     display: inline-block;
 4     width: 32px;
 5     height: 32px;
 6     background: url('图片地址') no-repeat center center;
 7     background-size: cover;
 8 }
 9 
10 #score1 i.on {
11     background-image: url('图片地址');
12 }

HTML：

 

1 <span id="score1">
2     <i></i><i></i><i></i><i></i><i></i>
3 </span>

 

JavaScript：

 1     /**
 2      * [score 评分]
 3      * @param  {[String]} scoreId   [评分Id]
 4      * @param  {[String]} extentStr [需要变成实体的星星的样式class]
 5      * $(scoreId).val()　　[访问分数]
 6      */
 7     function score(scoreId, extentStr) {
 8 
 9         scoreId = "#"   scoreId;
10 
11         $(scoreId   " i").hover(function() { // 鼠标移入，未确定选择分数时
12 
13             for (var i = 0; i <= $(this).index(); i  ) {
14 
15                 $(scoreId   " i").eq(i).addClass(extentStr); // 实星星
16 
17             }
18 
19             $(scoreId   " i").click(function() { // 点击评分，确定好分数后无法更改
20 
21                 for (var i = 0; i <= $(this).index(); i  ) {
22 
23                     $(scoreId   " i").eq(i).addClass(extentStr);
24 
25                 }
26                  
27                 $(scoreId).val($(this).index() 1);          
28 
29                 $(scoreId   " i").unbind(); // 清除移入移出
30 
31             });
32 
33         }, function() { // 鼠标移出
34 
35             $(scoreId   " i").removeClass(extentStr); // 描线星星
36 
37         });
38 
39     }
40 
41     score("score1", "on");

 


更多专业前端知识，请上 【猿2048】www.mk2048

本文标签： 评分

版权声明：本文标题：评分 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/free/1699269194h339591.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。