代码如下：
<!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. WMS - resource info

    Description This sample shows how to work with an OGC Web Map Service (WMS). When WMSLayers are adde ...

  2. ES6标准入门之字符串的拓展讲解

    在开始讲解ES6中字符串拓展之前,我们先来看一下ES5中字符串的一些方法. 获取字符串长度 str.length 分割字符串 str.split() 拼接字符串 str1+str2 或 str1.co ...

  3. datagridview 获取选中行的索引

    C# CODE for (int i = 0; i < this.dataGridView1.SelectedRows.Count; i++)//遍历所有选中的行 { this.dataGrid ...

  4. Kafka学习之路 （五）Kafka在zookeeper中的存储

    一.Kafka在zookeeper中存储结构图 二.分析 2.1 topic注册信息 /brokers/topics/[topic] : 存储某个topic的partitions所有分配信息 [zk: ...

  5. Android学习笔记--通过wifi向服务器端发送数据

    (转自http://www.cnblogs.com/zhxiang/archive/2011/07/21/2112825.html) 客户端程序: 1 2 3 4 5 6 7 8 9 10 11 12 ...

  6. Inter exchange Client Address Protocol (ICAP)- 互换客户端地址协议

    https://github.com/ethereum/wiki/wiki/Inter-exchange-Client-Address-Protocol-(ICAP) Transferring fun ...

  7. 【转】 python中 * 的用法

    转自:https://www.cnblogs.com/jony7/p/8035376.html 1.表示乘号 2.表示倍数,例如: def T(msg,time=1):    print((msg+' ...

  8. DNS主从复制及子域（三）

    主从DNS 主辅DNS服务器数据同步的过程,首先master DNS服务器每 次修改完成并重启服务后,将传送notify给所有的Slave DNS服务器. Slave DNS服务器将查询Master服 ...

  9. ssh推送.py程序到服务器端运行

    C:\Users\jiangshan>ssh jiangshan@192.168.1.191jiangshan@192.168.1.191's password:Last login: Sun ...

  10. 安装ubuntu系统 ——分区

    安装ubuntu 系统主要分四个区 目录 建议大小 格式 描述 / 10G-20G ext4 根目录 swap <2048M swap 交换空间 /boot 400M左右 ext4 Linux的 ...