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-04
jquery.fastLiveFilter.js實現(xiàn)輸入自動過濾的方法
這篇文章主要介紹了jquery.fastLiveFilter.js實現(xiàn)輸入自動過濾的方法,涉及jquery鼠標事件及字符串遍歷的相關技巧,簡單實用,需要的朋友可以參考下2015-08-08
jQuery EasyUI右鍵菜單實現(xiàn)關閉標簽/選項卡
這篇文章主要介紹了jQuery EasyUI右鍵菜單實現(xiàn)關閉標簽/選項卡,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-10-10
以jQuery中$.Deferred對象為例講解promise對象是如何處理異步問題
Promises是一種令代碼異步行為更加優(yōu)雅的抽象,它很有可能是JavaScript的下一個編程范式,一個Promise即表示任務結果,無論該任務是否完成。本文以jQuery中$.Deferred對象為例講解promise對象是如何處理異步問題,需要的朋友參考下2015-11-11
JQuery中使用ajax傳輸超大數(shù)據(jù)的解決方法
這篇文章主要介紹了JQuery中使用ajax傳輸超大數(shù)據(jù)的解決方法,也就是比較多的數(shù)據(jù),超過max_upload_size等設置,本文方法在chrome瀏覽器下測試通過,需要的朋友可以參考下2014-07-07

