jquery实现用户打分评分特效

   很多网站都应用了评分效果,让用户可以对正在浏览的文章、电影、资源等进行评分,让网站增添了几分互动效果。本文将讲解如何使用jQuery来实现评分效果。

  js代码:

  ?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<script type="text/javascript">
$(function(){
 
//简洁用户评分代码
$(".pfxtFen li").click(function(){
$(this).addClass("pfxtCur");
$(this).prevAll().addClass("pfxtCur");
$(this).nextAll().removeClass("pfxtCur");
});
 
$(".pfxtFen li").dblclick(function(){
$(".pfxtFen li").removeClass("pfxtCur");
});
 
})
</script>

  CSS

  ?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<style type="text/css">
*{margin:0;padding:0; font-family:"微软雅黑"}
ul{ list-style:none;}
/*用户评分*/
.pingfenxitong{
padding:15px 0;
width:500px;
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;
}
.pfxtFen{
margin:10px 0;
}
.pfxtFen li{
float:left;
width:98px;
height:30px;
text-align:center;
line-height:30px;
border:#ddd 1px solid;
background:#f1f1f1;
cursor:pointer;
}
.pfxtFen li.pfxtCur{
background:#308A95;
color:#fff;
border:#308A95 1px solid;
}
 
</style>

  HTML

  ?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

<div class="pingfenxitong">
 
<div class="pingfenList">
 
<div class="pfxtTitle">功能:</div>
<div class="pfxtText">你觉得这个创意在功能上优秀吗?</div>
<ul class="pfxtFen" title="双击取消评分">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<div class="clearfix"></div>
</ul>
 
<div class="pfxtRight"></div>
<div class="clearfix"></div>
</div>
 
<div class="pingfenList">
<div class="pfxtTitle">外观:</div>
<div class="pfxtText">你觉得这个创意在外观上优秀吗?</div>
<ul class="pfxtFen" title="双击取消评分">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<div class="clearfix"></div>
</ul>
<div class="pfxtRight"></div>
<div class="clearfix"></div>
</div>
 
<div class="pingfenList">
<div class="pfxtTitle">成本:</div>
<div class="pfxtText">你觉得这个创意在成本上优秀吗?</div>
<ul class="pfxtFen" title="双击取消评分">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<div class="clearfix"></div>
</ul>
<div class="pfxtRight"></div>
<div class="clearfix"></div>
</div>
 
<div class="pingfenList">
<div class="pfxtTitle">难度:</div>
<div class="pfxtText">你觉得这个创意在难度上可行吗?</div>
<ul class="pfxtFen" title="双击取消评分">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<div class="clearfix"></div>
</ul>
<div class="pfxtRight"></div>
<div class="clearfix"></div>
</div>
 
<div class="clearfix"></div>
 
</div>

  以上所述就是本文的全部内容了,希望大家能够喜欢。

时间: 2024-09-30 14:46:48

jquery实现用户打分评分特效的相关文章

jquery实现用户打分评分特效_jquery

js代码: <script type="text/javascript"> $(function(){ //简洁用户评分代码 $(".pfxtFen li").click(function(){ $(this).addClass("pfxtCur"); $(this).prevAll().addClass("pfxtCur"); $(this).nextAll().removeClass("pfxtCur

jQuery满意度星级评价插件特效代码分享_jquery

这是一款基于jQuery 的星级评分效果实例,鼠标滑过星星区域显示评论信息提交内容,适用在评论表单里面,是表单美化提交内容的一种用户体验设计.  为大家分享的jQuery满意度星级评价插件特效代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>满意度jQuery星级评分插件</title> &l

jquery实现的3D旋转木马特效代码分享_jquery

本文实例讲述了jquery实现的3D旋转木马特效.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的3D旋转木马特效代码,适合用于产品展示,便于用户循环浏览产品细节,是一款非常实用的特效代码. 运行效果图:----------------------查看效果 下载源码----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery实现的3D旋转木马特效代码如下 <head> <meta http-equiv=

jquery专业的导航菜单特效代码分享_jquery

本文实例讲述了jquery专业的下拉菜单特效.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的专业下拉菜单特效,蓝色风格的下拉菜单非常经典,网站是否有一个具有吸引力的导航会影响到用户停留时间的长久,就像小编编辑的文章内容影响亲们的访问时间长久一样.大家要学会如何建立一个属于自己网站风格的导航菜单. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 关键代码: stu

jQuery插件实现无缝滚动特效_jquery

首先来看下html骨架,如下: <div class="box"> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> </div> 结构简单明了,没什么说的. 讲下实现原理: div box是最外层盒子,给它指定的宽高,记得给box添加一个 overflow:hidden (超出的内容隐藏)样式,因为滚动肯定是会超出b

jQuery根据用户电脑是mac还是pc加载对应样式的方法

  本文实例讲述了jQuery根据用户电脑是mac还是pc加载对应样式的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 if (navigator.userAgent.indexOf('Mac OS X') != -1) { $("body").addClass("mac"); } else { $("body").addClass("pc"); } 希望本文所述对大家的jQuery程序设计有所帮助.

jquery ui dialog实现弹窗特效的思路及代码

这篇文章介绍了jquery ui dialog实现弹窗特效的思路及代码,有需要的朋友可以参考一下     今天我们用jquery ui dialog来做一个弹窗特效.我们先看下效果截图: 我们可以看到,点击的时候,弹窗出现,而且这个弹窗是居中的,还是可以拖动的...实现这一切,只要以下代码: 我们可以看到,我对pop这个div,实现的方式是让它不要autoopen,点击的时候,我只要一句dialog,open就搞定了,借助于 jquery ui,我们做弹窗就是这么简单...当然了,大家可以看到,

原生js和jQuery写的网页选项卡特效对比

  原生js和jQuery写的网页选项卡特效对比  总的来说思路比较简单,就是先获取节点,然后对节点进行相应的处理,下面是完整的页面代码: 原生js: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 6

基于jquery ajax 用户无刷新登录方法详解_jquery

Ajax框架就是提供模块化实现Ajax功能的集合,Ajax框架可以是各种语言实现的(比如SAJAX有各种语言的实现),Ajax只是jquery中的一部分, 实例1 复制代码 代码如下: $.ajax({ type:'post',//可选get url:'action.php',//这里是接收数据的PHP程序 data:'data='dsa',//传给PHP的数据,多个参数用&连接 dataType:'text',//服务器返回的数据类型 可选XML ,Json jsonp script html