jQuery用户数字评分效果
效果预览：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用户数字评分效果的更多相关文章
- jQuery动态星级评分效果实现方法
本文实例讲述了jQuery动态星级评分效果实现方法.分享给大家供大家参考.具体如下: 这里的jQuery星级评分代码,是大家都很喜欢的功能,目前广泛应用,本星级评分加入了动画效果,注意,如果要真正实现 ...
- 用jQuery实现数字滚动效果
html 部分 <div class="js-box box"></div> css 部分 .statistic .box{ display: inline ...
- 推荐20款基于 jQuery & CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
- jQuery Countdown Timer 倒计时效果
这个一款简单的 jQuery 倒计时插件,用于显示剩余的天数,小时,分钟和秒.倒计时功能是非常有用的一个小功能,可以告诉用户多久以后您的网站将会发布或者关闭进行维护,还可以用于举办活动的开始和停止的倒 ...
- jQuery动态五星评分
效果 css .star ul, .star li { list-style: none; } .star { position: relative; width: 600px; height: 24 ...
- 【前端】用jQuery实现瀑布流效果
jQuery实现瀑布流效果 何为瀑布流: 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早 ...
- jquery实战---标签页效果
在前面的博客中,小编主要简单的介绍了jquery的一些基本知识,今天这篇博文,小编继续来学习jquery的相关知识,今天我们来学习一个标签页的小例子,相关源码小编已经上传,有需要的小伙伴可以自己去下载 ...
- jquery Jquery 遍历 获取设置 效果
speed: slow fast 毫秒 隐藏 显示 $(selector).hide(speed,callback) 隐藏. $(selector).show(speed,callback) 显示 $ ...
- 基于jQuery的数字键盘插件
有时,我们需要在网页上使用软键盘.今天,就给大家带来一个基于jQuery的数字键盘插件,除了jQuery,不需要依赖任何文件资源.纯数字键盘,有退格,有清除,不支持输入小数(需要的可以自己改一下,主要 ...
随机推荐
- SSIS Design2：增量更新
一般来说,ETL实现增量更新的方式有两种,第一种:记录字段的最大值,如果数据源中存在持续增加的数据列,记录上次处理的数据集中,该列的最大值:第二种是,保存HashValue,快速检查所有数据,发现异动 ...
- 实战MEF（4）：搜索范围
在前面的文章中,几乎每个示例我们都会接触到扩展类的搜索位置,我们也不妨想一下,既然是自动扩展,它肯定会有一个或者多人可供查找的位置,不然MEF框架怎么知道哪里有扩展组件呢? 就像我们用导航系统去查找某 ...
- 动态给div中新增html
小颖最近接触的项目中用到了 innerHTML 所以小颖今天就自己做了个demo,当当当当代码请看下方: 页面效果:
- web前端基础知识总结
上个寒假总结的web前端的一些知识点给大家分享一下 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1) dir: 文本的显示方向,默认是从左向右 ...
- hibernate笔记--基于外键的单(双)向的一对一映射关系
假设我们有两张表,人员信息表Person,和身份信息表IdCard,我们知道每个人只有一个身份证号,所以这里的Person和IdCard表是一一对应的,也就是一对一的映射关系,基于外键的单向一对一映射 ...
- 关于WebGIS开源解决方案的探讨
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 公司目前的多数项目采用的是ArcGIS产品+Oracle+W ...
- Xamarin.Android之引导页的简单制作
0x01 前言 对于现在大部分的APP,第一次打开刚安装或更新安装的APP都会有几个引导界面,通常这几个引导页是告诉用户 APP有些什么功能或者修改了什么bug.新增了什么功能等等等. 下面就用Xam ...
- [Q&A] MySQL Error 1050(42S01): Table already exist
[环境说明] 1:MySQL Server 5.5 2:MyEclipse 2014 3:JDK 1.7 造成该问题的可能原因: 1:用 Java 读取 SQL 文件,并执行其中的 sql 语句,但是 ...
- Parallel并行编程初步
Parallel并行编程可以让我们使用极致的使用CPU.并行编程与多线程编程不同,多线程编程无论怎样开启线程,也是在同一个CPU上切换时间片.而并行编程则是多CPU核心同时工作.耗时的CPU计算操作选 ...
- 详解Spring框架AOP(面向切面编程)
最近在学习AOP,之前一直很不明白,什么是AOP?为什么要使用AOP,它有什么作用?学完之后有一点小小的感触和自己的理解,所以在这里呢就跟大家一起分享一下 AOP(Aspect-Oriented Pr ...