PHPIN.NET

 找回密码
 立即注册
查看: 5105|回复: 0

[jQuery/Js/AJAX] 仿淘宝,天猫评分效果

[复制链接]

469

主题

31

回帖

5497

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5497
发表于 2015-1-7 19:13:09 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?立即注册

x
仿淘宝,天猫评分效果

本文关键字词:淘宝js评分,天猫js评分


源码:
  1. <!doctype html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>JS评分效果</title>
  6. <style>
  7. *{margin:0;padding:0;}
  8. .pingfen{ width:220px;margin:10px auto;height:28px;}
  9. .pingfen li{ width:27px;float:left;height:28px; cursor:pointer;background:url(star.gif) no-repeat 0 0; list-style:none;}
  10. .pingfen span{height: 28px;line-height: 28px;float: right;font-size: 18px;}
  11. </style>
  12. </head>

  13. <body>
  14. <div id="pingfen" class="pingfen">
  15.     <ul>
  16.         <li></li>
  17.         <li></li>
  18.         <li></li>
  19.         <li></li>
  20.         <li></li>
  21.     </ul>
  22.     <span class="text"></span>
  23. </div>
  24. <div id="pingfen2" class="pingfen">
  25.     <ul>
  26.         <li></li>
  27.         <li></li>
  28.         <li></li>
  29.         <li></li>
  30.         <li></li>
  31.     </ul>
  32.     <span class="text"></span>
  33. </div>
  34. <div id="pingfen3" class="pingfen">
  35.     <ul>
  36.         <li></li>
  37.         <li></li>
  38.         <li></li>
  39.         <li></li>
  40.         <li></li>
  41.     </ul>
  42.     <span class="text"></span>
  43. </div>
  44. <script>
  45. window.onload=function(){

  46.     function score(id){
  47.         var oPf=document.getElementById(id);
  48.         var aLi=oPf.getElementsByTagName('li');
  49.         var oText=oPf.getElementsByTagName('span')[0];
  50.         var description = ['失望','不满','一般','满意','惊喜',]
  51.         var i=0;
  52.         
  53.         for(i=0;i<aLi.length;i++){
  54.             aLi[i].index=i;
  55.             aLi[i].onmouseover=function(){
  56.                 for(i=0;i<aLi.length;i++){
  57.                     if(i<=this.index)
  58.                     {   
  59.                         // console.log(i,this.index);
  60.                         aLi[i].style.backgroundPosition="0 -29px";
  61.                         oText.innerText=(this.index+1)+'分 '+description[i];
  62.                     }
  63.                     else
  64.                     {
  65.                         aLi[i].style.backgroundPosition="0 0";
  66.                     }
  67.                     // if()
  68.                 }
  69.             };
  70.             
  71.             aLi[i].onmouseout=function (){
  72.                 oText.innerText='';
  73.             };
  74.             aLi[i].onmousedown=function ()
  75.             {
  76.                 // alert('提交成功:'+(this.index+1)+'分');
  77.                 oText.innerText=(this.index+1)+'分 '+description[this.index];
  78.             };
  79.         }
  80.     }

  81.     score('pingfen');
  82.     score('pingfen2');
  83.     score('pingfen3');
  84. };
  85. </script>
  86. </body>
  87. </html>
复制代码

素材图片: star.gif
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|PHPIN.NET ( 冀ICP备12000898号-14 )|网站地图

GMT+8, 2024-3-29 23:25

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表