类似淘宝五星点评 ,Jquery实现代码
<!--默认五星,根据鼠标点击判断-->
<!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实现代码的更多相关文章
- jquery 实现点评标签 类似淘宝大众点评的 快速准时 货品完好等
111 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...
- 如何:使用PicturBox实现类似淘宝网站图片的局部放大功能
转载至http://xuzhihong1987.blog.163.com/blog/static/267315872011822113131823/ 概要: 本文将讲述如何使用PictureBox控件 ...
- 写一个类似淘宝的ios app需要用到哪些技术?
写一个类似淘宝的ios app需要用到哪些技术? 让我想起了有人私信我,说不缺钱,做个类似知乎的东西,包括加运营,需要多少钱. 扯淡结束,正好最近看了一点这方面的东西,也许对题主来说有点帮助. 手机淘 ...
- openresty + lua-resty-weedfs + weedfs + graphicsmagick动态生成缩略图(类似淘宝方案)
openresty + lua-resty-weedfs + weedfs + graphicsmagick动态生成缩略图(类似淘宝方案) --大部分的网站都要涉及到图片缩略图的处理,比如新闻配图,电 ...
- 仿淘宝颜色属性选择展示代码(jQuery)
模仿淘宝商品选择颜色和尺寸的效果,即选择商品颜色和尺寸的时候,把选择的颜色和尺寸放到一个页面容器里面,不足之处,还望指教. <!DOCTYPE HTML> <html lang=&q ...
- Zencart先生成订单后付款,类似淘宝后台修改订单价格
Zencart 使用 Paypal 付款,会出现漏单的情况,即 paypal 已经收到客户的付款,但是网站后台没有客户的订单.导致 paypal 漏单的原因大致会是当客户跳转到Paypal 网站付款完 ...
- php提取淘宝URL中ID的代码
一段可以提取淘宝URL中ID的PHP代码. 例如: <?php $taobao = 'taobao.com'; $tmall = 'tmall.com'; $guojitmall = 'tmal ...
- 淘宝网购物车jquery源码和网易新用户注册页面表单验证的练习
淘宝网购物车源码: <html lang="en"> <head> <meta charset="UTF-8"> <t ...
- jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
这个插件的名字elevatezoom,网址为http://www.elevateweb.co.uk/image-zoom,在github上的项目首页为https://github.com/elevat ...
随机推荐
- webpack:Cannot find module 'extract-text-webpack-plugin'
问题: 在终端中使用此命令安装了extract-text-webpack-plugin,npm install -g extract-text-webpack-plugin并在webpack.conf ...
- java后台使用HttpURLConnection实现百度主动推送
优点是快 不需要页面执行,,发布文章之后立即推送,所以,不管有没有人访问,都可以自动实时推送 尝试了一下httpclient,没找到相关资料,post方式无法塞url进去 最后改为 import ja ...
- Java学习笔记 - 类方法与代码块的执行顺序
类的初始化顺序 使用一个简单的父子类例子来做示范,代码执行顺序在代码后有标注. class Parent { public static String p_StaticField = "父类 ...
- Python-Jsonpath简单入门
原文来自:http://goessner.net/articles/JsonPath/ JSONPath - 是xpath在json的应用. xml最大的优点就有大量的工具可以分析,转换,和选择性 ...
- Python基础-列表、元组、字典、字符串(精简解析),全网最齐全。
一.列表 =====================================================1.列表的定义及格式: 列表是个有序的,可修改的,元素用逗号隔开,用中括号包围的序列 ...
- 给docker里的php安装gd扩展
docker官方镜像为安装php扩展封装了函数,为开发者提供了很大的便利,以下以Dockerfile的形式演示安装gd扩展的方法,安装gd扩展需要安装几个依赖包,安装依赖包使用系统命令,安装命令根据基 ...
- webService学习五(插入片,---监控方法)
WS Explorer工具的使用: 1- web服务浏览器 2-将对应的路径copy到这里 - 3- 4-- 5-- 6--请求的数据: 7--相应数据 二.使用TCP/IP Monitor-拦截HT ...
- 【Streaming】Storm内部通信机制分析
一.任务执行及通信的单元 Storm中关于任务执行及通信的三个概念:Worker(进程).Executor(线程)和Task(Spout.Bolt) 1. 一个worker进程执行的是一个Topol ...
- [原创]Machine Learning/机器学习 文章合集
转载请注明出处:https://www.codelast.com/ ➤ 用人话解释机器学习中的Logistic Regression(逻辑回归) ➤ 如何防止softmax函数上溢出(overflow ...
- 百度地图JavaScript API申请密钥注意要点
1.应用类型:浏览器端 2.启用服务:Javascript API要勾选 3.IP白名单:*即可