<!--默认五星，根据鼠标点击判断-->


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{height:40px;padding:10px;}
        .box ul, .box span{float:left;}
        .bg_star{backgroud:url"//这里放没有背景星星的图片地址"}
        .bg_red{backgroud:url"//这里放有背景星星的图片地址"}
    </style>
</head>
<body>
<div class="box">
    <span >评分</span>
    <ul>
        <li class="bg_star bg_red"></li>
        <li class="bg_star bg_red"></li>
        <li class="bg_star bg_red"></li>
        <li class="bg_star bg_red"></li>
        <li class="bg_star bg_red"></li>
    </ul>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
    var index = $(this).index();
    $(this).addClass('bg_red');
    if(index>0){
        $(this).parent().find('li:lt('+index+')').addClass('bg_red');
        $(this).parent().find('li:gt('+index+')').removeClass('bg_red');
    }else{
        $(this).parent().find('li:gt('+index+')').removeClass('bg_red');
    }
</script>
</html>

类似淘宝五星点评 ，Jquery实现代码的更多相关文章

  1. jquery 实现点评标签 类似淘宝大众点评的 快速准时 货品完好等

    111 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...

  2. 如何:使用PicturBox实现类似淘宝网站图片的局部放大功能

    转载至http://xuzhihong1987.blog.163.com/blog/static/267315872011822113131823/ 概要: 本文将讲述如何使用PictureBox控件 ...

  3. 写一个类似淘宝的ios app需要用到哪些技术？

    写一个类似淘宝的ios app需要用到哪些技术? 让我想起了有人私信我,说不缺钱,做个类似知乎的东西,包括加运营,需要多少钱. 扯淡结束,正好最近看了一点这方面的东西,也许对题主来说有点帮助. 手机淘 ...

  4. openresty + lua-resty-weedfs + weedfs + graphicsmagick动态生成缩略图（类似淘宝方案）

    openresty + lua-resty-weedfs + weedfs + graphicsmagick动态生成缩略图(类似淘宝方案) --大部分的网站都要涉及到图片缩略图的处理,比如新闻配图,电 ...

  5. 仿淘宝颜色属性选择展示代码（jQuery）

    模仿淘宝商品选择颜色和尺寸的效果,即选择商品颜色和尺寸的时候,把选择的颜色和尺寸放到一个页面容器里面,不足之处,还望指教. <!DOCTYPE HTML> <html lang=&q ...

  6. Zencart先生成订单后付款，类似淘宝后台修改订单价格

    Zencart 使用 Paypal 付款,会出现漏单的情况,即 paypal 已经收到客户的付款,但是网站后台没有客户的订单.导致 paypal 漏单的原因大致会是当客户跳转到Paypal 网站付款完 ...

  7. php提取淘宝URL中ID的代码

    一段可以提取淘宝URL中ID的PHP代码. 例如: <?php $taobao = 'taobao.com'; $tmall = 'tmall.com'; $guojitmall = 'tmal ...

  8. 淘宝网购物车jquery源码和网易新用户注册页面表单验证的练习

    淘宝网购物车源码: <html lang="en"> <head> <meta charset="UTF-8"> <t ...

  9. jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)

    这个插件的名字elevatezoom,网址为http://www.elevateweb.co.uk/image-zoom,在github上的项目首页为https://github.com/elevat ...

随机推荐

  1. Linux 修改环境变量，重定向

    1.Linux下更改(当前用户)环境变量:在terminal下输入vim ~/.profile进入后,在最后一行添加PATH="-----------------:$PATH",添 ...

  2. Mysql8+mybatisGenerator (mysql 8的逆向工程)

    最近试了一下mysql8的逆向工程工具 1.xml <?xml version="1.0" encoding="UTF-8" ?> <!DOC ...

  3. 我的js运动库新

    1.一些样式的获取和设置 //通过id获取当前元素 //params:id function $id(id) { return document.getElementById(id); } //向cs ...

  4. JasperReports报表表达式12

    报表表达式是JasperReports使我们能够显示在报表上的数据计算的强大功能.计算出数据不是一个静态数据,并且不受特别的报表参数或数据源字段传递的数据.报表表达式是由组合报表参数,字段和静态数据. ...

  5. c++使用优先队列时自定义优先出队顺序（和sort）

    优先队列也是一种先进先出的数据结构,元素从队尾入队,从队头出队,但是优先队列相较一般队列多了一个判断优先级的功能,在当前队列中,优先级最高的元素将被第一个删除. 先看一下优先队列的定义 templat ...

  6. Leetcode165. Compare Version Numbers比较版本号

    比较两个版本号 version1 和 version2. 如果 version1 > version2 返回 1,如果 version1 < version2 返回 -1, 除此之外返回  ...

  7. C++ 静态绑定与动态绑定------绝不重新定义继承而来的缺省参数

    在了解静态绑定和动态绑定之前,先了解什么是对象的静态类型,什么是对象的动态类型. 对象的静态类型:对象在声明时采用的类型.是在编译器决定的. 对象的动态类型:目前所指对象的类型.是在运行期决定的. 动 ...

  8. 其他pyton笔记

    #小部分老男孩pyton课程 #所有脚本第一句话都要写解释以下脚本是用什么解释器 #!/usr/bin/env python #语言设置为:简体中文 #_*_coding:utf-8_*_ ##### ...

  9. bzoj 1034 [ZJOI2008]泡泡堂BNB——贪心

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1034 原来觉得和 bzoj4977跳伞求生 有点像(虽然还没做). 所以对于a[ ]从小到大 ...

  10. TZ_14_Feign的客户端和Feign的负载均衡

    1.作用:Feign可以把Rest的请求进行隐藏,伪装成类似SpringMVC的Controller一样.你不用再自己拼接url,拼接参数等等操作,一切都交给Feign去做. 2.导入起步坐标 < ...