效果预览：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

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. iOS------苹果设备处理器指令集（iPhone初代到iPhone5s）

    (via 雅香小筑) Arm处理器,因为其低功耗和小尺寸而闻名,几乎所有的手机处理器都基于arm,其在嵌入式系统中的应用非常广泛,它的性能在同等功耗产品中也很出色. Armv6.armv7.armv7 ...

  2. 【.NET深呼吸】清理对象引用，有一个问题容易被忽略

    大家知道,托管代码一个重要的特点是自动管理内存,即我们常说的垃圾回收机制,那些高大上的理论我就不重复了,有兴趣的朋友可以翻书.我这个有个毛病——不喜欢很严肃地去说一些理论的东西,所以我不多介绍了. 一 ...

  3. 不使用session，借助redis实现验证码

    1.首先看一下基本的流程 2.看一下代码 注:其中用到的一些工具类,可以到我的github上去下载  https://github.com/hjzgg/usually_util/tree/master ...

  4. 创建第一个 local network（II）- 每天5分钟玩转 OpenStack（81）

    上一节通过 Web GUI 创建了 “first_local_net”,本节我们需要搞清楚底层网络结构有了哪些变化? 点击 “first_local_net” 链接,显示 network 的 subn ...

  5. Stop sucking,Become awesome.这一年我做到了么

    一年前,我因一些原因,工作变动,当时痛下决心,引用了<程序员的呐喊>封面的那句话: Just stop sucking and become awesome! 一年很快就过去了,最近看了不 ...

  6. 小菜学习编程-Winform系列（初学者）

    前言 记得上次写<小菜的程序员道路(二)>,这篇文章的时候说过,要把工作以来整理的编程知识分享给大家,因为这半年来的工作实在是忙,现在也在忙着公司产品上线,但是答应的一定要实现,大家看我上 ...

  7. Lua 学习笔记（十）数据结构

    在Lua中的table不是一种简单的数据结构,它可以作为其他数据结构的基础.其他语言提供的数据结构,如数组.记录.线性表.队列.集合等,在Lua中都可以通过table来表示.而且使用Lua实现这些数据 ...

  8. ZOJ Problem Set - 1251 Box of Bricks

    这道题简单的翻译成纯数学语言就是给你n个数字,每次运算只能是加1或者减1,问经过最短几步可以使得n个数字相等 由于题目限定了n个数字一定有平均数,所以求出avg,将所有比其大的数字或者比其小的数字的差 ...

  9. C#运用GmaQrCode生成二维码

    项目中需要生成二维码,方法比较多,可以采用JS插件,也可以采用第三方插件后台生成二维码,在后台方法中可以采用QRCode或者GmaQrCode,现在介绍一种C#在后台生成二维码的方法: /// < ...

  10. 浅析JS中的模块规范（CommonJS，AMD，CMD）

    如果你听过js模块化这个东西,那么你就应该听过或CommonJS或AMD甚至是CMD这些规范咯,我也听过,但之前也真的是听听而已. 现在就看看吧,这些规范到底是啥东西,干嘛的. 一.CommonJS ...