Merhaba arkadaşlar, her projede farklım farklı yazmaktan yoruldum ve burada paylaşıyorum.

Html Kodları

<div class="rating">
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">6</a>
    <a href="#">7</a>
    <a href="#">8</a>
    <a href="#">9</a>
    <a href="#">10</a>
</div><!-- /. rating -->

Css Kodları

.rating{padding: 10px;}
    .rating a{width: 60px; height: 60px; background: url('stars.png') left top no-repeat; display: inline-block;  text-indent: -9999px; margin: 0 0;}
    .rating a.selected,
    .rating a.hover{background-position: right top; transform: scale(1.1); transition: transform ease-in-out .2s;}

Js Kodları

rating(function (e)
{
    $('.callback').html('Selected : 1-' + e);
});

function rating(callback)
{
    $('.rating a').on(
    {
        mouseover : function () {
            $(this).parent().find('a:lt(' + ($(this).index() + 1) + ')').addClass('hover');
        },
        mouseout : function () {
            $('.rating  a').removeClass('hover');
        },
        click : function ()
        {
            if($('.rating a').hasClass('selected'))
            {
                // Alert
                $('.rating a').removeClass('selected');
            } 

                $(this).parent().find('a:lt(' + ($(this).index() + 1) + ')').addClass('selected').removeClass('hover');
            typeof callback === 'function' && callback.call( this, ($(this).index() + 1) );
        }
    });
}

Aycan.net ön izleme -> http://calismalar.aycan.net/rating/
Codepen ön izleme -> http://codepen.io/AycanB/pen/LEZjjE

Kaynak -> jQuery Rating Uygulaması