Смайлик-слайдер онлайн урок.


Требуется jQuery и пользовательский интерфейс jQuery для реального ползунка. Лицо выполнено из элементов, сделанных в окружности с радиусом границы. Рот, указывающий уровень счастья, - это другой круг, только что обрезанный до размера с родительским элементом со скрытым переполнением.

<div id="slider"></div>

<div id="face">
<div id="mouth-box">
<div id="mouth" class="straight"></div>
</div>
</div>

#face { 
width: 100px;
height: 100px;
position: relative;
border: 2px solid black;
border-radius: 50px;
margin: 20px auto;
}

#face:before, #face:after {
position: absolute;
content: "";
width: 10px;
height: 10px;
top: 30px;
border-radius: 10px;
background: black;
}
#face:before {
left: 30px;
}
#face:after {
left: 60px;
}

#mouth-box {
width: 60px;
height: 20px;
left: 20px;
top: 60px;
overflow: hidden;
background: white;
position: relative;
}

#mouth {
width: 60px;
height: 60px;
border-radius: 30px;
border: 2px solid black;
position: absolute;
top: 0;
left: 0;
}

#mouth.straight {
height: 0px !important;
top: 7px !important;
border-width: 1px;
bottom: auto !important;
}

var newWidth,
mouth = $("#mouth");

$( "#slider" ).slider({
slide: function(event, ui) {

if (ui.value > 51 ) {

mouth.css({ bottom: 0, top: "auto" });

newWidth = 160 - ui.value;

mouth.css({
width : newWidth,
height : newWidth,
"border-radius" : newWidth / 2,
left : -25 + ((ui.value-50) / 2)
})
.removeClass("straight");

} else if ((ui.value > 48) && (ui.value < 52)) {

mouth.addClass("straight");

} else {

mouth.css({ top: 0, bottom: "auto" });

newWidth = ui.value + 60;

mouth.css({
width : newWidth,
height : newWidth,
"border-radius" : newWidth / 2,
left : -ui.value / 2
})
.removeClass("straight");

}

},
value: 50
});