位置：首页>> 网络编程>> JavaScript>> 一个挺酷的星级投票效果

一个挺酷的星级投票效果

作者：moondy　来源：经典论坛　发布时间：2010-08-03 12:44:00　

标签：投票,jquery

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

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

感觉这种方法挺麻烦的，而且也不能精确地表示比如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; text-align:left; position:absolute; top:3px; left:85px; display:inline-block; background:url(/file/UploadPic/20108/3/b_star-49.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(/file/UploadPic/20108/3/b_star-49.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：刚才试了一下，点运行之后可能要刷新一下才看得到效果。

投稿

一个挺酷的星级投票效果

猜你喜欢