星级评论jq
html结构
<div class="list_item">
<span>商品包装满意度:</span>
<b class="stars1"></b>
</div>
<div class="list_item">
<span>发货速度满意度:</span>
<b class="stars2"></b>
</div>
<div class="list_item">
<span>快递速度满意度:</span>
<b class="stars3"></b>
</div>
js调用
var stars1=new Stars($('.stars1'));
var stars2=new Stars($('.stars2'));
var stars3=new Stars($('.stars3')); stars1.createS();
stars2.createS();
stars3.createS();
js详细
// 星级评论
function Stars(ele){
this.element=ele;
this.temp=ele.css('background-position');
}
Stars.prototype={
createS:function(){
var _this=this;
$(_this.element).mousemove(function(event) {
_this.fnMove();
}).click(function(event) {
_this.fnDown();
}).mouseleave(function(event) {
_this.fnLeave();
});
},
fnMove:function(e){
var e=e || window.event;
var disX=e.pageX-$(this.element).offset().left;
if (disX<18){
$(this.element).css('background-position', '-199px -390px');
}else if(disX<36){
$(this.element).css('background-position', '-182px -390px');
}else if(disX<54){
$(this.element).css('background-position', '-165px -390px');
}else if(disX<62){
$(this.element).css('background-position', '-148px -390px');
}else if(disX<84){
$(this.element).css('background-position', '-131px -390px');
}
},
fnDown:function(e){
var e=e || window.event;
var disX=e.pageX-$(this.element).offset().left;
if (disX<18){
$(this.element).css('background-position', '-199px -390px');
}else if(disX<36){
$(this.element).css('background-position', '-182px -390px');
}else if(disX<54){
$(this.element).css('background-position', '-165px -390px');
}else if(disX<62){
$(this.element).css('background-position', '-148px -390px');
}else if(disX<84){
$(this.element).css('background-position', '-131px -390px');
}
this.temp=$(this.element).css('background-position');
},
fnLeave:function(){
$(this.element).css('background-position', this.temp);
}
}
只是一个简单的星级评论效果
星级评论jq的更多相关文章
- jquery星级评论打分组件
<!DOCTYPE HTML><html> <head> <meta charset="utf-8"><title>jq ...
- Android View 之进度条+拖动条+星级评论条....
PS:将来的你会感谢现在奋斗的自己.... 学习内容: 1.进度条 2.拖动条 3.星级评论条 1.进度条... 进图条这东西想必大家是很熟悉的...为了使用户不会觉得应用程序死掉了,因此 ...
- SharePoint 2010 文档管理系列之星级评论功能
前言:正如我们前面介绍的是,文档管理就是让大家更加直观.方便的对手里的文档,进行统筹掌控,哪些文档是有价值的,哪些文档更受大家欢迎,所有就带来了这个星级评论. 当然,这个是SharePoint 201 ...
- js星级评分点击星级评论打分效果
html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- js星级评分点击星级评论打分效果--收藏--转载
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery星级评论表单美化代码
最近正在做php第二阶段的项目,由于我们小组做的是游戏评论网站,所以需要用到评分评论的页面,这里我做了个星级评论表单 1.首先,我们需要引入一个jQuery文件,代码如下: /*! * jQuery ...
- 纯js星级评分
@{ Layout = null;} <!DOCTYPE html> <html><head> <meta name="viewport" ...
- SharePoint 2010 文档管理系列
前言,这是自己第一次写一个系列的文档,本来想使用SharePoint 2013版本,但是碍于SharePoint 2013对于硬件要求过高,自己的笔记本无法承受,所以退而求其次选择了在SharePoi ...
- poi实现百万级数据导出
注意使用 SXSSFWorkbook 此类在构造表格和处理行高的时候效率极高,刚开始时我使用的 XSSFWorkbook 就出现构造表格效率极低,一万行基本需要3秒左右,那当导出百万级数据就慢的要死啦 ...
随机推荐
- perl dtrace2
http://search.cpan.org/~chrisa/Devel-DTrace-Provider-1.11/lib/Devel/DTrace/Provider.pm
- [017]string类使用注意事项
最近自己写着玩,写了一个这样的函数: void foo(const string& iStr) { ; i < iStr.length(); ++i) { string str = iS ...
- A XSS filter for Java EE web apps--转载
原文地址:http://java.dzone.com/articles/xss-filter-java-ee-web-apps Cross Site Scripting, or XSS, is a f ...
- php面试常用算法
这些都是真实的IT公司招聘PHP程序员的面试题,这些都是简单的基本算法.包括:冒泡算法.快速排序算法.二分查找算法.顺序算法. 冒泡排序,对象可以是一个数组 01 function bubble_so ...
- Callable、Future和FutureTask使用说明
普通的创建线程,一种是直接继承Thread,另外一种就是实现Runnable接口.但是这两种都无法在执行完任务之后获取执行结果,Callable.Future就提供了这样的便利. Future的方 ...
- mkfs.xfs命令没找到
yum install xfsprogs xfsdump
- linux系统下搭建自己的web服务器
之前在windows 2008 server上搭建了一个用于测试的web服务器,但是在打开网站的时候特别的慢,尤其是图片的加载都会失败,当时以为是路径的问题,但是在服务器上自己打开都特别慢,自己实在找 ...
- 关于Eclipse中的开源框架EMF(Eclipse Modeling Framework)
Eclipse项目本身可以划分为4个主要的子项目:Equinox,平台,Java开发工具(Java Development Tools,JDT)和插件开发环境(Plug-in Development ...
- msp430f149的低功耗模式
430的低功耗确实很强啊,虽然和VR单片机比起来速度慢了好多.在CPU进行工作时,如果没有什么事情干,就得进入低功耗模式啦,LMPX(0~4)这几种模式的具体事项就是如下的,得记住了. 一,运行模式M ...
- 世界上最方便的SharePoint移动客户端--Rshare
Rshare我试用了一段时间,同时也测试了其他家产品,使用后的感觉是Rshare无愧于世界上最方面的SharePoint移动客户端. 1.界面设计很方便,设计中充分考虑到移动客户的使用习惯及喜好,设计 ...