jquery星级插件、支持页面中多次使用

201 阅读 0 评论 133 点赞

我是靠谱客的博主爱听歌老师，最近开发中收集的这篇文章主要介绍jquery星级插件、支持页面中多次使用，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

效果图如下：

css所需背景图片：

二话不说，帖代码：
html代码

复制代码代码如下:

 
<div class="xing"> 
<span style="float: left">总体评价:<font color="#CC3300" size="-1">*</font></span><div 
class="rating-wrap"> 
<ul id="xing1"> 
<li><a href="javascript：;" data-rate-value="10" data-hint="很差" title="很差" class="one-star"> 
</a></li> 
<li><a href="javascript：;" data-rate-value="20" data-hint="差" title="差" class="two-stars "> 
</a></li> 
<li><a href="javascript：;" data-rate-value="30" data-hint="还行" title="还行" class="three-stars "> 
</a></li> 
<li><a href="javascript：;" data-rate-value="40" data-hint="好" title="好" class="four-stars"> 
</a></li> 
<li><a href="javascript：;" data-rate-value="50" data-hint="很好" title="很好" class="five-stars"> 
</a></li> 
</ul> 
</div> 
<span class="xing1">点击星星开始打分</span> 
</div> 
<divclass="xing"> 
<span style="float: left">广告效果:<font color="#CC3300"size="-1">*</font></span><div 
class="rating-wrap"> 
<ulid="xing2"> 
<li><a href="javascript：;" data-rate-value="10" data-hint="很差" title="很差" class="one-star"> 
</a></li> 
<li><a href="javascript：;" data-rate-value="20" data-hint="差" title="差" class="two-stars "> 
</a></li> 
<li><a href="javascript：;" data-rate-value="30" data-hint="还行" title="还行" class="three-stars "> 
</a></li> 
<li><a href="javascript：;" data-rate-value="40" data-hint="好" title="好" class="four-stars"> 
</a></li> 
<li><a href="javascript：;" data-rate-value="50" data-hint="很好" title="很好" class="five-stars"> 
</a></li> 
</ul> 
</div> 
<span class="xing2">点击星星开始打分</span> 
</div> 

JS代码

复制代码代码如下:

 
<script type="text/javascript" src="js/jQuery_1.42.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$(".rating-wrap a").mouseover(function(){ 
$(this).parent().siblings().find("a").removeClass("active-star"); 
$(this).addClass("active-star"); 
$("."+$(this).parent().parent().attr("id")).html($(this).attr("data-hint")) 
}).mouseleave(function(){ 
var selectID=$(this).parent().parent().attr("id")+"select"; 
$(this).removeClass("active-star"); 
if($("#"+selectID).length==0) 
{ 
$("."+$(this).parent().parent().attr("id")).removeClass("active-hint").html("点击星星开始打分"); 
} 
else 
{ 
$("."+$(this).parent().parent().attr("id")).html($("#"+selectID).attr("data-hint")); 
$("#"+selectID).addClass("active-star"); 
} 
}).click(function(){ 
$(this).addClass("active-star").attr('id',$(this).parent().parent().attr("id")+"select"); 
$(this).parent().siblings().find("a").attr("id",""); 
$("."+$(this).parent().parent().attr("id")).html($(this).attr("data-hint")).addClass("active-hint"); 
}) 
}) 
</script> 

css代码

复制代码代码如下:

 
<style> 
.item-rank-rst, .user-rank-rst, .rating-wrap ul, .rating-wrap a:hover, .rating-wrap .active-star, .user-m-star, .urr-rank60, .breadcrumb .note { 
background-image: url(xing_bg.png);/**-----星级插件背景图片----**/ 
background-repeat: no-repeat; 
} 
.rating-wrap { 
background: none repeat scroll 0 0 #FFF9F1; 
border: 1px solid #EFE0D7; 
display: inline-block; 
float: left; 
height: 20px; 
margin-right: 5px; 
padding: 4px 0 0 5px; 
position: relative; 
top: -2px; 
width: 89px; 
z-index: 0; 
} 
.rating-wrap ul { 
background-position: 0 -250px; 
height: 16px; 
position: relative; 
width: 85px; 
z-index: 10; 
} 
.rating-wrap li { 
display: inline; 
} 
.rating-wrap a { 
display: block; 
height: 16px; 
left: 0; 
position: absolute; 
top: 0; 
} 
.rating-wrap .five-stars { 
background-position: 0 -160px; 
width: 84px; 
z-index: 10; 
} 
.rating-wrap .four-stars { 
background-position: 0 -178px; 
width: 68px; 
z-index: 20; 
} 
.rating-wrap .three-stars { 
background-position: 0 -196px; 
width: 51px; 
z-index: 30; 
} 
.rating-wrap .two-stars { 
background-position: 0 -214px; 
width: 34px; 
z-index: 40; 
} 
.rating-wrap .one-star { 
background-position: 0 -232px; 
width: 17px; 
z-index: 50; 
} 
.rating-block .hint { 
color: #999999; 
float: left; 
} 
.active-hint { 
color: #CC0000; 
} 
.rating-block .err-hint { 
color: #EE0000; 
font-weight: bold; 
} 
</style> 