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


<!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. mysql InnoDB: Assertion failure in thread xxxx in file ut0mem.cc line 105

    mysql InnoDB: Assertion failure in thread xxxx in file ut0mem.cc line 105 错误信息 InnoDB: Assertion fai ...

  2. [转]WPF更换主题

    如果要做到一个应用程序其基本的内容不变,但改变整个应用程序的外观可以这样做: 对于每一套外观定义一个ResourceDictionary 在应用程序中,动态加载此应用程序(或窗体)的Resource ...

  3. JZOJ2368 【SDOI2011】黑白棋

    题目 题目大意 在一个1*n的棋盘上,有黑棋和白棋交错分布,每次,一个人可以移动自己的ddd颗旗子. 问先手必胜的方案数. 思考历程 在一开始,我就有点要放弃的念头. 因为这题是一道博弈问题. 我是非 ...

  4. Python-可变类型与不可变类型

    可变类型 可以变化的,列表和字典 利用id()函数 查看内存地址 内存地址变化即不可变类型. 内存地址不变化即可变类型 不可变类型 不可以变化的,字符串和数字 字符串内置方法 索引取值 索引切片 成员 ...

  5. python 日记 day1

    1.python2 与 python3 的区别:   a. python2 源码不标准,混乱,重复代码太多.默认方式是ascii码,解决方式:#-*- encoding:utf-8 -*-   b. ...

  6. 技术 | TypeScript

    技术 | TypeScript   第一次接触TypeScript还是和一帮兄弟在居民楼里撸每日优鲜App的时候,没有想过那么多,只想可以快速实现和快速落地,于是我们选择ionic这个Hybrid框架 ...

  7. linux和window双系统下修改系统启动项

    参考:http://jingyan.baidu.com/article/63acb44ae4062c61fcc17e27.html: 我们在安装双系统之后经常会遇到想打开windows但默认启动项是u ...

  8. Dom直接选择器

    Dom直接选择器 <!DOCTYPE html> <!--Dom间接选择器--> <html lang="en"> <head> & ...

  9. ES6学习笔记之块级作用域

    ES6学习笔记:块级作用域 作用域分类 全局作用域 局部作用域 块级作用域 全局作用域示例 var i=2; for (var i = 0; i < 10; i++) { } console.l ...

  10. Windows 禁用Windows updata服务

    方法一:禁用Windows updata服务 按WIN+R 打开运行,输入 services.msc 回车 然后找到 “Windows updata”服务,双击后设置为禁用 应用即可; 方法二:推迟自 ...