Javascript模仿淘寶信用評價實例(附源碼)

更新時間：2015年11月26日 15:08:50 作者：Jimmy.Yang

這篇文章主要介紹了Javascript模仿淘寶信用評價功能實現(xiàn)方法,以完整實例形式分析了JavaScript響應(yīng)鼠標(biāo)事件動態(tài)改變頁面元素的相關(guān)技巧,并附帶了完整的實例代碼供讀者下載參考,需要的朋友可以參考下

本文實例講述了Javascript模仿淘寶信用評價實現(xiàn)方法。分享給大家供大家參考，具體如下：

老板昨天開會說:要給公司的購物平臺增加信用評價功能，用戶體驗參考淘寶。

于是今天研究了一下，用jQuery模似一個類似的效果:

代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>模仿淘寶的信用評價</title>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript">
  var rateMessage = {
   'rate-1': {
    'rate-1': '差得太離譜，與賣家描述的嚴(yán)重不符，非常不滿',
    'rate-2': '部分有破損，與賣家描述的不符，不滿意',
    'rate-3': '質(zhì)量一般，沒有賣家描述的那么好',
    'rate-4': '質(zhì)量不錯，與賣家描述的基本一致，還是挺滿意的',
    'rate-5': '質(zhì)量非常好，與賣家描述的完全一致，非常滿意'
   },
   'rate-2': {
    'rate-1': '賣家態(tài)度很差，還罵人、說臟話，簡直不把顧客當(dāng)回事',
    'rate-2': '賣家有點不耐煩，承諾的服務(wù)也兌現(xiàn)不了',
    'rate-3': '賣家回復(fù)問題很慢，態(tài)度一般，談不上溝通順暢',
    'rate-4': '賣家服務(wù)挺好的，溝通挺順暢的，總體滿意',
    'rate-5': '賣家的服務(wù)太棒了，考慮非常周到，完全超出期望值'
   },
   'rate-3': {
    'rate-1': '再三提醒下，賣家才發(fā)貨，耽誤我的時間，包裝也很馬虎',
    'rate-2': '賣家發(fā)貨有點慢的，催了幾次終于發(fā)貨了',
    'rate-3': '賣家發(fā)貨速度一般，提醒后才發(fā)貨的',
    'rate-4': '賣家發(fā)貨挺及時的，運費收取很合理',
    'rate-5': '賣家發(fā)貨速度非常快，包裝非常仔細(xì)、嚴(yán)實'
   },
   'rate-4': {
    'rate-1': '物流公司態(tài)度非常差，送貨慢，外包裝有破損',
    'rate-2': '物流公司服務(wù)態(tài)度挺差，運送速度太慢',
    'rate-3': '物流公司服務(wù)態(tài)度一般，運送速度一般',
    'rate-4': '物流公司態(tài)度還好吧，送貨速度挺快的',
    'rate-5': '物流公司服務(wù)態(tài)度很好，運送速度很快'
   }
  };
  $().ready(function () {
   var starInit = $("#starInit");
   var ulStars = $("#ulStars");
   var txtStar = $("#txtStar");
   var tip = $("#tip");
   var rate_1_result = $("#rate_1_result");
   var star_wrap = $("#star_wrap");
   starInit.hover(function () {
    starInit.hide();
    star_wrap.show();
   })
   var oLis = $("#ulStars li");
   oLis.each(function (i) {
    $(this).click(function () {
     var iStar = parseInt($(this).attr("star"), 10);
     txtStar.val(iStar);
     rate_1_result.html("<span style='color:red'>" + iStar + " 分</span> - " + rateMessage["rate-1"]["rate-" + iStar]);
    }).hover(function () {
     var iStar = parseInt($(this).attr("star"), 10);
     for (var i = 0; i < oLis.length; i++) {
      var _temp = oLis[i];
      if (_temp.attributes["star"].value <= iStar) {
       if (iStar >= 3) {
        _temp.className = "good";
       }
       else {
        _temp.className = "bad";
       }
      }
      else {
       _temp.className = "";
      }
     }
    }, function () {
     if (txtStar.val() != "") {
      var iSelectedStar = parseInt(txtStar.val(), 10);
      for (var i = 0; i < oLis.length; i++) {
       var _temp = oLis[i];
       if (_temp.attributes["star"].value > iSelectedStar) {
        _temp.className = "";
       }
       else {
        var iSelfStar = parseInt(_temp.attributes["star"].value, 10);
        if (iSelfStar >= 3) {
         _temp.className = "good";
        }
        else {
         if (iSelectedStar >= 3) {
          _temp.className = "good";
         }
         else {
          _temp.className = "bad";
         }
        }
       }
      }
     }
    }).mousemove(function (e) {
     var intX = 0, intY = 0;
     if (e == null) {
      e = window.event;
     }
     if (e.pageX || e.pageY) {
      intX = e.pageX; intY = e.pageY;
     }
     else if (e.clientX || e.clientY) {
      if (document.documentElement.scrollTop) {
       intX = e.clientX + document.documentElement.scrollLeft;
       intY = e.clientY + document.documentElement.scrollTop;
      }
      else {
       intX = e.clientX + document.body.scrollLeft;
       intY = e.clientY + document.body.scrollTop;
      }
     }
     var tipbar = tip.get(0);
     tipbar.style.top = (intY + 20) + "px";
     tipbar.style.left = (intX - 95) + "px";
     tipbar.style.display = "";
     var iStar = parseInt($(this).attr("star"), 10);
     tip.html("<span style='color:red'>" + iStar + " 分</span> - " + rateMessage["rate-1"]["rate-" + iStar]);
    }).mouseout(function () {
     tip.hide();
    })
   })
   star_wrap.hover(function () { }, function () {
    setTimeout(initStar, 50);
   })
   ulStars.hover(function () { }, function () { setTimeout(initStar, 50); });
   var initStar = function () {
    if (txtStar.val() == "") {
     star_wrap.hide();
     starInit.show();
     for (var i = 0; i < oLis.length; i++) {
      var _temp = oLis[i];
      _temp.className = "";
     }
    }
   }
  }) 
 </script>
 <style type="text/css">
  * { padding: 0; margin: 0; list-style: none; font-size: 12px; }
  #starBox { margin: 100px; }
  #starInit { width: 120px; height: 36px; overflow: hidden; float: left; }
  #star_wrap, #ulStars { width: 120px; height: 18px; overflow: hidden; float: left; }
  #ulStars li { width: 19px; height: 18px; background: url(bg.gif) no-repeat -278px -96px; float: left; margin-right: 5px; cursor: pointer; }
  #ulStars li.good { background: url(bg.gif) no-repeat -278px -52px; }
  #ulStars li.bad { background: url(bg.gif) no-repeat -278px -73px; }
  #tip { width: 171px; height: 67px; background: url(bg.gif) no-repeat -40px -167px; padding: 15px 3px 0 5px; line-height: 18px; }
  #txtStar { position: absolute; left: 0; top: -30px; }
  #rate_1_result { float: left; line-height: 25px; text-indent: 15px; color: Red; }
 </style>
</head>
<body>
 <div id="starBox">
  <div id="starInit">
   <img src="star_init.gif" alt="點擊星星即可評分" />
  </div>
  <div id="star_wrap" style="display: none">
   <ul id="ulStars">
    <li star="1"></li>
    <li star="2"></li>
    <li star="3"></li>
    <li star="4"></li>
    <li star="5"></li>
   </ul>
  </div>
  <div id="rate_1_result">←點擊星星就能評價了</div>
  <input type="text" id="txtStar" style="width: 30px" value="" />
  <div id="tip" style="position: absolute; display: none"></div>
 </div>
</body>
</html>

完整實例代碼代碼點擊此處本站下載。

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章: