效果预览：http://hovertree.com/texiao/jquery/5.htm
HTML文件代码：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery用户数字打分评分代码 - HoverTree</title><base target="_blank" /> <script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script> <style type="text/css"> * { margin: 0; padding: 0; font-family: "微软雅黑"; } ul { list-style: none; } /*用户评分*/ .hovertreepingfen { padding: 15px 0; width: 1200px; 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; } .hovertreepful { margin: 10px 0; } .hovertreepful li { float: left; width: 98px; height: 30px; text-align: center; line-height: 30px; border: #ddd 1px solid; background: #f1f1f1; cursor: pointer; } .hovertreepful li.pfxtCur { background: #308A95; color: #fff; border: #308A95 1px solid; } .hvtclear{width:100%;clear:both;} .hvtblock{clear:both;width:800px;margin:5px auto;} a{color:blue;} </style> </head> <body> <!--用户评分代码--> <div class="hovertreepingfen"> <div class="pingfenList"> <div class="pfxtTitle">功能：</div> <div class="pfxtText">你觉得这个创意在功能上优秀吗？</div> <ul class="hovertreepful"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul><!--pfxtMid/--> <div class="pfxtRight"></div> <div class="clearfix"></div> </div><!--pingfenList/--> <div class="pingfenList"> <div class="pfxtTitle">外观：</div> <div class="pfxtText">你觉得柯乐义网在外观上优秀吗？</div> <ul class="hovertreepful"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul><!--pfxtMid/--> <div class="pfxtRight"></div> <div class="clearfix"></div> </div><!--pingfenList/--> <div class="pingfenList"> <div class="pfxtTitle">成本：</div> <div class="pfxtText">你觉得这个创意在成本上优秀吗？</div> <ul class="hovertreepful"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul><!--pfxtMid/--> <div class="pfxtRight"></div> <div class="clearfix"></div> </div><!--pingfenList/--> <div class="pingfenList"> <div class="pfxtTitle">难度：</div> <div class="pfxtText">你觉得这个HoverTree网站的难度大吗？</div> <ul class="hovertreepful"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul><!--pfxtMid/--> <div class="pfxtRight"></div> <div class="clearfix"></div> </div><!--pingfenList/--> <div class="clearfix"></div> </div><!--hovertreepingfen/--> <!--用户评分代码--> <div class="hvtclear"></div> <div class="hvtblock"> <textarea id="result_hovertree_com" rows="5" cols="30"></textarea> <input type="button" id="clear_hovertree_com" value="清空" /> <input type="button" id="sumit_hovertree_com" value="提交" /> <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/hvtart/bjae/m8wrrmrw.htm">原文</a> <a href="http://hovertree.com/texiao/">特效库</a> <a href="http://keleyi.com">柯乐义</a> <br />先打分，然后再点击提交按钮 </div> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';clear:both;"> <br /><h2>HoverTree用户数字打分评价特效</h2> <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p> <p>来源：<a href="http://hovertree.com/" target="_blank">HoverTree</a></p> </div> <script> $(function () { //简洁用户评分代码 $(".hovertr"+"eepful li").click(function () { $(this).addClass("pfxtCur"); $(this).prevAll().addClass("pfxtCur"); $(this).nextAll().removeClass("pfxtCur"); }); $("#clear_h"+"overtree_com").on("click", function () { $(".hovertreepful li").removeClass("pfxtCur"); $("#result_hovertree_com").val(''); }) $("#sumit_hover"+"tree_com").on("click", function () { var hovertreeul = $(".hovertreepful"); var hovertreecount = hovertreeul.length; var hovertreeresult = $("#result_hovertree_com"); hovertreeresult.val(''); for (i = 0; i < hovertreecount; i++) { hovertreeresult.val(hovertreeresult.val() + hovertreeul.eq(i).find(".pfxtCur:last").text() + ' '); } }) }) </script> </body> </html>
参考：
http://hovertree.com/hvtart/bjae/6asqg23w.htm
http://hovertree.com/hvtart/bjae/vugyl6v3.htm
http://keleyi.com/a/bjac/tmx4mq76.htm
web前端汇总：