jquery實現用戶打分評分特效

 　　很多網站都應用了評分效果，讓用戶可以對正在浏覽的文章、電影、資源等進行評分，讓網站增添了幾分互動效果。本文將講解如何使用jQuery來實現評分效果。

　　js代碼：

　　?

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

　　CSS

　　?

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

　　HTML

　　?

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

　　以上所述就是本文的全部內容了，希望大家能夠喜歡。