js仿淘宝评价评分功能

效果图：

图(1)初始图

图(2)点击效果

代码如下：

！DOCTYPE html html hearteta charset=' utf-8 ' meta http-equiv=' X-UA-Compatible ' content=' IE=edge，chrome=1'title文件上传/title meta name=' description ' content=' meta name=' keywords ' content=' script src=' http :http://code。jquery。com/jquery-最新。js ' type=' text/JavaScript '/脚本样式/*评分*/ul { height : 20px；}李{列表式：无；向左浮动：宽度： 15px高度： 20px}。左心{背景： URL(' http://cdn。附上。qd funs。com/notes/pics/201702/28/145751 uq 6 u 6 vfsnsvdbqbp。png ')无重复左下角；} .右心{背景： URL(' http://cdn。附上。qd uns。com/notes/pics/201702/28/145751 chrjmidtdy 4 rmm 1t。png ')无重复左下方；} .分数{ font-size : 22px字体粗细：更粗；color : # ff 0000 }/style/head body on load=' init()'！-评分-ul Li='半心左心'/Li Li='半心右心'/Li Li='半心左心'/Li Li='半心左心'/Li Li='半心右心'/Li Li='半心左心'/Li Li='半心右心'/Li Li='半心右心'/Li Li Li='半心左心'/李丽丽='半心右心'/Li得分：span class=' score '/span/ul script $(。半心：奇数').css(“”填充-右侧，' 5px ')；var ifHover=真，ifClick=真；$('.半个心').将鼠标悬停在(function(){ if(IFHover){ for(var I=0；i=$(这个)。index()；i ) { $(' .半个心').方程式(I ).css(“”背景位置','左上角');} $('.分数')。文本(($(本)).指数(1)* 0.5);} }) $('.半个心').鼠标移出(function(){ if(IFHover){ for(var I=0；i=$(这个)。index()；i ) { $(' .半个心').方程式(I ).css(“”背景位置','左下角');} } }) $('.半个心').click(function(){ if(ifClick){ ifHover=false；ifClick=false for(var I=0；i=$(这个)。index()；i ) { $(' .半个心').方程式(I ).css(“”背景位置','左上角');} $('.分数')。文本(($(本)).指数(1)* 0.5);} })/脚本/正文/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！