jquery实现用户打分评分特效

很多网站都应用了评分效果，让用户可以对正在浏览的文章、电影、资源等进行评分，让网站增添了几分互动效果。本文将讲解如何使用jQuery来实现评分效果。

js代码：

1. <script type="text/javascript"> 
2. $(function(){ 
3.  
4. //简洁用户评分代码 
5. $(".pfxtFen li").click(function(){ 
6. $(this).addClass("pfxtCur"); 
7. $(this).prevAll().addClass("pfxtCur"); 
8. $(this).nextAll().removeClass("pfxtCur"); 
9. }); 
10.  
11. $(".pfxtFen li").dblclick(function(){ 
12. $(".pfxtFen li").removeClass("pfxtCur"); 
13. }); 
14.  
15. }) 
16. </script> 

CSS

1. <style type="text/css"> 
2. *{margin:0;padding:0; font-family:"微软雅黑"} 
3. ul{ list-style:none;} 
4. /*用户评分*/ 
5. .pingfenxitong{ 
6. padding:15px 0; 
7. width:500px; 
8. margin:0 auto; 
9. } 
10. .pingfenList{ 
11. float:left; 
12. width:500px; 
13. padding-right:20px; 
14. } 
15. .pfxtTitle{ 
16. font-weight:bold; 
17. font-size:1.2em; 
18. padding:4px 0; 
19. } 
20. .pfxtText{ 
21. line-height:25px; 
22. } 
23. .pfxtFen{ 
24. margin:10px 0; 
25. } 
26. .pfxtFen li{ 
27. float:left; 
28. width:98px; 
29. height:30px; 
30. text-align:center; 
31. line-height:30px; 
32. border:#ddd 1px solid; 
33. background:#f1f1f1; 
34. cursor:pointer; 
35. } 
36. .pfxtFen li.pfxtCur{ 
37. background:#308A95; 
38. color:#fff; 
39. border:#308A95 1px solid; 
40. } 
41.  
42. </style> 

HTML

1. <div class="pingfenxitong"> 
2.  
3. <div class="pingfenList"> 
4.  
5. <div class="pfxtTitle">功能：</div> 
6. <div class="pfxtText">你觉得这个创意在功能上优秀吗？</div> 
7. <ul class="pfxtFen" title="双击取消评分"> 
8. <li>1</li> 
9. <li>2</li> 
10. <li>3</li> 
11. <li>4</li> 
12. <li>5</li> 
13. <div class="clearfix"></div> 
14. </ul> 
15.  
16. <div class="pfxtRight"></div> 
17. <div class="clearfix"></div> 
18. </div> 
19.  
20. <div class="pingfenList"> 
21. <div class="pfxtTitle">外观：</div> 
22. <div class="pfxtText">你觉得这个创意在外观上优秀吗？</div> 
23. <ul class="pfxtFen" title="双击取消评分"> 
24. <li>1</li> 
25. <li>2</li> 
26. <li>3</li> 
27. <li>4</li> 
28. <li>5</li> 
29. <div class="clearfix"></div> 
30. </ul> 
31. <div class="pfxtRight"></div> 
32. <div class="clearfix"></div> 
33. </div> 
34.  
35. <div class="pingfenList"> 
36. <div class="pfxtTitle">成本：</div> 
37. <div class="pfxtText">你觉得这个创意在成本上优秀吗？</div> 
38. <ul class="pfxtFen" title="双击取消评分"> 
39. <li>1</li> 
40. <li>2</li> 
41. <li>3</li> 
42. <li>4</li> 
43. <li>5</li> 
44. <div class="clearfix"></div> 
45. </ul> 
46. <div class="pfxtRight"></div> 
47. <div class="clearfix"></div> 
48. </div> 
49.  
50. <div class="pingfenList"> 
51. <div class="pfxtTitle">难度：</div> 
52. <div class="pfxtText">你觉得这个创意在难度上可行吗？</div> 
53. <ul class="pfxtFen" title="双击取消评分"> 
54. <li>1</li> 
55. <li>2</li> 
56. <li>3</li> 
57. <li>4</li> 
58. <li>5</li> 
59. <div class="clearfix"></div> 
60. </ul> 
61. <div class="pfxtRight"></div> 
62. <div class="clearfix"></div> 
63. </div> 
64.  
65. <div class="clearfix"></div> 
66.  
67. </div> 

以上所述就是本文的全部内容了，希望大家能够喜欢。