js如何模仿淘寶評價評分功能

發(fā)布時間：2021-07-09 10:45:16 來源：億速云閱讀：107 作者：小新欄目：web開發(fā)

小編給大家分享一下js如何模仿淘寶評價評分功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

效果圖：

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>

以上是“js如何模仿淘寶評價評分功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

js如何模仿淘寶評價評分功能

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽