使用font-awesome构建的五星评价控件

Cool star rating with JQuery and font awesome

jquery, widget

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2455
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

//change star to fa-star **on hover** of element hovered and all soblings before (prevAll)

$("div i").hover(function() {

var $this = $(this);
    $this.nextAll().removeClass('fa-star').addClass("fa-star-o");
    $this.prevUntil("h1").removeClass("fa-star-o").addClass('fa-star');
    $this.removeClass("fa-star-o").addClass('fa-star');
});

//**on mouseOut** change back to fa-star-o OR the result of the click event

$("div i").mouseout(function() {

var select = $('.active');
    select.nextAll().removeClass('fa-star').addClass('fa-star-o');
    select.prevUntil("h1").removeClass('fa-star-o').addClass('fa-star');
    select.removeClass('fa-star-o').addClass('fa-star');

});

//on Click change star to fa-star and change color to red (prevAll)

$("div i").click(function() {
    $(this).addClass('active').siblings().removeClass('active');
    $(this).attr("style", "color:#FFDFAA");
    $(this).prevUntil("h1").css("color", "#FFDFAA");
    $(this).nextAll().css("color", "#7F6A15");

});

编译

CSS

HTML

<div class="container">
    <div class="row">
        <div class="panel panel-default col-xs-12 col-md-4 col-md-offset-4">
            <div class="panel-body">
                <h1>How is it going?</h1>
                <i class="fa fa-star-o" aria-hidden="true"></i>
                <i class="fa fa-star-o" aria-hidden="true"></i>
                <i class="fa fa-star-o" aria-hidden="true"></i>
                <i class="fa fa-star-o" aria-hidden="true"></i>
                <i class="fa fa-star-o" aria-hidden="true"></i>
            </div>
            <div class="panel-footer">
                <button class="btn btn-default btn-lg">Rate</button>
            </div>
        </div>
    </div>
</div>

Cool star rating with JQuery and font awesome

jquery, widget

编辑器支持Emmet

快捷键

Cool star rating with JQuery and font awesome

jquery, widget

使用React构建的多标签添加输入控件

使用jQuery.Windy.js插件实现微风吹拂动画的图片浏览 - 滑杆控制

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：