Форум

Ranetka · #1 (**permalink**) 24.12.2014, 08:46

Всем добрый день!
Пытаюсь реализовать такую тему:
Изначально есть 5 серых звезд, при наведении курсора на какую-либо звезду она и все звезды слева от нее закрашиваются желтым, а в блоке вместо приглашения оценить появляется статус, характеризующий закрашенное количество звезд.
Далее при клике с 1й по 3ю звезду появляется block2, а при клике на 4ю или 5ю - block3
Пока есть вот такой код:
http://jsbin.com/waqibihoha/1/edit?html,css,js,output

Собственно вопрос:
Как к каждой звезде добавить действие, если они у меня реализованы бэкграундом? Или надо было делать звезды через список?

BETEPAH · #2 (**permalink**) 24.12.2014, 08:50

Можно во время клика вычислять смещение курсора от начала блока, но правильнее, имхо, списком сделать.

рони · #3 (**permalink**) 24.12.2014, 11:50

Ranetka,
так?

<!DOCTYPE html>

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

	<script src="https://code.jquery.com/jquery-latest.js" type="text/javascript"></script>

<style>
body{
	padding: 0;
	margin: 0;
	-webkit-user-select: none;
	-moz-user-select: none ;

}


:focus {
	outline: none;
}
.container {
	position:relative;
	color: #FFFFFF;
	width: 600px;
	height: 400px;
	overflow: hidden;
	background-image: url('img/bg.png');
	background-repeat: no-repeat;
}

div {
	font-family: Tahoma, sans-serif;
	font-size: 14px;
	margin: 0;
	padding: 0;
	text-align: center;
}
p {margin: 0;}


.headline {
	color: #BBBDDD;
	font-size: 28px;
	margin-top: 25px;
}


#productRate {
	background: url(https://www.benefity.cz/images/ikony/ico_repeat.png) repeat-x;
	width: 390px;
	height: 82px;
	position: relative;
	margin: 20px auto;
	overflow: hidden;
}
#productRate div {
	background: url(https://www.benefity.cz/images/ikony/ico_repeat.png) repeat-x left bottom;
	width: 0;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	cursor: pointer;
}
#productRate span {
	display: block;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	background: url(https://www.benefity.cz/images/ikony/ico_repeat.png) left bottom;
	width: 0;
	cursor: pointer;
}


.block {
	color: #FFD482;
	font-size: 18px;
	background: #000;
	background-repeat: no-repeat;
	width: 388px;
	height: 72px;
	line-height: 70px;
	margin: 0 auto;
}


.block2, .block3 { display: none;}
</style>
</head>

<body scroll="no">
	<div class="container">
		<p class="headline">Оцените нас!</p>


<div id="productRate">
    <div></div>
</div>

		<p class="block">Нажмите, что бы оценить</p>
		<p class="block block2">Обратитесь в службу поддержки</p>
		<p class="block block3">Спасибо!</p>


    </div>
<script>
jQuery(document).ready(function() {
    jQuery("#productRate").hover(function() {
        jQuery(this).append("<span></span>")
    }, function() {
        jQuery(this).find("span").remove();
        jQuery(".headline").text("Оцените нас!")
    });
    var rating;
    jQuery("#productRate").click(function() {
        var bl = rating > 3 ? ".block3" : ".block2";
        jQuery("#productRate").off("mouseenter mouseleave mousemove click");
        jQuery(bl).fadeIn()
    });
    jQuery("#productRate").mousemove(function(e) {
        var left = e.pageX - jQuery(this).offset().left;
        rating = Math.round(left * 5 / jQuery(this).width());
        jQuery(".headline").text(rating)
        jQuery(this).find("span").eq(0).css("width", rating * 82 + "px");

    })
});
</script>
</body>
</html>

BETEPAH · #4 (**permalink**) 24.12.2014, 17:36

рони,
Предполагаю, что на планшете будут сложности с этим кодом

Ranetka · #5 (**permalink**) 24.12.2014, 17:41

На планшетах не предполагается показывать это окно, так что тут всё ок.

Только вот не понятно, как вместо цифр при наведении выводить текст, причем на каждую звезду разный.

рони · #6 (**permalink**) 24.12.2014, 17:58

Ranetka,

строка 128

jQuery(".headline").text(["a","s","d","f","g","h"][rating])

Форум

Справочник

Discord чат

Курсы javascript