代码如下：
<!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. Linux运维之系统性能---vmstat工具分析内存的瓶颈

    为了提高磁盘存取效率, Linux做了一些精心的设计, 除了对dentry进行缓存(用于VFS,加速文件路径名到inode的转换), 还采取了两种主要Cache方式:Buffer Cache和Page ...

  2. October 10th 2017 Week 41st Tuesday

    If you focus on what you left behind you will never see what lies ahead. 如果你只顾回头看,那么你永远也看不见前方有什么. Ye ...

  3. eclispe快捷键

    ① Ctrl+Left/Right 向左或向右跳跃一个单词,这是解决横向光标定位速度问题最主要的快捷键!(特别对于喜欢写超过80个字符一行代码的人来说)需要配合使用同样用于同行光标定位的Home/En ...

  4. [python]如何理解uiautomator里面的 instance 及使用场景

    通过uiautomatorviewer打开之后,需要通过对某个控件进行操作,但在当前界面中该控件所有属性无法唯一(其它控件属性也是一样),这个时候就需要借助实例(instance)来进行区分,inst ...

  5. 《Linux大棚命令百篇下》网络篇的总结

    本文是<Linux大棚命令百篇下>网络篇的总结 ping -c 指定数量,在windows下会自动停止,linux下会一直ping下去 -q 简短报告 -s 指定每次ping的数据包大小, ...

  6. C/C++常用库及工具

    值得学习的C语言开源项目 - 1. Webbench Webbench是一个在Linux下使用的非常简单的网站压测工具.它使用fork()模拟多个客户端同时访问我们设定的URL,测试网站在压力下工作的 ...

  7. mysql 压缩备份 压缩还原 命令

    .mysqldump 备份并压缩sql文件 mysql>mysqldump -h主机ip -u用户名 -p密码(也可不输入) 数据库名 | gzip > 压缩后文件位置 .mysql直接用 ...

  8. 在Node.js中操作文件系统(一)

    在Node.js中操作文件系统 在Node.js中,使用fs模块来实现所有有关文件及目录的创建,写入及删除操作.在fs模块中,所有对文件及目录的操作都可以使用同步与异步这两种方法.比如在执行读文件操作 ...

  9. Python2.7-gzip

    gzip模块,提供了简单的压缩和解压缩文件的接口,和 GNU 程序的 gzip 和 gunzip 类似,数据压缩是通过 zlib 模块实现的 1.模块的类: gzip.GzipFile([filena ...

  10. win10家庭版安装DockerToolbox-18.03.0-ce

    下载DockerToolbox-18.03.0-ce.exe https://mirrors.aliyun.com/docker-toolbox/windows/docker-toolbox/ 点击安 ...