一个挺酷的星级投票效果

先声明一下，这是本人在某个项目中用到的，本人自己写的，如有雷同纯属巧合。同时也欢迎高人指正。

这种星级的投票效果很常见，但是目前线上大多都是通过多张背景图切换来实现的，比如下面这种

感觉这种方法挺麻烦的，而且也不能精确地表示比如8.8这样的小数，所以自己写了个，感觉还挺不错，不多说了，先上代码：

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <title>vote</title> <script type="text/javascript" src="http://www.moondyzone.com/wp-demo/jquery-lightbox/js/jquery.js"></script> <style> .user_rate {font-size:14px; position:relative; padding:10px 0;} .user_rate p {margin:0; padding:0; display:inline; height:40px; overflow:hidden; position:absolute; top:0; left:100px; margin-left:140px;} .user_rate p span.s {font-size:36px; line-height:36px; float:left; font-weight:bold; color:#DD5400;} .user_rate p span.g {font-size:22px; display:block; float:left; color:#DD5400;} /*rating*/ .big_rate_bak {width:140px; height:28px; overflow:hidden; text-align:left; position:absolute; top:3px; left:85px; display:inline-block; background:url(http://www.moondyzone.com/wp-content/uploads/2010/02/b_star.gif) left -32px repeat-x;} .big_rate_bak b {display:inline-block; width:28px;float:left; height:28px; position:relative; z-index:1000; cursor:pointer; overflow:hidden;} .big_rate_up {width:140px; height:28px; position:absolute; top:0; left:0; background:url(http://www.moondyzone.com/wp-content/uploads/2010/02/b_star.gif) left top;} </style> </head> <body> <div class="user_rate"> <div class="big_rate_bak"> <b rate="2" onclick="javascript:up_rate(20);"> </b> <b rate="4" onclick="javascript:up_rate(40);"> </b> <b rate="6" onclick="javascript:up_rate(60);"> </b> <b rate="8" onclick="javascript:up_rate(80);"> </b> <b rate="10" onclick="javascript:up_rate(100);"> </b> <div style="width:45px;" class="big_rate_up"></div> </div> <p><span id="s" class="s"></span><span id="g" class="g"></span></p> </div> </body> <script type="text/javascript"> $(function(){ get_rate(88); }) function get_rate(rate){ rate=rate.toString(); var s; var g; $("#g").show(); if (rate.length>=3){ s=10; g=0; $("#g").hide(); }else if(rate=="0"){ s=0; g=0; }else{ s=rate.substr(0,1); g=rate.substr(1,1); } $("#s").text(s); $("#g").text("."+ g); $(".big_rate_up").animate({width:(parseInt(s)+parseInt(g)/10) * 14,height:26},1000); $(".big_rate_bak b").each(function(){ $(this).mouseover(function(){ $(".big_rate_up").width($(this).attr("rate") * 14 ); $("#s").text($(this).attr("rate")); $("#g").text(""); }).click(function(){ $("#f").text($(this).attr("rate")); $("#my_rate").show(); }) }) $(".big_rate_bak").mouseout(function(){ $("#s").text(s); $("#g").text("."+ g); $(".big_rate_up").width((parseInt(s)+parseInt(g)/10) * 14); }) } function up_rate(rate){ $(".big_rate_up").width("0"); get_rate(rate); } </script> </html>

提示：你可以先修改部分代码再运行。

这是用Jquery来写的，其中get_rate(88)就是分数，可以改变数值试试。提交的函数这里就没写了，只要在up_rate()里发个AJAX请求，取到返回值后再运行一下get_rate(rate)就OK了。

PS：刚才试了一下，点运行之后可能要刷新一下才看得到效果。

Moondy 发表于 2010-2-9 22,353 Views | 类别: JS/Ajax

22条留言立即发表评论

#1DDM君 @ 2010-2-28 14:40 回复

Moondy君您好，在下是Flash3D研究所（www.flab3d.com）的DDM君，很喜欢您的博客，常常在您这里看到很多有趣的网页开发知识。希望能和贵站交换链接。
我们已经将贵站的链接做好，希望有空多多交流^_^。
- Moondy @ 2010-2-28 20:46 回复
  
  已经加上啦，之前我都经常去贵站学习呢，只是近来因为工作关系，弄FLASH的时间比较少了。
#2情 @ 2010-4-1 10:53 回复

为什么表情全是这个兔子换泡泡兵
还有我怎么一句都看不懂你说什么，你是外太星来的吧
- moondy @ 2010-4-1 11:18 回复
  
  本来也想换，但一换之前的表情就对不上了，所以兔子就兔子了。
- 情 @ 2010-4-5 16:58 回复
  
  那就把之前得删了换跑跑并
#3xummer @ 2010-4-2 03:19 回复

你好，请问你用的是什么博客啊？你自己做的么？
不是的话，能告诉我哪能找到你这个源码么？
- moondy @ 2010-4-7 17:53 回复
  
  wordpress呀，很好找源码的
#4匿名 @ 2010-4-8 18:04 回复
#5iOver @ 2010-5-4 10:03 回复

博主的空间很漂亮。~另想问一下，文章中代码框边上的“运行”和“复制”是如何实现的呢？
- Moondy @ 2010-5-4 15:46 回复
  
  这是wordpress的一个插件呀，叫runcode，你可以找找。
#6老七 @ 2010-7-21 22:38 回复

这个效果不错可以做出wp插件呀~
- moondy @ 2010-7-22 10:53 回复
  
  呵，没做过WP插件，不知道怎么弄。
  - 卜卜口の @ 2010-7-24 08:33 回复
    
    直接封装成函数之后再模板里面调用就可以了,不过我一般是直接把代码贴到模板上
#7web前端寒风 @ 2010-7-29 23:39 回复

呵呵，我一直都很喜欢这种投票方式，可惜一直没有找到，今天发现了。
貌似IE6有错位呀，
- Moondy @ 2010-7-30 09:49 回复
  
  啊，我都忘了，最初发到蓝色理想的时候有朋友提出这个问题，已经修正了，但是忘记在自己的博客上更新了。多谢提醒，已经修正了。
  - web前端寒风 @ 2010-8-25 09:12 回复
    
    高手呀，学习了
#8木木 @ 2010-9-2 09:27 回复

希望能出一个教程，怎样应用到具体的网站实践上面！！
- moondy @ 2010-9-3 13:15 回复
  
  这个，虽然我没把整个封装，但是这里也有两个接口函数 up_rate跟get_rate，分别对应该提交数据跟显示数据。我觉得这个东西写教程的意义不太大咯
  - 木木 @ 2010-9-8 12:56 回复
    
    谢谢，因为我是初学者，呵呵！！我请教，如果我应用在论坛里面的一个问卷调查，该怎样操作呢！！
  - Moondy @ 2010-9-9 15:49 回复
    
    这要怎么说好呢，这本身并不是一个成熟的东西，只是拿出来跟大家交流一下而已了。建议新手还是沉淀一下基础知识，要应用的话，这里只是一个前台JS跟后台交互的问题。要一五一十地说清楚的话，一来不是三言两语说得清的，二来对你的提高也没多大帮助。
    另外你说想放在论坛里，如果不是自己开发的项目的话，比较难合进去
#9iSur @ 2011-3-5 16:29 回复

你好,请问能不能把那个代码运行框的代码给我下嘛?
我在网上找了个但它会自动在里面给我加上一些什么的
- moondy @ 2011-3-7 12:35 回复
  
  这个是WP的组件，如果你也是用WP的就搜一下，叫runcode