JS五星级评分效果(类似与淘宝打分效果)
今天晚上研究下 五星级评分效果,类似于淘宝后台评分效果,如下图所示:
思路: 当鼠标移到一颗星的时候 判断当前的索引 当前及当前的索引前面的星星亮起来 每当移到任何一颗星星时候 下面跟随提示 mouseout时候 提示消失,移出时 全部变灰。每当点击一颗星星时候 同样判断当前的索引 当前及当前之前的星星都亮起来,mouseout时候 点击时候的星星(亮) 同样保持亮的状态。
HTML代码如下:
<div class="star">
<span>js星级评论打分</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>
css代码如下:
<style>
*{margin:;padding:;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('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:;}
.star p em {color: #FF6600;display: block;font-style: normal;}
.star strong {color:#ff6600;padding-left:10px;}
.hidden{display:none;}
</style>
JS代码如下:
/**
* JS评分效果
*/
function Score(options) {
this.config = {
selector : '.star', // 评分容器
renderCallback : null, // 渲染页面后回调
callback : null // 点击评分回调
}; this.cache = {
aMsg : [
"很不满意|差得太离谱,与卖家描述的严重不符,非常不满",
"不满意|部分有破损,与卖家描述的不符,不满意",
"一般|质量一般,没有卖家描述的那么好",
"满意|质量不错,与卖家描述的基本一致,还是挺满意的",
"非常满意|质量非常好,与卖家描述的完全一致,非常满意"
],
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);
}); },
_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'}); var html = '<em>' +
'<b>'+index+'</b>分 '+_cache.aMsg[index].split('|')[0]+'' +
'</em>' + _cache.aMsg[index].split('|')[1];
$('p',parentCls).html(html);
}); // 鼠标移出
$(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; !$('p',parentCls).hasClass('hidden') && $('p',parentCls).addClass('hidden');
var html = '<strong>' +
index +
'分</strong>' +_cache.aMsg[index].split('|')[1]; $('.desc',parentCls).html(html);
_config.callback && $.isFunction(_config.callback) && _config.callback();
}); }); 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" : "";
}
}
}
}; $(function(){
new Score({});
});
JS五星级评分效果(类似与淘宝打分效果)的更多相关文章
- vue实现结算淘宝购物车效果
实现单选时的价格,全选时价格 单选效果图 全选效果图 html <template> <!-- 淘宝结算购物车 --> <div class="settleme ...
- ios 类似的效果淘宝商品详细页面
今天试着写ios 分类似影响淘宝的商品详细页面 我使用第三方库EGORefreshTableHeaderView有一个下拉效果刷新PWLoadMoreTableFooterView上拉电阻负载许多其他 ...
- javascript项目实战之原生js模拟淘宝购物车
通过JavaScript实现类似与淘宝的购物车效果,包括商品的单选.全选.删除.修改数量.价格计算.数目计算.预览等功能的实现.实现的效果图: 相应的代码: shoppingCart.html < ...
- js 实现淘宝放大镜功能,可更改配置参数 带完整版解析代码[magnifier.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写淘宝放大镜效果 基本功能: 运 ...
- 从网易与淘宝的font-size思考前端设计稿与工作流
本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值,欢迎阅读和点 ...
- 从网易与淘宝的font-size思考前端设计稿与工作流 (转)
从网易与淘宝的font-size思考前端设计稿与工作流 阅读目录 1. 问题的引出 2. 简单问题简单解决 3. 网易的做法 4. 淘宝的做法 5. 比较网易与淘宝的做法 6. 如何与设计协作 7 ...
- (淘宝无限适配)手机端rem布局详解(转载非原创)
从网易与淘宝的font-size思考前端设计稿与工作流 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问 ...
- 妈妈再也不用担心我的移动端了:网易和淘宝的rem方案剖析
从博主学习前端一路过来的经历了解到,前端移动开发是大部分从PC端转战移动端的小伙伴都非常头疼的一个问题,这边博主就根据一篇自己看过的移动开发文章来剖析一下网易和淘宝的rem解决方案,希望能够帮助到一些 ...
- Android之仿京东淘宝的自动无限轮播控件
在App的开发中,很多的时候都需要实现类似京东淘宝一样的自动无限轮播的广告栏,所以就自己写了一个,下面是我自定义控件的思路和过程. 一.自定义控件属性 新建自定义控件SliderLayout继承于Re ...
随机推荐
- Codeforces833A
A. The Meaningless Game time limit per test:1 second memory limit per test:256 megabytes input:stand ...
- Bash:字符串操作
参考:http://blog.csdn.net/finewings/article/details/5718133 字符串提取 去掉指定前缀 1. ${varible#pattern} ...
- python学习之老男孩python全栈第九期_day011知识点总结
# 装饰器的形成的过程:最简单的装饰器:有返回值的:有一个参数的:万能参数# 装饰器的作用# 原则:开放封闭原则# 语法糖# 装饰器的固定模式:# def wrapper(f): # 装饰器函数,f是 ...
- Angular4.x 自定义搜索组件
Angular4 随笔(三) ——自定义搜索组件 1.简介 本组件主要是实现了搜索功能,主要是通过父子组件传值实现. 基本逻辑: 1.创建一个搜索组件,如:ng g component searc ...
- MyEclipse中搭建Struts2开发环境
(尊重劳动成果,转载请注明出处:http://blog.csdn.net/qq_25827845/article/details/53205941 冷血之心的博客) 在MyEclipse中如何搭建St ...
- mongodb3.X权限配置
环境: CentOS6.8 mongodb3.4.1 1.连接mongodb数据库(如果mongo命令没有做环境变量配置,需要定位到有mongo命令的目录) [root@VM_118_34_cent ...
- 白盒测试实践-day....
时间:2017.12.22 地点:软件学院 参与人员:张双双.张玉.周静.赵天宇 会议内容:对代码测试的内容进行总结,总结任务由赵天宇完成,其余同学提出自己的看法和意见. 总结内容分为了五个阶段,不同 ...
- 从零起步做到Linux运维经理,你必须管好的23个细节
不想成为将军的士兵,不是好士兵-拿破仑 如何成为运维经理?成为运维经理需要什么样的能力?我想很多运维工程师都会有这样的思考和问题. 如何成为运维经理.一般来说,运维经理大概有两种出身,一种是从底层最基 ...
- JS里设定延时
使用SetInterval和设定延时函数setTimeout 很类似.setTimeout 运用在延迟一段时间,再进行某项操作. setTimeout("function",tim ...
- nmcli 命令使用
nmcli 是 NetworkManager 的控制客户端,通过 man 查看可知: NMCLI(1) General Commands Manual NMCLI(1) NAME nmcli - co ...