首页 >

Javascript模仿淘宝信用评价实例(附源码)【javascript】

web前端|js教程Javascript模仿淘宝信用评价实例(附源码)【javascript】
Javascript,仿淘宝,信用评价,Javascript仿淘宝信用评价
web前端-js教程
好玩的手机网站源码,vscode插件源码提取,Ubuntu载入失败,tomcat访问后台,sqlite3 自动增量,爬虫爬取皮皮虾评论,nginx 搭建php,seo招新信息,织梦网络设计工作室网站模板,海洋cms会员网页,手机网站模板 网址lzw
老板昨天开会说:要给公司的购物平台增加信用评价功能,用户体验参考淘宝。
asp源码 学籍,vscode添加外部依赖,ubuntu终端在那,tomcat制定域名,sqlite查询表的字段,淘宝客推广插件,汽车前端框架是由什么组成,网络爬虫技术英文名,php floatval,giang seo p o,网站标题乱码,怎么做手机版网页,access 销售管理 模板lzw
于是今天研究了一下,用jQuery模似一个类似的效果:
广告植入营销系统源码,ubuntu更新软件代码,tomcat启动后替换图片,python爬虫对网站,php定时任务怎么发送,seo优化 博客lzw
代码如下:

 模仿淘宝的信用评价    var rateMessage = {   'rate-1': {    'rate-1': '差得太离谱,与卖家描述的严重不符,非常不满',    'rate-2': '部分有破损,与卖家描述的不符,不满意',    'rate-3': '质量一般,没有卖家描述的那么好',    'rate-4': '质量不错,与卖家描述的基本一致,还是挺满意的',    'rate-5': '质量非常好,与卖家描述的完全一致,非常满意'   },   'rate-2': {    'rate-1': '卖家态度很差,还骂人、说脏话,简直不把顾客当回事',    'rate-2': '卖家有点不耐烦,承诺的服务也兑现不了',    'rate-3': '卖家回复问题很慢,态度一般,谈不上沟通顺畅',    'rate-4': '卖家服务挺好的,沟通挺顺畅的,总体满意',    'rate-5': '卖家的服务太棒了,考虑非常周到,完全超出期望值'   },   'rate-3': {    'rate-1': '再三提醒下,卖家才发货,耽误我的时间,包装也很马虎',    'rate-2': '卖家发货有点慢的,催了几次终于发货了',    'rate-3': '卖家发货速度一般,提醒后才发货的',    'rate-4': '卖家发货挺及时的,运费收取很合理',    'rate-5': '卖家发货速度非常快,包装非常仔细、严实'   },   'rate-4': {    'rate-1': '物流公司态度非常差,送货慢,外包装有破损',    'rate-2': '物流公司服务态度挺差,运送速度太慢',    'rate-3': '物流公司服务态度一般,运送速度一般',    'rate-4': '物流公司态度还好吧,送货速度挺快的',    'rate-5': '物流公司服务态度很好,运送速度很快'   }  };  $().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("" + iStar + " 分 - " + 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 = 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  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("" + iStar + " 分 - " + 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 = "";     }    }   }  })     * { 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.jpg) no-repeat -278px -96px; float: left; margin-right: 5px; cursor: pointer; }  #ulStars li.good { background: url(bg.jpg) no-repeat -278px -52px; }  #ulStars li.bad { background: url(bg.jpg) no-repeat -278px -73px; }  #tip { width: 171px; height: 67px; background: url(bg.jpg) 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; }  
←点击星星就能评价了
完整实例代码代码点击此处本站下载。


  • 暂无相关文章