效果預覽：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://"></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() + '\n');
}
})
})
</script>
</body>
</html>
參考：
http://hovertree.com/hvtart/bjae/6asqg23w.htm
http://hovertree.com/hvtart/bjae/vugyl6v3.htm
http:///a/bjac/tmx4mq76.htm