现在的位置: 主页 > 商讯 > 文章正文

Jquery 评星效果Rating精华版

作者:武警河南洛阳红丝带网 来源:www.027fck.com 未知发布时间:2017-09-06 09:31:33
Jquery 评星效果Rating精华版 实现功能:

同一页面可以使用多个评星,相互不干扰

星星数量可自定义

可设置默认的星级

在选择星级之后,仍有悬停效果

可自定义评星描述

rating.js代码:

[javascript]

function InitStar(count,cur,s0,s1,ctn,txt){

$("#"+ctn).attr("star",cur);

for(var i=1;i<=count;i++){

var p=(i<=cur)?s1:s0;

$("<img/>").addClass("star").css("cursor","pointer").attr({"src":p,"flag":i}).appendTo($("#"+ctn));

}

$("img.star").mouseover(function(){

var cur=parseInt($(this).attr("flag"));

$("img.star").each(function(){

var i=parseInt($(this).attr("flag"));

var p=(i<=cur)?s1:s0;

$(this).attr("src",p);

});

showStar(txt,cur);

});

$("img.star").click(function(){

$("#"+ctn).attr("star",$(this).attr("flag"));

});

$("#"+ctn).mouseout(function(){

var cur=parseInt($(this).attr("star"));

$("img.star").each(function(){

var p=($(this).attr("flag")<=cur)?s1:s0;

$(this).attr("src",p);

});

showStar(txt,cur);

});

}

function showStar(txt,cur){

$("#"+txt).val(cur);

$("#"+txt).change();

}

参数说明:

count:星星总数

cur:默认选中第几颗

s0:空星星的图片路径

s1:实星星的图片路径

ctn:创建星星的容器

txt:显示评星描述的textbox

页面代码:

[html]

<html>

<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript">

</script>

<script src="rating.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){

//创建星星

InitStar(5,3,'k.gif','s.gif','lblStar1','txt')

//重写评星描述

$("#txt").change(function(){

var v=$(this).val();

switch(v){

case "1":v="太差了";break;

case "2":v="有待提高";break;

case "3":v="一般";break;

case "4":v="不错";break;

case "5":v="太棒了";break;

default:v="";

}

$(this).val(v);

});

});

</script>

<body>

<label id="lblStar1"></label><input type="text" id="txt">

<br>

</body>

</html>

默认在评星描述的textbox里显示的只是评星的等级数,,若想自定义评级描述,则加一个change事件,,在里面替换值即可

效果图:

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:荆州SEO http://jingzhou.raoyu.net

上一篇:移动App别慌! 下一篇:最后一页