首页 新闻 搜索 专区 学院

Juuery实现评分效果

0
悬赏园豆:40 [已解决问题] 解决于 2012-04-05 10:43

<p  >
<label>Commodity Quality</label>
<label>Shipping Speed</label>
<label>Service satisfaction</label>
</p>
<p  >
<label  >
    <img src="/Styles/images/Comet_s1.jpg"  alt=""/>&nbsp;<img src="/Styles/images/Comet_s1.jpg"  alt=""/>&nbsp;<img src="/Styles/images/Comet_s1.jpg"  alt=""/>&nbsp;<img src="/Styles/images/Comet_s1.jpg"  alt=""/>&nbsp;<img src="/Styles/images/Comet_s1.jpg"  alt=""/></label>&nbsp;&nbsp;
    <label  >Very Unsatisfied</label>
    <label >
    <img src="/Styles/images/Comet_s1.jpg"  alt=""/>&nbsp;<img src="/Styles/images/Comet_s1.jpg"  alt=""/>&nbsp;<img src="/Styles/images/Comet_s1.jpg"  alt=""/>&nbsp;<img src="/Styles/images/Comet_s1.jpg"  alt=""/>&nbsp;<img src="/Styles/images/Comet_s1.jpg"  alt=""/></label>&nbsp;&nbsp;
    <label >Unsatisfied</label>
    <label >
    <img src="/Styles/images/Comet_s1.jpg"  alt=""/>&nbsp;<img src="/Styles/images/Comet_s1.jpg"  alt=""/>&nbsp;<img src="/Styles/images/Comet_s1.jpg"  alt=""/>&nbsp;<img src="/Styles/images/Comet_s1.jpg"  alt=""/>&nbsp;<img src="/Styles/images/Comet_s1.jpg"  alt=""/></label>&nbsp;&nbsp;
    <label >Neutral</label>

</p>

这是我的html代码 求实现功能  我就两张图片 一张是一个灰色的星 ,一张是个一黄色的小星 Comet_s1.jpg这是灰色的星星  两张图片都是12*12的

问题补充:

 实现鼠标以上去灰色星星变成黄色 点击就算评分 取值就可以 Juqery实现  求具体代码 带上CSS

miloss的主页 miloss | 菜鸟二级 | 园豆:254
提问于:2012-03-30 14:08
< >
分享
最佳答案
0

Demo:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Jquery星级评分插件</title>
<style type="text/css">
.star-rating,
.star-rating a:hover,
.star-rating a:active,
.star-rating a:focus,
.star-rating .current-rating
{
background
: url(http://i.6.cn/cvbnm/ed/bc/2b/8133f85857fcd21ee94e1c6568b6aa58.gif) left -1000px repeat-x;
}
.star-rating
{
position
:relative;
width
:125px;
height
:25px;
overflow
:hidden;
list-style
:none;
margin
:0;
padding
:0;
background-position
: left top;
}
.star-rating li
{
display
: inline;
}
.star-rating a,
.star-rating .current-rating
{
position
:absolute;
top
:0;
left
:0;
text-indent
:-1000em;
height
:25px;
line-height
:25px;
outline
:none;
overflow
:hidden;
border
: none;
}
.star-rating a:hover,
.star-rating a:active,
.star-rating a:focus
{
background-position
: left bottom;
}
.star-rating .current-rating
{
z-index
:1;
background-position
: left center;
}

.inline-rating
{
display
:-moz-inline-block;
display
:-moz-inline-box;
display
: inline-block;
vertical-align
: middle;
}

.small-star
{
width
:50px;
height
:10px;
}
.small-star,
.small-star a:hover,
.small-star a:active,
.small-star a:focus,
.small-star .current-rating
{
background-image
: url(http://i.6.cn/cvbnm/cd/8e/1f/fff1ceb0395574a6372864cc8ac38394.gif);
line-height
: 10px;
height
: 10px;
}

/*以下为本页面样式*/
@charset "utf-8";
/* CSS Document */
body
{width:auto; margin:0px; font-size:84%; background:#eee; color:#333; font-family:Verdana, Geneva, sans-serif;}
ul,ol,form,h1,h2,h3,h4,h5,h6,p
{padding:0; margin:0; list-style-type:none;}
.out_box
{
width
:70%;
min-width
:700px;
border-left
:1px solid white;
border-right
:1px solid white;
margin
:0px auto;
}
.mb10
{margin-bottom:10px;}
.f9
{font-size:0.9em;}
.f14
{font-size:14px;}
.in_box
{min-height:550px; _height:550px; border-left:1px solid #ccc; border-right:1px solid #ccc; background:white; padding:1em 2.5em 0;}
.header
{padding:10px 20px 5px; border-bottom:1px solid #ccc; overflow:hidden; zoom:1;}
.title
{font-size:1.6em; text-align:center; margin:20px 0;}
.main_con
{padding:0 20px 20px;}
.footer
{padding-bottom:25px; text-align:center;}
.test_list
{padding:1em; font-size:1.1em; border-bottom:1px dashed #ccc; line-height:1.3; overflow:hidden; zoom:1;}
.code
{display:block; padding:10px; margin:5px 0; background:#eee; border:1px dashed #ccc; clear:both; zoom:1;}
.code xmp,.code pre
{margin:0; color:#00F; font-size:12px; white-space:pre-wrap; word-wrap:break-word;}
.author_time
{float:right; margin-top:34px; color:#787878; font-family:"Courier New", Courier, monospace;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery.fn.rater
=function(url, options)
{
if(url ==null) return;
var settings = {
url : url,
// ajax提交的地址,注意是用post方法提交的哦
maxvalue : 5, // 星星的最大数量
curvalue : 0// 默认选中第几个星星
};

if(options) { jQuery.extend(settings, options); };
jQuery.extend(settings, {cancel: (settings.maxvalue
>1) ?true : false});

var container = jQuery(this);
jQuery.extend(container, { averageRating: settings.curvalue, url: settings.url });

if(!settings.style || settings.style ==null|| settings.style =='basic') {
var raterwidth = settings.maxvalue *25;
var ratingparent ='<ul class="star-rating" style="width:'+raterwidth+'px">';
}
if(settings.style =='small') {
var raterwidth = settings.maxvalue *10;
var ratingparent ='<ul class="star-rating small-star" style="width:'+raterwidth+'px">';
}
if(settings.style =='inline') {
var raterwidth = settings.maxvalue *10;
var ratingparent ='<span class="inline-rating"><ul class="star-rating small-star" style="width:'+raterwidth+'px">';
}
container.append(ratingparent);

// 初始化星星
var starWidth, starIndex, listitems ='';
var curvalueWidth = Math.floor(100/ settings.maxvalue * settings.curvalue);
for(var i =0; i <= settings.maxvalue ; i++) {
if (i ==0) {
listitems
+='<li class="current-rating" style="width:'+curvalueWidth+'%;">'+settings.curvalue+'/'+settings.maxvalue+'</li>';
}
else {
starWidth
= Math.floor(100/ settings.maxvalue * i);
starIndex
= (settings.maxvalue - i) +2;
listitems
+='<li class="star"><a href="#'+i+'" title="'+i+'/'+settings.maxvalue +'" style="width:'+starWidth+'%;z-index:'+starIndex+'">'+i+'</a></li>';
}
}
container.find(
'.star-rating').append(listitems);

if(settings.maxvalue >1) // 添加一个容器来接受ajax返回的信息
{
container.append(
'<span class="star-rating-result"></span>');
}
var stars = jQuery(container).find('.star-rating').children('.star');
stars.click(
function()
{
if(settings.maxvalue ==1) // 如果maxvalue是1的话,那就没有ajax返回
{
settings.curvalue
= (settings.curvalue ==0) ?1 : 0;
jQuery(container).find(
'.star-rating').children('.current-rating').css({width:(settings.curvalue*100)+'%'});
jQuery.post(container.url, {
"rating": settings.curvalue });
returnfalse;
}
else
{
settings.curvalue
= stars.index(this) +1;
raterValue
= jQuery(this).children('a')[0].href.split('#')[1];
jQuery.post(container.url, {
"rating": raterValue }, function(response){
container.children(
'.star-rating-result').html(response)
});
returnfalse;
}
returntrue;
});

returnthis; // 严厉警告:匿名函数不总是返回一个值。
}
</script>
</head>
<body>
<h1 class="title">Jquery星级评分插件</h1>
<div class="in_box">
<div class="main_con">
<div class="test_list">
<h3 class="mb10_f14">先上效果</h3>
<div id="demo1"></div>
<code class="source">
js代码:$('#demo1').rater('http://www.chinacxy.com');
</code>
<script type="text/javascript">
$(
'#demo1').rater('http://www.chinacxy.com');
</script>
</div>
<div class="test_list">
<h3 class="mb10_f14">插件用法:</h3>
<div class="code">
参数一为Ajax反馈地址<br>
参数二为Object(对象),可选:其中的参数有:<br>
<table width="100%" cellpadding="5" bgcolor="#ffffff">
<tr>
<td width="150">style</td><td>显示星星的方式,有三种选择 basic,small,inline</td>
</tr>
<tr>
<td>maxvalue</td><td>星星的最大数量</td>
</tr>
<tr>
<td>curvalue</td><td>默认选中第几个星星</td>
</tr>
</table>
</div>
</div>
<div class="test_list">
<div id="demo5"><strong>星星数大于5个</strong><br /></div>
<code class="source">
JS代码:$('#demo5').rater('http://www.chinacxy.com', {style: 'basic',maxvalue:10,curvalue:3});
</code>
<script type="text/javascript">
$(
'#demo5').rater('http://www.chinacxy.com', {style: 'basic',maxvalue:10,curvalue:3});
</script>
</div>
</div>
</div>
</div>
</body>
</html>

在线演示:http://jscode.chinacxy.com/code/eb71ac13b72df6ba79c24f3aa020f815.aspx

收获园豆:20
artwl | 专家六级 |园豆:16526 | 2012-03-30 20:02
其他回答(2)
0

两个层一个外层一个内层,外层的背景是灰色的,宽度固定,内层的背景是黄色的,宽度根据用户鼠标的位置来定。

自己想原理,自己写吧

收获园豆:10
玉开 | 园豆:8822 (大侠五级) | 2012-03-30 15:32

新手啊  求代码

支持(0) 反对(0) miloss | 园豆:254 (菜鸟二级) | 2012-03-30 16:04
0

关注学习。。。

收获园豆:10
KivenRo | 园豆:1722 (小虾三级) | 2012-03-31 09:07

这有一个很好的例子,你可以参考一下:

http://fgm.cc/learn/lesson4/09.html

效果图:

支持(0) 反对(0) KivenRo | 园豆:1722 (小虾三级) | 2012-03-31 09:10
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册