Rating Star [Per Pixel / Per Point]

Rating Per Pixel [click on star at any point]


<span class="rating">
    <i></i>
</span>

CSS


.rating, .rating i {
background:url(https://mfarazali.files.wordpress.com/2016/06/12193388_1197200920295505_3858962691135734153_n.jpg) repeat-x 0 0;
margin-right:3px;
width:80px;
height:16px;
float:left;
vertical-align:top;
cursor:pointer;
}
.rating i{
background:url(https://mfarazali.files.wordpress.com/2016/06/11694998_1197200923628838_6657933242899096109_n.jpg) repeat-x 0 0;
width:auto;
}

JS:

/* Rating Per Pixel */
    $(".rating").on("click", function(e) {
        var pgX = e.pageX,
            crntwd, tgt = $(this);
        crntwd = getWidth(tgt, pgX);
        $(this).find("i").width(crntwd);

        function getWidth(ex, xCo) {
            return Math.floor(Math.sqrt(Math.pow(xCo - (ex.offset().left), 2)));
        }
    });

 

Rating Per Point [hover it then click to select]

<ul class="ratingPoint">
	<li class="on"></li>
	<li class="on"></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

CSS


.ratingPoint li {
float:left;
width:16px;
height:16px;
background:url(https://mfarazali.files.wordpress.com/2016/06/12193388_1197200920295505_3858962691135734153_n.jpg) repeat-x 0 0;
margin-right:3px;
cursor:pointer;
}

.ratingPoint li.on,.ratingPoint li.onb {
background:url(https://mfarazali.files.wordpress.com/2016/06/11694998_1197200923628838_6657933242899096109_n.jpg) repeat-x 0 0;
}

JS:

/* Rating Per point */
    $('.ratingPoint').on('mouseover', 'li', function() {
        var ind = $(this).index();
        $(this).removeClass('on').siblings().removeClass('on');
        $(this).addClass('on').prevAll().addClass('on');
    }).on('mouseout', function() {
        $(this).children('li').removeClass('on');
    }).on('click', 'li', function() {
        $(this).removeClass('onb').siblings().removeClass('onb');
        $(this).addClass('onb').prevAll().addClass('onb');
    });

 

Live Demo

 

Advertisements

2 thoughts on “Rating Star [Per Pixel / Per Point]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s