js仿淘宝评价评分功能


Posted in Javascript onFebruary 28, 2017

效果图:

js仿淘宝评价评分功能

图(1)初始图

js仿淘宝评价评分功能

图(2)点击效果

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>文件上传</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<style>
 /*评分*/
 ul{
 height: 20px;
 }
 li{
 list-style: none;
 float: left;
 width: 15px;
 height: 20px;
 }
 .leftHeart{
 background: url('http://cdn.attach.qdfuns.com/notes/pics/201702/28/145751uq6u6vfsnsvdbqbp.png') no-repeat bottom left;
 }
 .rightHeart{
 background: url('http://cdn.attach.qdfuns.com/notes/pics/201702/28/145751crdjmidtdy4rmm1t.png') no-repeat bottom left;
 }
 .score{
 font-size: 22px;
 font-weight: bolder;
 color: #ff0000;
 }
</style>
</head>
<body onload="init()">
 <!-- 评分 -->
 <ul>
 <li class="halfHeart leftHeart"></li><li class="halfHeart rightHeart"></li>
 <li class="halfHeart leftHeart"></li><li class="halfHeart rightHeart"></li>
 <li class="halfHeart leftHeart"></li><li class="halfHeart rightHeart"></li>
 <li class="halfHeart leftHeart"></li><li class="halfHeart rightHeart"></li>
 <li class="halfHeart leftHeart"></li><li class="halfHeart rightHeart"></li>
 得分:<span class="score"></span>
 </ul>
 <script>
 $('.halfHeart:odd').css('padding-right', '5px');
 var ifHover = true,
  ifClick = true;
 $('.halfHeart').mouseover(function(){
  if (ifHover) {
  for (var i = 0; i <= $(this).index(); i++) {
   $('.halfHeart').eq(i).css('background-position', 'top left');
  }
  $('.score').text(($(this).index()+1) * 0.5);
  }
 })
 $('.halfHeart').mouseout(function(){
  if (ifHover) {
  for (var i = 0; i <= $(this).index(); i++) {
   $('.halfHeart').eq(i).css('background-position', 'bottom left');
  }
  }
 })
 $('.halfHeart').click(function(){
  if (ifClick) {
  ifHover = false;
  ifClick = false;
  for (var i = 0; i <= $(this).index(); i++) {
   $('.halfHeart').eq(i).css('background-position', 'top left');
  }
  $('.score').text(($(this).index()+1) * 0.5);
  }
 })
 </script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
May 19 Javascript
jquery 循环显示div的示例代码
Oct 18 Javascript
javascript父、子页面交互技巧总结
Aug 08 Javascript
javascript实现3D切换焦点图
Oct 16 Javascript
JS简单模拟触发按钮点击功能的方法
Nov 30 Javascript
Bootstrap与Angularjs的模态框实例代码
Aug 03 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
Dec 21 Javascript
详解使用 Node.js 开发简单的脚手架工具
Jun 08 Javascript
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
Node.js中Koa2在控制台输出请求日志的方法示例
May 02 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
Sep 18 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
Mar 14 Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 #Javascript
three.js绘制地球、飞机与轨迹的效果示例
Feb 28 #Javascript
JavaScript Uploadify文件上传实例
Feb 28 #Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 #Javascript
简单实现AngularJS轮播图效果
Apr 10 #Javascript
ie下js不执行的几种可能
Feb 28 #Javascript
jquery中绑定事件的异同
Feb 28 #Javascript
You might like
神族 Protoss 历史背景
2020/03/14 星际争霸
关于php fread()使用技巧
2010/01/22 PHP
php中关于普通表单多文件上传的处理方法
2011/03/25 PHP
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
PHP扩展开发入门教程
2015/02/26 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
Ajax+Jpgraph实现的动态折线图功能示例
2019/02/11 PHP
Jquery+WebService 校验账号是否已被注册的代码
2010/07/12 Javascript
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
固定网页背景图同时保持图片比例的思路代码
2013/08/15 Javascript
Android中的jQuery:AQuery简介
2014/05/06 Javascript
JavaScript实现模仿桌面窗口的方法
2015/07/18 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
2015/11/21 Javascript
清除输入框内的空格
2016/12/21 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
cdn模式下vue的基本用法详解
2018/10/07 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
2018/11/15 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
vue+高德地图实现地图搜索及点击定位操作
2020/09/09 Javascript
JavaScript实现滑块验证解锁
2021/01/07 Javascript
在Python的Flask框架中实现单元测试的教程
2015/04/20 Python
解决Tensorflow安装成功,但在导入时报错的问题
2018/06/13 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
python3+PyQt5 实现Rich文本的行编辑方法
2019/06/17 Python
对python中的控制条件、循环和跳出详解
2019/06/24 Python
Python读取表格类型文件代码实例
2020/02/17 Python
python filecmp.dircmp实现递归比对两个目录的方法
2020/05/22 Python
详解Html5原生拖拽操作
2018/01/12 HTML / CSS
火山咖啡:Volcanica Coffee
2019/10/29 全球购物
Java生成读取条形码和二维码的简单示例
2021/07/09 Java/Android
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript
SpringBoot整合minio快速入门教程(代码示例)
2022/04/03 Java/Android
微信告警的zabbix监控系统 监控整个NGINX集群
2022/04/18 Servers