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=& ...
随机推荐
- If TransactionScope will close database connections
问 Do TransactionScope work with closed database connections? using (var transaction = new Transactio ...
- 参数innodb_force_recovery影响了整个InnoDB存储引擎的恢复状况
参数innodb_force_recovery影响了整个InnoDB存储引擎的恢复状况.该值默认为0,表示当需要恢复时执行所有的恢复操作.当不能进行有效恢复时,如数据页发生了corruption,My ...
- Finding the source of signals on Linux with strace, auditd, or systemtap
inux and UNIX® like operating systems commonly use signals to communicate between processes. The use ...
- 《SQL Server 2008从入门到精通》--20180716
1.锁 当多个用户同时对同一个数据进行修改时会产生并发问题,使用事务就可以解决这个问题.但是为了防止其他用户修改另一个还没完成的事务中的数据,就需要在事务中用到锁. SQL Server 2008提供 ...
- Cisco HSRP 配置方法(热备份路由协议)配置实例
转裁于51CTO.http://www.mamicode.com/info-detail-862350.html HSRP----热备份路由协议 思科私有协议,与VRRP 虚拟路由协议 相近,(国际标 ...
- Android开发中使用七牛云存储进行图片上传下载
Android开发中的图片存储本来就是比较耗时耗地的事情,而使用第三方的七牛云,便可以很好的解决这些后顾之忧,最近我也是在学习七牛的SDK,将使用过程在这记录下来,方便以后使用. 先说一下七牛云的存储 ...
- [LOJ 6029]「雅礼集训 2017 Day1」市场
[LOJ 6029] 「雅礼集训 2017 Day1」市场 题意 给定一个长度为 \(n\) 的数列(从 \(0\) 开始标号), 要求执行 \(q\) 次操作, 每次操作为如下四种操作之一: 1 l ...
- apache 虚拟主机及phpmyadmin 配置
NameVirtualHost *:80 <VirtualHost *:80> ServerName www.ly.comDocumentRoot E:/mywww </Virtua ...
- 配置好jdk后，cmd编写java -version还是报找不到jdk
找了好长时间没查出问题在哪,配置的都没有问题,最后搜了搜网上发现,jdk的这两行得在最上面才行.
- PHP foreach 循环使用"&$val" 地址符“&”
在熟悉项目代码的时候 看到这样的foreach 循环: foreach($data as &$val){ .... } 第一次看到循环里面使用了地址符“&”,我印象中的这个符号 是直接 ...