$rank-point

by mtambulut

HTML

<div class="content-star-container mt10 @(isSeasonDesign ? "season-design" : "")">
                            <div class="content-star-cover">
                                <div class="star-container">
                                    <div class="star white">
                                        <div class="star red" style="width: @Model.Default.Score%"></div>
                                        <div class="star hover" style="width: 0%;"></div>
                                    </div>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                        </div>

CSS

.page-container.moviedetail .general-info-area .content-star-container .star-container {float: left;margin-left: -2px;padding-top: 5px;width: 100px;}
.page-container.moviedetail .general-info-area .content-star-container > span {float: right;font-family: Roboto;font-size: 14px;font-weight: normal;font-style: normal;font-stretch: normal;line-height: normal;letter-spacing: normal;text-align: right;color: #ffffff;padding: 6px 0;}
.page-container.moviedetail .general-info-area .content-star-container .star-container .star {height: 23px;display: block;background: url('/Assets/images/smallratingstars_series.png') repeat-x;cursor:pointer;}
.page-container.moviedetail .general-info-area .content-star-container .star-container .star.red {background-position: 0px -19px;width: 109px;margin: 0;}
.page-container.moviedetail .general-info-area .content-star-container .star-container .star.white {background-position: 0 2px;}
.page-container.moviedetail .general-info-area .content-star-container .content-star-cover .star.hover {background-position: 0 -21px !important;margin-top: -21px;width: 0%;}
.page-container.moviedetail .general-info-area .content-star-container .content-star-cover {width: 100px;}

JavaScript

function setRatingEvents() {
    var container = $("div.content-star-container").not(".disabled");

    if (container == null || container.length === 0)
        return;

    var cover = $(".content-star-cover");
    var position = cover.offset();
    var star = cover.find(".star");
    var width = star.width();
    var hoverStars = star.find(".hover");
    var rate = 0;
    cover.mousemove(function (e) {
        var mouseDivPosition = e.pageX - position.left;
        var percent = (mouseDivPosition * 100) / width;
        rate = Math.ceil(percent / 20);
        hoverStars.css("width", rate * 20 + "%");
        //hoverStars.css("width", percent + "%"); ondalıklı sayı oylaması için kullanabiliriz
    });

    cover.mouseleave(function (e) {
        rate = 0;
        hoverStars.css("width", "0%");
    });

    cover.click(function () {
        if (busyRating)
            return;

        ViewHelper.showOverlay();
        ViewHelper.showLoading();
        busyRating = true;

        $.post("/content/ratingaction", AddAntiForgeryToken({ id: id, rating: rate }), function (response) {
            ViewHelper.hideOverlay();
            ViewHelper.hideLoading();
            busyRating = false;
            var title = response.IsSuccessful ? PopUpTitle.Information : PopUpTitle.Warning;
            PopupMessage.Pop("rating", title, response.message, PopUpFooterButton.Ok);
        });
    });
};