最近做项目要做个商品评价的功能,我直接就跑到淘宝那里去研究了,可看着晕晕的,还不知道他是怎么做的,于是把图抠了下来,自己写了一个,接下来就展示一下我是怎么做的,大家有不同的实现方法可要记得分享一下呀。

  经过研究,我发现在脚本事件上来说,就分三个事件,鼠标移入事件,鼠标离开事件和点击事件。移入就让鼠标移入的星星和之前的星星都变色,点击在移入的基础上保存了当前点击的星星位置,离开则恢复到上次点击的那个星星。从样式上来说,这些星星可以共用一个图片,切换星星时让图片的一部分展示出来就可以了。

  这里展示Demo就只搞三个星星了,星星右边的文字提示也不弄了。这里用无链接的链接标签来放星星,使用链接有个好处就是如果以后要在点击星星时触发服务器的操作,比如点击星星直接完成评价操作,就可以直接用了,再用一个隐藏input来存放最近一次点击的星星的值:

<div id="rating-star">
<a href="#">0</a>
<a href="#">1</a>
<a href="#">2</a>
</div>

  接着给rating-star和链接一个样式,切换图片的关键只需要修改background-position就可以了:

#rating-star {
margin: 50px;
} #rating-star a {
background: url(commentstar.png) no-repeat 0 -90px;
display: inline-block;
height: 23px;
text-indent: -999em;
width: 23px;
}

  最后就是关键的脚本了:

        $('#rating-star').on('click', 'a', function () {
$('#rating-star').data('star', this.innerHTML);
}).on('mouseenter', 'a', function () {
setStar(this);
}).on('mouseleave', 'a', function () {
var $r_star = $('#rating-star');
var level = $r_star.data('star');
var $stars = $r_star.find('a');
if (level) {
setStar($stars[level]);
} else {
$stars.css('background-position', '0 -90px');
}
}); function setStar(star) {
var $this = $(star);
var level = $this.html();
var n;
if (level == '') {
n = '0 -30px';
} else if (level == '') {
n = '0 0';
} else {
n = '0 -60px';
}
$this.prevAll().andSelf().css('background-position', n);
$this.nextAll().css('background-position', '0 -90px');
     }

  这里有必要解释一下我的思路,可以看到点击事件只是给隐藏控件赋值,没做其他事,本来点击事件是要变换图片的,这事我发现鼠标移入事件已经做了,所以我就不再重复了,然后你会发现鼠标移入和离开最终都调用了setStar函数,那个方法其实就是把传入的星星以及他之前的星星改成相应的图片,把传入的星星之后的星星改成无颜色的星星,其实setStar也可以原html对象的数字下标,这样也可以用jquery的slice来实现。有些同志可能不知道'0 -30px'这些的是干什么的,其实'0 0'就是在原本默认的图片展示,-30px意思就是在y轴上把图片向上移动30个像素,这样在链接大小限定为长宽都为23px的情况下,我们看到的就是好评图片了,'0 0'对应的就是中评图片,'0 -60px'对应的就是差评图片,'0 -90px'对应的就是还没评价的图片。把原本的四个图片合成一张图片有什么好处呢,可以减少请求数,写代码也比较方便吧,估计脚本性能也会好点。

  亲自试一试

jQuery模仿淘宝商品评价的更多相关文章

  1. JQuery模仿淘宝天猫魔盒抢购页面倒计时效果

    1.效果及功能说明 通过对时间的控制来告诉用户一个活动还剩多少时间,精确到秒.2.实现原理 首先定义活动的截至的时间,要重年份精确到毫秒,在获得当前的年份到秒钟,在用截至时间,减去现在的时间,剩下的还 ...

  2. jquery模仿淘宝星星打分

    今天做论坛页面有星星评分功能,以下是代码.用的时候引入jquery <span> <ul class="hs_df_xx"> <li><i ...

  3. 用PHP抓取淘宝商品的用户晒单评论+图片实例

    为什么想起来做这个功能?是因为前段时间在做一个淘客网站的时候,想到是否能抓取到淘宝商品的买家秀呢?经过一番折腾发现,淘宝商品用户评价信息是通过Ajax来调取的,通过嗅探网址发现,评论数据的请求接口是: ...

  4. android ------ RecyclerView 模仿淘宝购物车

    电商项目中常常有购物车这个功能,做个很多项目了,都有不同的界面,选了一个来讲一下. RecyclerView 模仿淘宝购物车功能(删除选择商品,商品计算,选择, 全选反选,商品数量加减等) 看看效果图 ...

  5. 爬取淘宝商品信息,放到html页面展示

    爬取淘宝商品信息 import pymysql import requests import re def getHTMLText(url): kv = {'cookie':'thw=cn; hng= ...

  6. YY一下淘宝商品模型

    淘宝的电商产品种类非常丰富,必然得力于其商品模型的高度通用性和扩展性. 下面我将亲自操作淘宝商品的发布过程,结合网上其他博客对淘宝网商品库的分析,简单谈谈我的理解. 注:下面不特殊说明,各个表除主键外 ...

  7. jquery仿淘宝规格颜色选择效果

    jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...

  8. 一款基于jQuery仿淘宝红色分类导航

    今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览    ...

  9. 利用Python爬虫爬取淘宝商品做数据挖掘分析实战篇,超详细教程

    项目内容 本案例选择>> 商品类目:沙发: 数量:共100页  4400个商品: 筛选条件:天猫.销量从高到低.价格500元以上. 项目目的 1. 对商品标题进行文本分析 词云可视化 2. ...

随机推荐

  1. git常用的命令集合

    Git 是一个很强大的分布式版本控制系统.它不但适用于管理大型开源软件的源代码,管理私人的文档和源代码也有很多优势. Git常用操作命令: 1) 远程仓库相关命令 检出仓库:$ git clone g ...

  2. webstorm基础使用总结

    webstorm基础使用总结(不仅仅是一堆快捷方式) 注:原文链接: 水车 :  本次写的内容是我想到那个就写那个,都是本人平时写代码的时候的一些习惯,未必是最好的,贵在交流! 1:  shift+e ...

  3. 阿里云CentOS7系列一 -- 安装JDK7的方法.

    最近因为数据采集以及生产环境冲突.导入windows Server 2008系统经常死机.经讨论决定把采集服务程序和生产服务进行分开.采集程序通过windows Server2008运行.而生产程序通 ...

  4. 使用 jsoup 对 HTML 文档进行解析和操作

    jsoup 简介 Java 程序在解析 HTML 文档时,相信大家都接触过 htmlparser 这个开源项目,我曾经在 IBM DW 上发表过两篇关于 htmlparser 的文章,分别是:从 HT ...

  5. 实现移动设备远程登录linux服务器

    明天下午要考试了.所以最近时间有点紧,都在忙着看矩阵课本,刷刷题. 回到我们博客题目内容,最近正在看linux,之前是通过在笔记本上装着虚拟机的方法来进行操作. 之后发现一些能够进一步改进的地方,首先 ...

  6. [Tool]Inno Setup创建软件安装程序。

    这篇博客将介绍如何使用Inno Setup创建一个软件安装程序. Inno Setup官网:http://www.jrsoftware.org/isinfo.php. 可以下载到最新的Inno Set ...

  7. 用python DIY一个图片转pdf工具并打包成exe

    最近因为想要看漫画,无奈下载的漫画是jpg的格式,网上的转换器还没一个好用的,于是乎就打算用python自己DIY一下: 这里主要用了reportlab.开始打算随便写几行,结果为若干坑纠结了挺久,于 ...

  8. Dapper完美兼容Oracle,执行存储过程,并返回结果集。

    Dapper完美兼容Oracle,执行存储过程,并返回结果集. 这个问题,困扰了我整整两天. 刚刚用到Dapper的时候,感觉非常牛掰.特别是配合.net 4.0新特性dynamic,让我生成泛型集合 ...

  9. ADT + JNI实例

    Author: Maddock Date: 2015-07-09 本文简单记录了Android中利用jni开发程序初级教程: 步骤 1 下载安装ADT 2 配置NDK 3 新建安卓工程 4 测试jni ...

  10. 【Hibernate框架】对象的三种持久化状态

    一.综述 hibernate中的对象有三种状态,分别是TransientObjects(瞬时对象).PersistentObjects(持久化对象)和DetachedObjects(托管对象也叫做离线 ...