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 相关文章推荐
用JavaScript实现单继承和多继承的简单方法
Mar 29 Javascript
Javascript 函数对象的多重身份
Jun 28 Javascript
javascript编码的几个方法详细介绍
Jan 06 Javascript
非常好用的JsonToString 方法 简单实例
Jul 18 Javascript
JS Loading功能的简单实现
Nov 29 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
Oct 11 Javascript
Bootstrap table使用方法总结
May 10 Javascript
微信小程序用户自定义模版用法实例分析
Nov 28 Javascript
JS实现十字坐标跟随鼠标效果
Dec 25 Javascript
2种在vue项目中使用百度地图的简单方法
Sep 28 Javascript
微信小程序HTTP接口请求封装代码实例
Sep 05 Javascript
一道JS算法面试题——冒泡、选择排序
Apr 21 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
如何使用PHP往windows中添加用户
2006/12/06 PHP
PHP常用技巧汇总
2016/03/04 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
2019/04/09 PHP
jQuery操作checkbox选择(list/table)
2013/04/07 Javascript
js实现星星打分效果的方法
2020/07/05 Javascript
js实现文字向上轮播功能
2017/01/13 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
react-redux中connect的装饰器用法@connect详解
2018/01/13 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
2018/02/11 Javascript
js统计页面上每个标签的数量实例代码
2018/05/29 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
2019/05/10 Javascript
JS原型和原型链原理与用法实例详解
2020/02/05 Javascript
将Vue组件库更换为按需加载的方法步骤
2020/05/06 Javascript
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
[00:34]TI7不朽珍藏III——纯金地穴编织者饰品展示
2017/07/15 DOTA
讲解Python中运算符使用时的优先级
2015/05/14 Python
利用Python实现图书超期提醒
2016/08/02 Python
Python正则表达式教程之二:捕获篇
2017/03/02 Python
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
Python接口测试数据库封装实现原理
2020/05/09 Python
Django日志及中间件模块应用案例
2020/09/10 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
英国最大的海报商店:GB Posters
2018/03/20 全球购物
英国领先的大码时装品牌之一:Elvi
2018/08/26 全球购物
高性能装备提升营地:Kammok
2019/02/27 全球购物
函数指针的定义是什么
2016/08/14 面试题
电子商务专业个人的自我评价
2013/12/19 职场文书
个人能力自我鉴赏
2014/01/25 职场文书
文明美德伴我成长演讲稿
2014/05/12 职场文书
运动会开幕词
2015/01/28 职场文书
旅游投诉信范文
2015/07/02 职场文书
2016年情人节问候语
2015/11/11 职场文书
MySQL表字段时间设置默认值
2021/05/13 MySQL
第四次工业革命,打工人与机器人的竞争
2022/04/21 数码科技