jQuery动态五星评分
效果
css
.star ul,
.star 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('../img/star.png') no-repeat;
cursor: pointer;
}
.star li.on {
background-position: 0 -28px;
}
.star p {
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;
}
html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>jQuery实现五星级评分</title>
<link rel="stylesheet" href="./css/score.css">
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="./js/score.js"></script>
</head>
<body>
<div class="star" id="goods">
<span>商品</span>
<input type="hidden" class="value-container" name="goods" value="">
<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>
<div class="star" id="logistics">
<span>物流</span>
<input type="hidden" class="value-container" name="logistics" value="">
<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 goods_score = new Score({selector:'#goods.star'});
var logistics_score = new Score({selector:'#logistics.star'});
});
</script>
</body>
</html>
js
function Score(options) { // 定义一个类
this.config = {
selector: '.star', // 评分容器
renderCallback: null, // 渲染页面后回调
callback: null // 点击评分回调
};
this.cache = {
iStar: 0,
iScore: 0
};
this.init(options); // 构造函数
}
Score.prototype = {
constructor: Score,
init: function(options) {
this.config = $.extend(this.config, options || {});
var self = this,
_config = self.config,
_cache = self.cache;
self._renderHTML();
},
_renderHTML: function() {
var self = this,
_config = self.config;
var html = '<span class="desc"></span>' +
'<p class="star-p hidden"></p>';
$(_config.selector).each(function(index, item) {
$(item).append(html);
$(item).wrap($('<div class="parentCls" style="position:relative"></div>'));
var parentCls = $(item).closest('.parentCls');
self._bindEnv(parentCls); // 方法层层相扣
_config.renderCallback && $.isFunction(_config.renderCallback) && _config.renderCallback();
});
},
_bindEnv: function(parentCls) {
var self = this,
_config = self.config,
_cache = self.cache;
$(_config.selector + ' li', parentCls).each(function(index, item) {
// 鼠标移上
$(item).mouseover(function(e) {
var offsetLeft = $('ul', parentCls)[0].offsetLeft;
ismax(index + 1);
$('p', parentCls).hasClass('hidden') && $('p', parentCls).removeClass('hidden');
$('p', parentCls).css({
'left': index * $(this).width() + 12 + 'px'
});
});
// 鼠标移出
$(item).mouseout(function() {
ismax();
!$('p', parentCls).hasClass('hidden') && $('p', parentCls).addClass('hidden');
});
// 鼠标点击
$(item).click(function(e) {
var index = $(_config.selector + ' li', parentCls).index($(this));
_cache.iStar = index + 1;
var score = index + 1;
!$('p', parentCls).hasClass('hidden') && $('p', parentCls).addClass('hidden');
var html = '<strong>' +
score +
'分</strong>';
$('.desc', parentCls).html(html);
// 加入分数
$(this).parents(_config.selector).find('.value-container').val(score);
// $(_config.selector).find('.value-container').val(score);
_config.callback && $.isFunction(_config.callback) && _config.callback({
starAmount: _cache.iStar
}); // 回调函数
});
});
function ismax(iArg) {
_cache.iScore = iArg || _cache.iStar;
var lis = $(_config.selector + ' li', parentCls);
for (var i = 0; i < lis.length; i++) {
lis[i].className = i < _cache.iScore ? "on" : "";
}
}
}
};
这里有两种方式
1.针对所有的.star的
2.针对具体的.star的
$(function() {
//var score = new Score(); // 不传参数，默认是.star
var goods_score = new Score({selector:'#goods.star'}); // 传参数，只针对id为goods的.star
var logistics_score = new Score({selector:'#logistics.star'});
});
jQuery动态五星评分的更多相关文章
- jQuery动态星级评分效果实现方法
本文实例讲述了jQuery动态星级评分效果实现方法.分享给大家供大家参考.具体如下: 这里的jQuery星级评分代码,是大家都很喜欢的功能,目前广泛应用,本星级评分加入了动画效果,注意,如果要真正实现 ...
- 利用jquery实现电商网站常用特效之：五星评分
这篇文章主要为大家详细介绍了基于jquery实现五星好评,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 在电商网站,我们经常会用到五星评分的功能,现在用jQuery实现一个简单的demo: 1.引 ...
- 五星评分效果 原生js
五星评分在很多地方都可以用到,网上也有插件或者相应的代码,在这里我给大家提供一款我自己写的超级简单实用的五星评分代码,连图片都不需要 <!-- 评分start --> <ul> ...
- IE7中使用Jquery动态操作name问题
问题:IE7中无法使用Jquery动态操作页面元素的name属性. 在项目中有出现问题,某些客户的机器偶尔会有,后台取不到前台的数据值. 然开发和测试环境总是不能重现问题.坑爹之处就在于此,不能重现就 ...
- jquery动态改变div宽度和高度
效果体验:http://keleyi.com/keleyi/phtml/jquery/23.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD X ...
- jQuery动态增删改查表格信息，可左键/右键提示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 给Jquery动态添加的元素添加事件
给Jquery动态添加的元素添加事件 来源:[http://wangqixia.diandian.com/post/2011-05-10/6597866] 我想很多人都会向我一样曾经 被新元素的事件绑 ...
- Jquery动态在td中添加checkbox
如图:想要在这个id为headId的<td>中,用jquery动态添加checkbox 代码如下 : data是我用ajax 从后台获取的数据,里面含有若干个user类,我想把所有的人名字 ...
- jQuery动态提示消息框效果
效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/2.htm 原文:http://keleyi.com/a/bjac/hxv86dyi.htm <!DOC ...
随机推荐
- CSS中Position属性
也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...
- 域名解析-delphi 源码
unit Unit1; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, Syste ...
- IMPDP hangs, session wait “wait for unread message on broadcast channel”
昨晚有个朋友说加班在IMPDP数据, 在导入中途突然没有了进展,挂在那里不动了,impdp 窗口也没有报错, 一直等了1个多小时,说是impdp使用了parallel,怀疑是parallel参数出了问 ...
- Angularjs总结（四）$on、$emit和$broadcast的使用
开发中有时候会需要控制器之间的传值操作:下面几个操作可以达到所需, 注:无平级之间的操作 $emit只能向父 controller传递event与data$broadcast只能向子 controll ...
- C++Primer学习笔记(二、基础)
1.两种初始化方式,直接初始化语法更灵活,且效率更高. ); // 直接初始化 direct-initialization ; // 赋值初始化 copy-initialization 2.const ...
- iOS SDwebImage 使用说明
SDWebImage托管在github上.https://github.com/rs/SDWebImage 这个类库提供一个UIImageView类别以支持加载来自网络的远程图片.具有缓存管理.异步下 ...
- Sql Server内置函数实现MD5加密
实例 MD5加密“123456”: HashBytes('MD5','123456') 结果:0xE10ADC3949BA59ABBE56E057F20F883E (提示:看完最后,结果要进行转换.) ...
- nl命令很好，很强大
指令名称: nl - 显示文件的行数及内容 语法: nl [OPTION]... [FILE]... 说明: 将指定文件的内容附加上行数,显示到标准输出. 当没有指定文件名或使用 ...
- jquery live()只支持css选择器
昨天在处理过keypress键盘事件后,今天要把用户在页面上动态添加的字段条目加上删除功能,就是在每个字段后面加上一个漂亮的小按钮,当用户点击这个按钮,相应的条目就被从数据库中删除. 为了实现这种功能 ...
- JavaScript学习心得（三）
一 变量 var:变量声明 变量名 =:赋值 简单值类型 全局变量:编程的一般规则——应用程序应该只完成必须的最少功能,如果一个变量不是绝对必需,就不该是全局:全局变量对维护性能不利,因为需要一直维护 ...