评分功能显示的星级问题！

海洋齐齐 2010-01-25 10:45:28

请看一下安居客网站http://shanghai.anjuke.com/v2/community/trends/31的功能，看它的的星星显示，不知道怎么做的，可以在星星的任意位置显示打分情况，这是怎么实现的，是怎么算出来再哪个位置填充星星的？

附个测试账号：
geren001
123123

...全文

745 31 打赏收藏转发到动态举报

写回复

用AI写文章

31 条回复

切换为时间正序

请发表友善的回复…

发表回复

wuyq11 2010-01-25

打赏
举报

ajax控件
<cc1:Rating ID="Rating1" runat="server" Enabled="true" CurrentRating="0"
MaxRating="10" CssClass="cssRatingStar" StarCssClass="ratingItem"
WaitingStarCssClass="Saved" FilledStarCssClass="Filled" EmptyStarCssClass="Empty"
AutoPostBack="true" onchanged="Rating1_Changed"">
</cc1:Rating>
参考

zp63534036 2010-01-25

打赏
举报

以前用过，不过现在不记得了，等下也要复习下了，顺便帮顶一下

sohighthesky 2010-01-25

打赏
举报

帮你做好了，代码：



<!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>

    <title>test</title>

    <meta name="author" content="sohighthesky"/>

    <style type="text/css">

    /* pre style*/

    body,th,td {font-size:12px;font-family:Verdana,Tahoma,Arial,'\5b8b\4f53','\5FAE\8F6F\96C5\9ED1',sans-serif;}

    body,th,td,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,button,textarea,p  {margin:0;padding:0;}

    li { list-style-type:none;}

    a {color:#3366CC; text-decoration:none;}

	a:hover 	{color:#FF6600;text-decoration:underline;}

	/************************************************************/

	#div1{margin:20px auto;width:200px;}

	

	.grade_stars{

        background:transparent url(http://pages.anjukestatic.com/img/comm/commstar.gif) repeat-x scroll left -26px;

        cursor:pointer;

        padding:0;

        position:relative;

        line-height:24px;

        width:75px;

    }

    .grade_stars div{

        background:transparent url(http://pages.anjukestatic.com/img/comm/commstar.gif) repeat-x scroll left 4px;

        text-indent:-9999px;

        width:35px;

    }

    </style>

</head>

<body>

<div id="div1">

    <div class="grade_stars" id="grade_stars">

        <div> </div>

    </div>

</div>



</body>

<script type="text/javascript">

!function(){

var g=function(id){return typeof(id)==="string"?document.getElementById(id):id};



g("grade_stars").onclick=function(e){

    e=window.event || e;

    this.children[0].style.width=(e.offsetX ||e.layerX)+"px";

}



}();

</script>

</html>

这里测试：http://dl.dropbox.com/u/2555620/jquery/grade_stars.html

jack15850798154 2010-01-25

打赏
举报

祝你好运啊！！！！

jack15850798154 2010-01-25

打赏
举报

功能实现参考：http://blog.csdn.net/meng1986/archive/2007/11/02/1863827.aspx
http://hi.baidu.com/ooofcu/blog/item/c9a0f9ed26d7ee4b79f05577.html
http://www.cnblogs.com/chenou/articles/695287.html

ccyyss 2010-01-25

打赏
举报

关注一下

cyhcyhhychyc 2010-01-25

打赏
举报

jack15850798154 2010-01-25

打赏
举报

视频教程下载地址：http://119.147.41.16/down?cid=FD42D97409861DAA8A8CE7609C1BAD1FE209A362&t=4&fmt=&usrinput=rating&dt=0&ps=0_0&rt=0kbs&plt=0&spd=9

海洋齐齐 2010-01-25

打赏
举报

对的对的，终于有人明白了，当然我最想知道的，怎么用程序实现的？

jack15850798154 2010-01-25

打赏
举报

第三方控件。。。。rating这个控件即可。

ws_hgo 2010-01-25

打赏
举报

[Quote=引用 7 楼 jetaimejay 的回复:]
大家误会我的意思了，我不想知道怎么评分的，我只想明白怎么显示的，这个评分不是取的整数，是有小数的，如果满分是10分，当前打分6.8分，怎么在星星上表现出来
[/Quote]

哦
我明白你的意思啦
那你就按照一个星星2分的标准去算
8分就是4个满星星
6.8分就是
3个满星星加上百分比的部分啦