jquery實(shí)現(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">你覺得這個(gè)創(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">你覺得這個(gè)創(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">你覺得這個(gè)創(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">你覺得這個(gè)創(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>
以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。
相關(guān)文章
jQuery網(wǎng)頁定位導(dǎo)航特效實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery網(wǎng)頁定位導(dǎo)航特效實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了jQuery網(wǎng)頁定位導(dǎo)航的功能描述、原理與核心實(shí)現(xiàn)代碼,需要的朋友可以參考下2016-12-12
jQuery+ajax實(shí)現(xiàn)動(dòng)態(tài)添加表格tr td功能示例
這篇文章主要介紹了jQuery+ajax實(shí)現(xiàn)動(dòng)態(tài)添加表格tr td功能,結(jié)合實(shí)例形式分析了jQuery基于ajax動(dòng)態(tài)創(chuàng)建頁面table元素相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
jquery.fastLiveFilter.js實(shí)現(xiàn)輸入自動(dòng)過濾的方法
這篇文章主要介紹了jquery.fastLiveFilter.js實(shí)現(xiàn)輸入自動(dòng)過濾的方法,涉及jquery鼠標(biāo)事件及字符串遍歷的相關(guān)技巧,簡單實(shí)用,需要的朋友可以參考下2015-08-08
jQuery EasyUI右鍵菜單實(shí)現(xiàn)關(guān)閉標(biāo)簽/選項(xiàng)卡
這篇文章主要介紹了jQuery EasyUI右鍵菜單實(shí)現(xiàn)關(guān)閉標(biāo)簽/選項(xiàng)卡,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10
jQuery實(shí)現(xiàn)簡易計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡易計(jì)算器功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07
以jQuery中$.Deferred對象為例講解promise對象是如何處理異步問題
Promises是一種令代碼異步行為更加優(yōu)雅的抽象,它很有可能是JavaScript的下一個(gè)編程范式,一個(gè)Promise即表示任務(wù)結(jié)果,無論該任務(wù)是否完成。本文以jQuery中$.Deferred對象為例講解promise對象是如何處理異步問題,需要的朋友參考下2015-11-11
JQuery中使用ajax傳輸超大數(shù)據(jù)的解決方法
這篇文章主要介紹了JQuery中使用ajax傳輸超大數(shù)據(jù)的解決方法,也就是比較多的數(shù)據(jù),超過max_upload_size等設(shè)置,本文方法在chrome瀏覽器下測試通過,需要的朋友可以參考下2014-07-07

