jQuery 實(shí)現(xiàn)評(píng)論等級(jí)好評(píng)差評(píng)特效
更新時(shí)間：2016年05月06日 11:14:58 作者：小樣編碼
本文主要介紹如何實(shí)現(xiàn)類似淘寶好評(píng)差評(píng)的效果，需要的小伙伴直接拿去用吧。
實(shí)現(xiàn)評(píng)分等級(jí)，就類似于淘寶的好評(píng)差評(píng)特效，點(diǎn)擊不同的等級(jí)圖標(biāo)顯示相應(yīng)的文字，先來看下效果。
看完效果后估計(jì)大家都明白我要說的是什么了吧，下面小編就帶大家看下代碼
復(fù)制代碼 代碼如下:
<style>
.maxdiv div{
height:10px;
width:20px;
border:1px solid #000;
float:left;
margin:20px 2px 0px 5px;
}
</style>
復(fù)制代碼 代碼如下:
<div class="maxdiv">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<span></span>
最后大家看下JS 上邊小編已經(jīng)把注釋都注上了，其實(shí)也不難，主要是加深理解..
復(fù)制代碼 代碼如下:
$(function(){
$(".maxdiv div").bind("hover",function(){
$(this).attr("style","background:red");//當(dāng)前div加上style="background:red";
$("div:last").prevAll().attr("style","background:red");//給所有的都加上樣式;
$(this).nextAll().attr("style","");//當(dāng)前div后的所有所有樣式都為"";
var dsize=$("div [style ='background:red']").size();//獲得所有背景含有style="background:red"的個(gè)數(shù);
if(dsize==1)
{
$('span').text("很差");
}
else if(dsize==2)
{
$('span').text("差");
}
else if(dsize==3)
{
$('span').text("一般");
}
else if(dsize==4)
{
$('span').text("好");
}
else if(dsize==5)
{
$('span').text("很好");
}
});
});
個(gè)人能力有限，做的不是太美觀，有需要的朋友可以拿去再美化一下，呵呵。
您可能感興趣的文章:
- jquery 新浪網(wǎng)易的評(píng)論塊制作
- jquery實(shí)現(xiàn)仿新浪微博評(píng)論滾動(dòng)效果
- 基于jquery實(shí)現(xiàn)ajax無刷新評(píng)論
- jQuery實(shí)現(xiàn)的簡(jiǎn)單無刷新評(píng)論功能示例
- JQuery實(shí)現(xiàn)動(dòng)態(tài)添加刪除評(píng)論的方法
- PHP結(jié)合jQuery實(shí)現(xiàn)的評(píng)論頂、踩功能
- jQuery基于ajax實(shí)現(xiàn)星星評(píng)論代碼
- C#使用jQuery實(shí)現(xiàn)無刷新評(píng)論提交的方法
- 基于jQuery實(shí)現(xiàn)的美觀星級(jí)評(píng)論打分組件代碼
- jQuery實(shí)現(xiàn)簡(jiǎn)單評(píng)論區(qū)
相關(guān)文章
jQuery實(shí)現(xiàn)漂亮實(shí)用的商品圖片tips提示框效果(無圖片箭頭+陰影)
這篇文章主要介紹了jQuery實(shí)現(xiàn)漂亮實(shí)用的商品圖片tips提示框效果,具有鼠標(biāo)滑過顯示動(dòng)態(tài)提示框的效果,涉及針對(duì)鼠標(biāo)事件的響應(yīng)及頁面元素動(dòng)態(tài)操作技巧,需要的朋友可以參考下2016-04-04
淺談jQuery中的$.extend方法來擴(kuò)展JSON對(duì)象
下面小編就為大家?guī)硪黄獪\談jQuery中的$.extend方法來擴(kuò)展JSON對(duì)象。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過像翻頁和描點(diǎn)鏈接效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過像翻頁和描點(diǎn)鏈接效果的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08
jQuery實(shí)現(xiàn)的導(dǎo)航動(dòng)畫效果(附demo源碼)
這篇文章主要介紹了jQuery實(shí)現(xiàn)的導(dǎo)航動(dòng)畫效果,可實(shí)現(xiàn)導(dǎo)航條的底部橫條隨鼠標(biāo)移動(dòng)的效果,涉及jQuery針對(duì)鼠標(biāo)事件的響應(yīng)及頁面元素樣式動(dòng)態(tài)變換的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04
基于jquery實(shí)現(xiàn)的鼠標(biāo)滑過按鈕改變背景圖片
基于jquery實(shí)現(xiàn)的鼠標(biāo)滑過按鈕改變背景圖片，發(fā)現(xiàn)用CSS用時(shí)IE6不兼容，所以就用見JQ實(shí)現(xiàn)。2011-07-07
jquery+CSS實(shí)現(xiàn)的水平布局多級(jí)網(wǎng)頁菜單效果
這篇文章主要介紹了jquery+CSS實(shí)現(xiàn)的水平布局多級(jí)網(wǎng)頁菜單效果,涉及jquery頁面元素屬性動(dòng)態(tài)變換效果實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08
Jquery ajax傳遞復(fù)雜參數(shù)給WebService的實(shí)現(xiàn)代碼
Jquery ajax傳遞復(fù)雜參數(shù)給WebService的實(shí)現(xiàn)代碼，需要的朋友可以參考下。主要是屬性比較多。2011-08-08
本文給大家總結(jié)了幾種使用jQuery實(shí)現(xiàn)的分頁插件，效果非常不錯(cuò)，有需要的小伙伴可以參考下。2015-11-11
jquery isEmptyObject判斷是否為空對(duì)象的函數(shù)
jQuery 判斷一個(gè)對(duì)象是否為空是使用for name in obj 來遍歷對(duì)象中的屬性名.2011-02-02
第一次做的插件，我這個(gè)插件好像使用有些另類，是調(diào)用數(shù)據(jù)展示容器的元素$(#DataContent).AmSetPager({...});在參數(shù)中配置分頁容器元素ID。寫完插件后看別的插件都是調(diào)用分頁元素ID2013-04-04