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


<!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. JavaSE_06_Collection、泛型

    1.Collection集合 1.1 集合概述 数组的长度是固定的.集合的长度是可变的. 数组中存储的是同一类型的元素,可以存储基本数据类型值.集合存储的都是对象.而且对象的类型可以不一致.在开发中一 ...

  2. Nodejs Express目录结构

    原文  http://www.leixuesong.cn/1508 Express是一个基于Node.js平台的极简.灵活的web应用开发框架.在前面我们已经详细介绍了Express的安装,下面详细讲 ...

  3. 我是如何在实际项目中解决MySQL性能问题

    可能是本性不愿随众的原因,我对于程序员面试中动辄就是考察并发上千万级别的QPS向来嗤之以鼻,好像国内的应用都是那么多用户量一样,其实并发达到千万,百万以上的应用能有几个? 绝大多数的程序员面临的只是解 ...

  4. 转：PLL 锁相环

    原地址:http://fangjian0518.blog.163.com/blog/static/559196562011210103455430/  PLL的作用? 答:LPC2000系列ARM内部 ...

  5. Http请求中的Content-Type

    转载至:https://segmentfault.com/a/1190000013056786?utm_source=tag-newest 一 前言 ----现在搞前端的不学好http有关的知识已经不 ...

  6. spring整合http

    本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接出处:https://blog.csdn.net/qq_3076499,否则保留追究法律责任的权利. 如果 ...

  7. LeetCode412Fizz Buzz

    写一个程序,输出从 1 到 n 数字的字符串表示. 1. 如果 n 是3的倍数,输出"Fizz": 2. 如果 n 是5的倍数,输出"Buzz": 3.如果 n ...

  8. Leetcode459.Repeated Substring Pattern重复的子字符串

    给定一个非空的字符串,判断它是否可以由它的一个子串重复多次构成.给定的字符串只含有小写英文字母,并且长度不超过10000. 示例 1: 输入: "abab" 输出: True 解释 ...

  9. 系统io统计

      $ cat /proc/diskstats sda sda1 sda2 gg- gg- gg- 主号 次号 名称 成功读 合并读 扇区读 读时间   每一列的含义分别为: 第一列为 设备号 (nu ...

  10. 洛谷 3959 宝藏——枚举+状压dp

    题目:https://www.luogu.org/problemnew/show/P3959 原来写了个不枚举起点的状压dp. #include<iostream> #include< ...