jquery實現(xiàn)用戶打分評分特效
更新時間:2015年05月28日 10:49:42 投稿:hebedich
很多網站都應用了評分效果,讓用戶可以對正在瀏覽的文章、電影、資源等進行評分,讓網站增添了幾分互動效果。本文將講解如何使用jQuery來實現(xiàn)評分效果。
js代碼:
<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
<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
<div class="pingfenxitong"> <div class="pingfenList"> <div class="pfxtTitle">功能:</div> <div class="pfxtText">你覺得這個創(chuàng)意在功能上優(yōu)秀嗎?</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">你覺得這個創(chuàng)意在外觀上優(yōu)秀嗎?</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">你覺得這個創(chuàng)意在成本上優(yōu)秀嗎?</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">你覺得這個創(chuàng)意在難度上可行嗎?</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>
以上所述就是本文的全部內容了,希望大家能夠喜歡。
相關文章
jQuery+ajax實現(xiàn)動態(tài)添加表格tr td功能示例
這篇文章主要介紹了jQuery+ajax實現(xiàn)動態(tài)添加表格tr td功能,結合實例形式分析了jQuery基于ajax動態(tài)創(chuàng)建頁面table元素相關操作技巧,需要的朋友可以參考下2018-04-04jquery.fastLiveFilter.js實現(xiàn)輸入自動過濾的方法
這篇文章主要介紹了jquery.fastLiveFilter.js實現(xiàn)輸入自動過濾的方法,涉及jquery鼠標事件及字符串遍歷的相關技巧,簡單實用,需要的朋友可以參考下2015-08-08jQuery EasyUI右鍵菜單實現(xiàn)關閉標簽/選項卡
這篇文章主要介紹了jQuery EasyUI右鍵菜單實現(xiàn)關閉標簽/選項卡,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-10-10以jQuery中$.Deferred對象為例講解promise對象是如何處理異步問題
Promises是一種令代碼異步行為更加優(yōu)雅的抽象,它很有可能是JavaScript的下一個編程范式,一個Promise即表示任務結果,無論該任務是否完成。本文以jQuery中$.Deferred對象為例講解promise對象是如何處理異步問題,需要的朋友參考下2015-11-11JQuery中使用ajax傳輸超大數(shù)據(jù)的解決方法
這篇文章主要介紹了JQuery中使用ajax傳輸超大數(shù)據(jù)的解決方法,也就是比較多的數(shù)據(jù),超過max_upload_size等設置,本文方法在chrome瀏覽器下測試通過,需要的朋友可以參考下2014-07-07