html页⾯中星星怎么写,html星星评分源码
css
.tip-word{margin-left:20px;color:red;}
.stars{margin: 8px;height:20px;}
.stars span{ float: left; line-height: 15px; }
.stars i{width: 15px; height: 15px; line-height: 15px; float: left; margin-right: 5px;background-position:center; background-image:url(images/star_gray.png);background-size: 100%; color: #fff; text-align: center; cursor:Pointer; font-style: normal;}
.stars .on{background-image:url(images/star.png);background-position:center;background-size: 100%;}
html
评价：
⾮常好
JS
$(function(){
/*
* ⿏标点击，该元素包括该元素之前的元素获得样式，并给隐藏域input赋值
css鼠标点击样式* ⿏标移⼊，样式随⿏标移动
* ⿏标移出，样式移除但被⿏标点击的该元素和之前的元素样式不变
* 每次触发事件，移除所有样式，并重新获得样式
* */
var tip_word = ["⾮常差","差","⼀般","好","⾮常好"];
var stars = $('.stars');
var Len = stars.length;
/
/遍历每个评分的容器
for(i=0;i
//每次触发事件，清除该项⽗容器下所有⼦元素的样式所有样式
function clearAll(obj){
obj.parent().children('i').removeClass('on');
}
stars.eq(i).find('i').click(function(){
var num = $(this).index();
clearAll($(this));
//当前包括前⾯的元素都加上样式
$(this).addClass('on').prevAll('i').addClass('on');
/
/给隐藏域input赋值
$(this).siblings('input').val(num);
//⽂字提⽰
$(this).siblings('.tip-word').html(tip_word[num-1]); });
stars.eq(i).find('i').mouseover(function(){
var num = $(this).index();
clearAll($(this));
//当前包括前⾯的元素都加上样式
$(this).addClass('on').prevAll('i').addClass('on');
//⽂字提⽰
$(this).siblings('.tip-word').html(tip_word[num-1]); });
stars.eq(i).find('i').mouseout(function(){
clearAll($(this));
//触发点击事件后input有值
var score = $(this).siblings('input').val();
//默认最少⼀个
if (score == 0)score = 1;
//⽂字提⽰
$(this).siblings('.tip-word').html(tip_word[score-1]); //当前包括前⾯的元素都加上样式
for(i=0;i
$(this).parent().find('i').eq(i).addClass('on');
}
});
}
})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。