你的位置:首页 > Java教程

[Java教程]jQuery用户数字评分效果


 

效果预览:http://hovertree.com/texiao/jquery/5.htm

HTML文件代码:

<!DOCTYPE html><html ="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