您的位置:首页 > Web前端 > JQuery

Jquery五角星评分效果

2016-04-20 00:00 381 查看
采用Jq Css制作的五角星评分效果,主要是利用CSS的background-image以及background-position来调整我们的背景图片,以及Jq来选择要变化的元素。代码非常简单,只有几行。



Jq:

$(".formItemDiff").hover(function() {

$(this).css("background-position", "0px -555px");

$(this).prevAll().css("background-position", "0px -555px");

$(this).nextAll().css("background-position", "0px -575px");

$("#pointP").html($(this).prevAll().length 1 "分");

});

});

CSS:

.formItemDiff {

width: 20px;

height: 20px;

background-image: url(http://www.pengyaou.com/food/Images/diff.png);

background-position: 0px -575px;

float: left;

margin-top: 15px;

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: