代码如下：
<!DOCTYPE HTML>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现五星级评分-柯乐义</title>
<style>
*{margin:0;padding:0;font-size:13px;}
ul,li{list-style:none;}
.star {position:relative;width:600px;height:24px; margin:20px auto 0;}
.star span {float:left;height:19px;line-height:19px;}
.star ul{margin:0 10px;}
.star li{float:left;width:24px;height:22px;text-indent:-9999px;background:url('http://keleyi.com/keleyi/phtml/jqtexiao/15/star.png') no-repeat;cursor:pointer;}
.star li.on{background-position:0 -28px;}
.star p {background:url('icon.gif') no-repeat;padding:10px 10px 0;position:absolute;top:20px;width:159px;height:60px;z-index:100;}
.star p em {color: #FF6600;display: block;font-style: normal;}
.star strong {color:#ff6600;padding-left:10px;}
.hidden{display:none;}
</style>
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://keleyi.com/keleyi/phtml/jqtexiao/15/score.js"></script>
</head>

<body>
<div style="width:736px;margin:0px auto;"><a href="http://keleyi.com/a/bjac/yg2au6tt.htm" target="_blank">原文</a></div>
<div class="star">
<span>jQuery星级评论打分</span>
<ul>
<li><a href="javascript:;">1</a></li>
<li><a href="javascript:;">2</a></li>
<li><a href="javascript:;">3</a></li>
<li><a href="javascript:;">4</a></li>
<li><a href="javascript:;">5</a></li>
</ul>
</div>
<script type="text/javascript">
$(function(){
var score = new Score({
callback: function(cfg) {
console.log(cfg.starAmount);
}
});
});
</script>
</body>
</html>

JQ_五星级评分特效的更多相关文章

  1. JS五星级评分效果(类似与淘宝打分效果)

    今天晚上研究下 五星级评分效果,类似于淘宝后台评分效果,如下图所示: 思路: 当鼠标移到一颗星的时候 判断当前的索引 当前及当前的索引前面的星星亮起来 每当移到任何一颗星星时候 下面跟随提示 mous ...

  2. jQuery动态五星评分

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

  3. 仿腾讯QQ竖直滑动导航菜单

    菜单就像qq软件的分组,鼠标经过自动显示相应组的内容. 效果体验网址:http://keleyi.com/a/bjad/nf86w2dv.htm 以下是源代码: <html> <he ...

  4. DNF NPK包名对照一览表

    文章转载自:http://bbs.exrpg.com/thread-107917-1-1.html ┌ sprite.NPK                                      ...

  5. 利用jquery实现电商网站常用特效之：五星评分

    这篇文章主要为大家详细介绍了基于jquery实现五星好评,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 在电商网站,我们经常会用到五星评分的功能,现在用jQuery实现一个简单的demo: 1.引 ...

  6. JQ_下雪特效

    这是一个jQuery下雪特效.特效的代码如下: <style>body{background:black;color:white}</style><script>/ ...

  7. jQuery用户数字评分效果

    效果预览:http://hovertree.com/texiao/jquery/5.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...

  8. Nibbler – 免费的网站测试和指标评分工具

    Nibbler 是一款免费的工具,用于测试网站的各个方面指标.输入任意网站的地址,Nibbler 会给你一份报告,列出网站的10个关键领域的分数,包括可访问性,用户体验,搜索引擎优化,社交媒体和技术等 ...

  9. jquery select选中表单特效三级联动

    好久没发帖了,今天发一个jquery select的表单三级联动,希望能对有需要的朋友有点帮助. js代码,当然还要加上jquery的包,应该都有的,这里就不发了. <script type=& ...

随机推荐

  1. 解决VB6.0中不能加载MSCOMCTL.OCX的错误提示

    VB6.0毕竟是很古老的开发工具了,其对所使用的第三方组件依赖性比较强,例如在打开从其它电脑上拿来的VB6.0的软件(系统)的工程文件(源代码)时,经常会遇到"不能加载MSCOMCTL.OC ...

  2. entityFramework 中decimal精度缺失问题

    在entityFramework中,decimal精度默认为2位数,当要设置的精度大于2位并且数据库中设置的decimal精度大于2位时,则将数据保存在数据库中后两位的小数内容将强制为00 解决方案: ...

  3. Android5.0中Material Design的新特性

    最近项目中需要用到Material Design,整理了下面几个常用的控件,以便记忆. 一.Snackbar 1.作用:与Toast类似,但是可以点击监听: 2.使用: (1)Snackbar调用静态 ...

  4. 【转】VMware虚拟机三种网络模式超详解

    [原文]https://www.toutiao.com/i6596228488666022403/ 由于Linux目前很热门,越来越多的人在学习Linux,但是买一台服务放家里来学习,实在是很浪费.那 ...

  5. 脱壳_01_虚拟机壳_VMP

    写在前面的话: 上一篇文章中,带领大家一起分析了简单的压缩壳ASPACK,今天,就和大家一起来揭开VMP这道神秘的面纱: [花指令]:扰乱调试器的,并不执行: [混淆]:对原指令进行拆解或等价替换,会 ...

  6. 51nod 1625 夹克爷发红包

    题目链接戳这里 题意是有一个赋有非负数的矩阵,每次可以将某一行or某一列替换成某个数值,可以替换<=k次,问如何替换能使得矩阵总和最大,输出最大值. 一开始想的是简单的贪心:比如找当前收益最大的 ...

  7. 未能找到 CodeDom 提供程序类型“Microsoft.CodeDom.Providers.DotNetCompilerPlatform.CSharpCodeProvider,

    未能找到 CodeDom 提供程序类型“Microsoft.CodeDom.Providers.DotNetCompilerPlatform.CSharpCodeProvider, Microsoft ...

  8. [python]如何理解uiautomator里面的 child, child_by_text, sibling，及使用场景

    如何理解uiautomator里面的 child, child_by_text, sibling,我们借助android原生的uiautomatorviewer抓取的控件来进行理解 以如下图进行详细讲 ...

  9. linux结束程序内存不会马上释放的解决方法

      Linux下频繁读写文件时,内存资源被耗尽,当程序结束后,内存不会释放需要清除缓存.Linux缓存有dentry,buffer cache,page cache. 注:Dentry用来加速文件路径 ...

  10. Asp.Net WebApi服务的创建

    Web API一种REST架构风格的Web服务.所谓的REST架构与技术无关,而是面向资源的一种软件架构设计. WCF自3.5之后也提供了对REST风格的支持,但和WebAPI来比较显得较为笨重,We ...