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

HTML文件代码：

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>jQuery用户数字打分评分代码 - HoverTree</title><base target="_blank" />
  5. <script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
  6. <style type="text/css">
  7. * {
  8. margin: 0;
  9. padding: 0;
  10. font-family: "微软雅黑";
  11. }
  12.  
  13. ul {
  14. list-style: none;
  15. }
  16. /*用户评分*/
  17. .hovertreepingfen {
  18. padding: 15px 0;
  19. width: 1200px;
  20. margin: 0 auto;
  21. }
  22.  
  23. .pingfenList {
  24. float: left;
  25. width: 500px;
  26. padding-right: 20px;
  27. }
  28.  
  29. .pfxtTitle {
  30. font-weight: bold;
  31. font-size: 1.2em;
  32. padding: 4px 0;
  33. }
  34.  
  35. .pfxtText {
  36. line-height: 25px;
  37. }
  38.  
  39. .hovertreepful {
  40. margin: 10px 0;
  41. }
  42.  
  43. .hovertreepful li {
  44. float: left;
  45. width: 98px;
  46. height: 30px;
  47. text-align: center;
  48. line-height: 30px;
  49. border: #ddd 1px solid;
  50. background: #f1f1f1;
  51. cursor: pointer;
  52. }
  53.  
  54. .hovertreepful li.pfxtCur {
  55. background: #308A95;
  56. color: #fff;
  57. border: #308A95 1px solid;
  58. }
  59. .hvtclear{width:100%;clear:both;}
  60. .hvtblock{clear:both;width:800px;margin:5px auto;}
  61. a{color:blue;}
  62. </style>
  63. </head>
  64. <body>
  65. <!--用户评分代码-->
  66. <div class="hovertreepingfen">
  67.  
  68. <div class="pingfenList">
  69.  
  70. <div class="pfxtTitle">功能：</div>
  71. <div class="pfxtText">你觉得这个创意在功能上优秀吗？</div>
  72. <ul class="hovertreepful">
  73. <li>1</li>
  74. <li>2</li>
  75. <li>3</li>
  76. <li>4</li>
  77. <li>5</li>
  78.  
  79. </ul><!--pfxtMid/-->
  80.  
  81. <div class="pfxtRight"></div>
  82. <div class="clearfix"></div>
  83. </div><!--pingfenList/-->
  84.  
  85. <div class="pingfenList">
  86. <div class="pfxtTitle">外观：</div>
  87. <div class="pfxtText">你觉得柯乐义网在外观上优秀吗？</div>
  88. <ul class="hovertreepful">
  89. <li>1</li>
  90. <li>2</li>
  91. <li>3</li>
  92. <li>4</li>
  93. <li>5</li>
  94.  
  95. </ul><!--pfxtMid/-->
  96. <div class="pfxtRight"></div>
  97. <div class="clearfix"></div>
  98. </div><!--pingfenList/-->
  99.  
  100. <div class="pingfenList">
  101. <div class="pfxtTitle">成本：</div>
  102. <div class="pfxtText">你觉得这个创意在成本上优秀吗？</div>
  103. <ul class="hovertreepful">
  104. <li>1</li>
  105. <li>2</li>
  106. <li>3</li>
  107. <li>4</li>
  108. <li>5</li>
  109.  
  110. </ul><!--pfxtMid/-->
  111. <div class="pfxtRight"></div>
  112. <div class="clearfix"></div>
  113. </div><!--pingfenList/-->
  114.  
  115. <div class="pingfenList">
  116. <div class="pfxtTitle">难度：</div>
  117. <div class="pfxtText">你觉得这个HoverTree网站的难度大吗？</div>
  118. <ul class="hovertreepful">
  119. <li>1</li>
  120. <li>2</li>
  121. <li>3</li>
  122. <li>4</li>
  123. <li>5</li>
  124. </ul><!--pfxtMid/-->
  125. <div class="pfxtRight"></div>
  126. <div class="clearfix"></div>
  127. </div><!--pingfenList/-->
  128.  
  129. <div class="clearfix"></div>
  130.  
  131. </div><!--hovertreepingfen/-->
  132. <!--用户评分代码-->
  133. <div class="hvtclear"></div>
  134. <div class="hvtblock">
  135. <textarea id="result_hovertree_com" rows="5" cols="30"></textarea>
  136. <input type="button" id="clear_hovertree_com" value="清空" />
  137. <input type="button" id="sumit_hovertree_com" value="提交" />
  138. <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>
  139. <br />先打分，然后再点击提交按钮
  140. </div>
  141.  
  142. <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';clear:both;">
  143. <br /><h2>HoverTree用户数字打分评价特效</h2>
  144. <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
  145. <p>来源：<a href="http://hovertree.com/" target="_blank">HoverTree</a></p>
  146. </div>
  147.  
  148. <script>
  149. $(function () {
  150.  
  151. //简洁用户评分代码
  152. $(".hovertr"+"eepful li").click(function () {
  153. $(this).addClass("pfxtCur");
  154. $(this).prevAll().addClass("pfxtCur");
  155. $(this).nextAll().removeClass("pfxtCur");
  156. });
  157.  
  158. $("#clear_h"+"overtree_com").on("click", function () {
  159. $(".hovertreepful li").removeClass("pfxtCur");
  160. $("#result_hovertree_com").val('');
  161. })
  162.  
  163. $("#sumit_hover"+"tree_com").on("click", function () {
  164. var hovertreeul = $(".hovertreepful");
  165. var hovertreecount = hovertreeul.length;
  166. var hovertreeresult = $("#result_hovertree_com");
  167. hovertreeresult.val('');
  168. for (i = 0; i < hovertreecount; i++)
  169. {
  170. hovertreeresult.val(hovertreeresult.val() + hovertreeul.eq(i).find(".pfxtCur:last").text() + '\n');
  171. }
  172. })
  173.  
  174. })
  175. </script>
  176. </body>
  177. </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

jQuery用户数字评分效果的更多相关文章

  1. jQuery动态星级评分效果实现方法

    本文实例讲述了jQuery动态星级评分效果实现方法.分享给大家供大家参考.具体如下: 这里的jQuery星级评分代码,是大家都很喜欢的功能,目前广泛应用,本星级评分加入了动画效果,注意,如果要真正实现 ...

  2. 用jQuery实现数字滚动效果

    html 部分 <div class="js-box box"></div> css 部分 .statistic .box{ display: inline ...

  3. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  4. jQuery Countdown Timer 倒计时效果

    这个一款简单的 jQuery 倒计时插件,用于显示剩余的天数,小时,分钟和秒.倒计时功能是非常有用的一个小功能,可以告诉用户多久以后您的网站将会发布或者关闭进行维护,还可以用于举办活动的开始和停止的倒 ...

  5. jQuery动态五星评分

    效果 css .star ul, .star li { list-style: none; } .star { position: relative; width: 600px; height: 24 ...

  6. 【前端】用jQuery实现瀑布流效果

    jQuery实现瀑布流效果 何为瀑布流: 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早 ...

  7. jquery实战---标签页效果

    在前面的博客中,小编主要简单的介绍了jquery的一些基本知识,今天这篇博文,小编继续来学习jquery的相关知识,今天我们来学习一个标签页的小例子,相关源码小编已经上传,有需要的小伙伴可以自己去下载 ...

  8. jquery Jquery 遍历 获取设置 效果

    speed: slow fast 毫秒 隐藏 显示 $(selector).hide(speed,callback) 隐藏. $(selector).show(speed,callback) 显示 $ ...

  9. 基于jQuery的数字键盘插件

    有时,我们需要在网页上使用软键盘.今天,就给大家带来一个基于jQuery的数字键盘插件,除了jQuery,不需要依赖任何文件资源.纯数字键盘,有退格,有清除,不支持输入小数(需要的可以自己改一下,主要 ...

随机推荐

  1. 【Win 10开发】协议-上篇：自定义应用协议

    就像系统许多内置应用可以通过URI来启动(如ms-settings-bluetooth:可以打开蓝牙设置页),我们自己开发的应用程序,如果需要的话,可以为应用程序自定义一个协议.应用程序协议在安装时会 ...

  2. .Net 转战 Android 4.4 日常笔记（5）--新软件Android Studio 0.5.8安装与配置及问题解决

    说真心话,Eclipse跟我们.net的VS比起来就是屌丝比高富帅,一切都是那么的难用,速度慢得我无法忍受 于是想试试Google钦点的Android Studio IDE工具,这跟ADT一样也是一套 ...

  3. 跌倒了，再爬起来：ASP.NET 5 Identity

    "跌倒了"指的是这一篇博文:爱与恨的抉择:ASP.NET 5+EntityFramework 7 如果想了解 ASP.NET Identity 的"历史"及&q ...

  4. MVC html.actionlink

    Html.ActionLink 在 LinkExtensions 类中,ActionLink方法参数说明: 简单来说捏 就是这样滴 参数                      类型         ...

  5. DotNet指定文件显示的尺寸

    在项目中开发中,有时候需要将文件的尺寸进行控制,例如需要将文件的尺寸指定为字节,TB等.现在提供一个方法,实现将指定文件的尺寸, 提供:"字节", "KB", ...

  6. 【JUC】JDK1.8源码分析之LinkedBlockingQueue（四）

    一.前言 分析完了ArrayBlockingQueue后,接着分析LinkedBlockingQueue,与ArrayBlockingQueue不相同,LinkedBlockingQueue底层采用的 ...

  7. SQLServer学习笔记系列11

    一.写在前面的话 身体是革命的本钱,这句放在嘴边常说的话,还是拿出来一起共勉,提醒一起奋斗的同僚们,保证睡眠,注意身体!偶尔加个班,也许不曾感觉到身体发出的讯号,长期晚睡真心扛不住!自己也制定计划,敦 ...

  8. SQL Server SQL性能优化之--数据库在“简单”参数化模式下，自动参数化SQL带来的问题

    数据库参数化的模式 数据库的参数化有两种方式,简单(simple)和强制(forced),默认的参数化默认是“简单”,简单模式下,如果每次发过来的SQL,除非完全一样,否则就重编译它(特殊情况会自动参 ...

  9. PHP CURL CURLOPT参数说明(curl_setopt)

    CURLOPT_RETURNTRANSFER 选项: curl_setopt($ch, CURLOPT_RETURNTRANSFER,1); 如果成功只将结果返回,不自动输出任何内容. 如果失败返回F ...

  10. Linux(Centos)快速搭建SVN

    前言 项目中源码或者文档需要进行管理与版本记录,历数此类工具VSS.CVS.SVN.GIT等等,有非常多的版本控制系统.SVN现在还是很常见,把笔记总结搬上博客,SVN这个再不放以后估计只能写GIT的 ...