Luis position

by cintia_rodrigues

HTML

<div class="faceContainer">
    
    <!--<div class="face"><img src="http://lsd-testes.joseluisgouveia.com/luis-broegas/frontend/contents/_3.jpg"></div> -->
    <div class="face"><img src="http://lsd-testes.joseluisgouveia.com/luis-broegas/frontend/contents/_2.jpg"></div>
    <div class="face"><img src="http://lsd-testes.joseluisgouveia.com/luis-broegas/frontend/contents/_1.jpg"></div>
    <div class="face selected"><img src="http://lsd-testes.joseluisgouveia.com/luis-broegas/frontend/contents/0.jpg"></div>
    <div class="face"><img src="http://lsd-testes.joseluisgouveia.com/luis-broegas/frontend/contents/1.jpg"></div>
    <div class="face"><img src="http://lsd-testes.joseluisgouveia.com/luis-broegas/frontend/contents/2.jpg"></div>
    <!-- <div class="face"><img src="http://lsd-testes.joseluisgouveia.com/luis-broegas/frontend/contents/3.jpg"></div> -->
    
                    
</div>

<div id="debug" style="width: 300px; height: 45px; background-color: #000; color: #fff; position: fixed; z-index: 1000; font-size: 20px;">teste</div>

CSS

.faceContainer
{
    width: 400px;
    height: 361px;
    background-color: aqua;
    margin-left: 40px;
}
.faceContainer .face
{
    position: absolute;
    
}
.faceContainer .face.selected
{
    display: block;
}

JavaScript

var totalFaces;
$(document).ready(function(){
    totalFaces = $('.face').length;
    
    $('.faceContainer').mousemove(function(e)
    {
        var x = e.pageX - this.offsetLeft;
	    var y = e.pageY - this.offsetTop;
        var percentage =  x * 100 / $('.faceContainer').width();
       
        var imagemActual = Math.round(percentage * (totalFaces-1) / 100);
        $('.face').css('z-index', 0);
        $('.face:eq('+imagemActual+')').css('z-index', 1);
        $('#debug').html(imagemActual);
    }); 
})