A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 杨恩锋 黑马帝   /  2011-10-21 12:20  /  3201 人查看  /  4 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

我们在淘宝网上买完东西之后,对卖家评分的时候都有一个很漂亮的控件,那个动态的效果怎么实现呢?有动态的特效,而且鼠标放到每个每个星星上有效果有提示描述!怎么实现呢?

评分.jpg (15.2 KB, 下载次数: 28)

评分.jpg

评分

参与人数 1技术分 +1 收起 理由
官方工作人员 + 1 很给力!

查看全部评分

4 个回复

倒序浏览
本帖最后由 黄朝辉 于 2011-10-21 19:26 编辑

楼上的那位朋友,楼主问的是怎么实现而不是找个插件哈!
楼主你看下我写的吧!基于JQ的
http://blog.csdn.net/huihuidetiantang/article/details/6894882

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>星星评分</title>
  6. <script type="text/javascript" src="jquery-1.6.4.min.js"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function() {
  9.         $("#divimg").css("cursor","pointer"); //鼠标移到上面去变手指pointer
  10.         $("img").click(function(){
  11.                 if($(this).attr("id")=="yi")
  12.                 {
  13.                         $("#yi").attr("src","Star.gif");
  14.                         $("img").not("#yi").attr("src","GrayStar.gif");
  15.                         $("#msg").html("1分");
  16.                 }
  17.                 else if($(this).attr("id")=="er")
  18.                 {
  19.                         $("#yi,#er").attr("src","Star.gif");
  20.                         $("img").not("#yi,#er").attr("src","GrayStar.gif");
  21.                         $("#msg").html("2分");
  22.                 }
  23.                 else if($(this).attr("id")=="san")
  24.                 {
  25.                         $("#yi,#er,#san").attr("src","Star.gif");
  26.                         $("img").not("#yi,#er,#san").attr("src","GrayStar.gif");
  27.                         $("#msg").html("3分");
  28.                 }
  29.                 else if($(this).attr("id")=="si")
  30.                 {
  31.                         $("#yi,#er,#san,#si").attr("src","Star.gif");
  32.                         $("img").not("#yi,#er,#san,#si").attr("src","GrayStar.gif");
  33.                         $("#msg").html("4分");
  34.                 }
  35.                 else
  36.                 {
  37.                         $("img").attr("src","Star.gif");
  38.                         $("#msg").html("5分");
  39.                 }
  40.                 });
  41. });
  42. </script>
  43. </head>

  44. <body>
  45. <div id="divimg" style="width:120px; height:15px">
  46. <img id = "yi" src="GrayStar.gif" />
  47. <img id = "er" src="GrayStar.gif" />
  48. <img id = "san" src="GrayStar.gif" />
  49. <img id = "si" src="GrayStar.gif" />
  50. <img id = "wu" src="GrayStar.gif" />
  51. <span id="msg">0分</span>
  52. </body>
  53. </html>
复制代码

评分

参与人数 1技术分 +1 收起 理由
官方工作人员 + 1 赞一个!

查看全部评分

回复 使用道具 举报
用Jquery吧                                 
回复 使用道具 举报
好,回答的都不错!jq的库确实能实现炫目的特效,很赞!!!
回复 使用道具 举报
推荐看看高手写的自定义评分星形控件,肯定会大有帮助的呵呵。
http://www.cnblogs.com/holywolf/archive/2008/12/11/1352574.html
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马