DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> jquery實現用戶打分評分特效
jquery實現用戶打分評分特效
編輯:JavaScript綜合知識     

   很多網站都應用了評分效果,讓用戶可以對正在浏覽的文章、電影、資源等進行評分,讓網站增添了幾分互動效果。本文將講解如何使用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>

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved