效果预览：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() + ‘\n‘);
}
})
})
</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前端汇总：
http://www.cnblogs.com/jihua/p/webfront.html
时间： 2024-10-13 22:30:53