JQ_五星级评分特效
代码如下:
<!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_五星级评分特效的更多相关文章
- JS五星级评分效果(类似与淘宝打分效果)
今天晚上研究下 五星级评分效果,类似于淘宝后台评分效果,如下图所示: 思路: 当鼠标移到一颗星的时候 判断当前的索引 当前及当前的索引前面的星星亮起来 每当移到任何一颗星星时候 下面跟随提示 mous ...
- jQuery动态五星评分
效果 css .star ul, .star li { list-style: none; } .star { position: relative; width: 600px; height: 24 ...
- 仿腾讯QQ竖直滑动导航菜单
菜单就像qq软件的分组,鼠标经过自动显示相应组的内容. 效果体验网址:http://keleyi.com/a/bjad/nf86w2dv.htm 以下是源代码: <html> <he ...
- DNF NPK包名对照一览表
文章转载自:http://bbs.exrpg.com/thread-107917-1-1.html ┌ sprite.NPK ...
- 利用jquery实现电商网站常用特效之:五星评分
这篇文章主要为大家详细介绍了基于jquery实现五星好评,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 在电商网站,我们经常会用到五星评分的功能,现在用jQuery实现一个简单的demo: 1.引 ...
- JQ_下雪特效
这是一个jQuery下雪特效.特效的代码如下: <style>body{background:black;color:white}</style><script>/ ...
- jQuery用户数字评分效果
效果预览:http://hovertree.com/texiao/jquery/5.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...
- Nibbler – 免费的网站测试和指标评分工具
Nibbler 是一款免费的工具,用于测试网站的各个方面指标.输入任意网站的地址,Nibbler 会给你一份报告,列出网站的10个关键领域的分数,包括可访问性,用户体验,搜索引擎优化,社交媒体和技术等 ...
- jquery select选中表单特效三级联动
好久没发帖了,今天发一个jquery select的表单三级联动,希望能对有需要的朋友有点帮助. js代码,当然还要加上jquery的包,应该都有的,这里就不发了. <script type=& ...
随机推荐
- Distribution setup SQL Server Agent error: "RegCreateKeyEx() returned error 5, 'Access is denied.'" (转载)
In the Configure Distribution Wizard, the step "Configuring SQL Server Agent to start automatic ...
- MySQL客户端连接方式
MySQL连接方式MySQL除了最常见的TCP连接方式外,还提供SOCKET(LINUX默认连接方式).PIPE和SHARED MEMORY连接方式.各连接方式的服务器.客户端启动选项,及连接默认值见 ...
- Spring hibernate 事务的流程
1 在业务方法开始之前 ①获取session ②把session和当前线程绑定,这样就可以在Dao中使用SessionFactory的getCurrentSession()方法来获取session了 ...
- 【Alpha Go】Day 1 !
[Alpha Go]Day 1 ! Part 0 · 简要目录 Part 1 · 任务分配 Part 2 · 他日安排 Part 3 · 预期任务量 Part 4 · 团队贡献值计算原则 Part 1 ...
- kudu基础入门
1.kudu介绍 1.1 背景介绍 在KUDU之前,大数据主要以两种方式存储: (1)静态数据: 以 HDFS 引擎作为存储引擎,适用于高吞吐量的离线大数据分析场景.这类存储的局限性是数据无法进行随机 ...
- SSL/TLS Diffie-Hellman Modulus <= 1024 位 (LogJam) 使用2048位或更高的Diffie-Hellman
1.http://slproweb.com/products/Win32OpenSSL.html 下载 SSL 并安装 2.设置环境变量,例如工具安装在C:\OpenSSL-Win64,则将C:\O ...
- /bin/ls: Permission denied
[root@test_node1 ~]# crontab -lno crontab for root[root@test_node1 ~]# cd /home/[root@test_node1 hom ...
- J-Link调试查看变量值总是显示<not in scope> 和<cannot evaluate>问题
原文:https://blog.csdn.net/gmpy_tiger/article/details/50395719 MDK/Keil 中,J-Link调试查看变量值总是显示<not in ...
- 各种 mv power cell
1. retention register : VDDB 是 backup power,当primary power shutoff 时 backup 会继续供电,将 reg 当前状态保存下来 2. ...
- Mac OS 上配置java开发环境
在开始本学期的java课程前,我需要先为自己的电脑配置好Java的开发环境.由于电脑是mac操作系统,所以教材上的教程对我并不管用,于是乎开始动手自己查阅网上资料来解决. 1.安装JDK 1.访问Or ...