js仿淘寶評價評分功能

更新時間：2017年02月28日 15:42:33 作者：湛瞳

本文主要介紹了js仿淘寶評價評分功能——點擊心形生成得分（有半心選擇），具有很好的參考價值，下面跟著小編一起來看下吧

效果圖：

圖（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>

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章: