js仿淘宝评价评分功能

编程学习 2021-07-04 19:20www.dzhlxh.cn编程入门
本文主要介绍了js仿淘宝评价评分功能——点击心形生成得分(有半心选择),具有很好的参考价值,狼蚁网站SEO优化跟着长沙网络推广一起来看下吧

效果图:

图(1)初始图

图(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>

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

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板