这是一个基于jQuery的星级效果的例子。鼠标滑过星区，显示评论信息提交的内容，并将其应用于评论表单中，它是美化表单提交内容的用户体验设计。

jQuery满足星级评级插件特效代码分享给你






满意的jQuery星级插件





*边距：0；填充：0；列表样式类型：无；}
一、img {边界：0；}
体{字体：12px / 180% Arial，Helvetica，sans-serif；}
测试风格*
{ border: solid 1px。测验# CCC；身高：270px；宽度：772px；}
。测验H3 {字体大小：14px；线高度：35px；身高：35px；底部边框：solid 1px # e8e8e8；填充左：20px；背景：# f8f8f8；颜色：# 666；位置：相对；}。
。quiz_content { padding-top：10px；填充左：20px；位置：相对；身高：205px；}
。quiz_content。BTM {边界：无；宽度：100px；身高：33px；背景：URL（图像/按钮，GIF）没有重复；保证金：00 10px 64px；显示：内联；鼠标指针；}
。quiz_content李。完整的评论{位置：相对；Z指数：99；高度：41px；}
。quiz_content李。cate_l {身高：24px；线高度：24px；座垫：10px；}
。quiz_content li.cate_l DL DT {浮动：左；}
。quiz_content li.cate_l DL DD {浮动：左；填充右：15px；}
。quiz_content li.cate_l DL DD标签{鼠标指针；}
。quiz_content。l_text {身高：120px；位置：相对；填充左：18px；}
。quiz_content。l_text。m_flo {浮动：左；宽度：47px；}
。quiz_content。l_text。文本{宽度：634px；身高：109px；边界：# solid 1px ccc；}
。quiz_content。l_text。TR {位置：绝对；底：- 18px；右：40px；}
/ * * / ODS通讯明星风格
。ODS通讯{身高：41px；位置：相对；Z指数：7；}
。ODS通讯星{线高度：25px；填充左：12px；身高：41px；位置：绝对；顶部：0px；左：0；宽度：400px；}
。ODS通讯星。star_l {浮动：左；显示：内联块；右边距：5px；显示：内联；}
。ODS通讯星。star_choose {浮动：左；显示：内联块；}
评分员星/ ***
。评分星{ position:相对；列表样式：无；保证金：0；padding: 0；背景重复：repeat-x；背景位置：左上；浮动：左；}
.rater-star-item,.Rater-star-item-current,.Rater-star-item-hover{position:absolute; top:0; left:0; background-repeat:repeat-x;}
评分员星项目{背景位置：- 100% - 100%；}
明星项目。评分悬停{背景位置：0 48px；鼠标指针；}
。评分者明星项目的当前{背景位置：0 48px；鼠标指针；}
明星项目。流电流。评分者星快乐{背景位置：0 25px；}
评分项目评分，星星快乐翱翔。{背景位置：0 25px；}
明星项目。流电流。评分星全{背景位置：0 72px；}
popinfo / * * /
。popinfo {显示：无；位置：绝对；顶部：30px；背景：URL（图像/评论/盒BG .gif）没有重复；填料顶部：8px；宽度：192px；margin-left: - 14px；}。
。popinfo。信息盒{ border: 1px solid # F00；边境上：0；padding: 0 5px；颜色：# F60；背景：# FFF；}
。popinfo.info-box div {颜色：# 333；}
。评分者点击提示{字体：12px / 25px；颜色：# 333；margin-left: 10px；背景：URL（图像/评论/ infobox-bg-l.gif）没有重复00；宽度：125px；身高：34px；填充左：16px；溢出：隐藏；}。
。评分者点击提示跨度{显示：块；背景：# fff9dd URL（图像/评论/ infobox-bg-l-r.gif）没有重复100% 0；身高：34px；线高度：34px；填充右：5px；}。
明星。评分项目提示{背景：URL（图像/评论/星提示。GIF）没有重复00；高度：41px；溢出：隐藏；}
游戏星条目提示{显示：块；}
评分结果。明星{ color: # ff6600；font-weight: bold；填充左：10px；浮动：左；}




我想评论一下。




满意度：





内容：

词的数量限制在5-200














运行效果图：



效果演示源代码下载

以上是给大家分享的jQuery满意星级评定插件特效代码，希望大家能喜欢。