<style>
.star span{
font-size: 2em;
cursor: pointer;
}
.star .red{
color: red;
}
</style>
<h3>示例1:</h3>
<div class="star exp1">
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
<i></i>
<input type="hidden" name="star" value="1">
</div>
<div class="star exp6">
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
<i></i>
<input type="hidden" name="star" value="3">
</div>
<div class="star exp4">
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
<i></i>
<input type="hidden" name="star" value="5">
</div>
<div class="star exp5">
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
<i></i>
<input type="hidden" name="star" value="7">
</div>
<h3>示例2:</h3>
<div class="star exp2">
<span>W</span><span>W</span><span>W</span><span>.</span><span>E</span><span>B</span><span>C</span><span>M</span><span>S</span><span>.</span><span>C</span><span>O</span><span>M</span>
<i></i>
<input type="hidden" name="star" value="3">
</div>
<h3>示例3:</h3>
<div class="star exp3">
<span>易</span><span>贝</span><span>内</span><span>容</span><span>管</span><span>理</span><span>系</span><span>统</span><span>,</span><span>基</span><span>于</span><span>T</span><span>P</span><span>5</span><span>开</span><span>发</span><span>!</span>
<i></i>
<input type="hidden" name="star" value="3">
</div>
<script>
$(function() {
function stars(selecter){
var stars = $(selecter + ' span');
var star_tips_dom = $(selecter + ' i');
var star_dom = $(selecter + '');
var star_input_dom = $(selecter + ' input');
stars.mouseover(function() {
var ind = $(this).index();
$.each(stars, function(index, val) {
if ($(this).index() <= ind) {
$(this).addClass('red');
}else{
$(this).removeClass('red');
}
});
star_tips_dom.html(ind + 1 + ' 分');
});
stars.bind('click', function(event) {
star_input_dom.val($(this).index()+1);
});
star_dom.mouseout(function() {
var ind = star_input_dom.val();
$.each(stars, function(index, val) {
if ($(this).index() < ind) {
$(this).addClass('red');
}else{
$(this).removeClass('red');
}
});
star_tips_dom.html(ind + ' 分');
});
// 初始化
stars.eq(Number(star_input_dom.val())-1).trigger('mouseout');
}
stars('.exp1');
stars('.exp2');
stars('.exp3');
stars('.exp4');
stars('.exp5');
stars('.exp6');
stars('.exp7');
});
</script>
ThinkPHP 是一个免费开源的,快速、简单的面向对象的 轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。