Moviumentação de Elemento

[eronventer 2]

Ae galera!

 

Tenho um pequeno script que ao executar o "mouseover" na imagem uma div flutuante aparece sobre ela, e de acordo com a movimentação

do mouse na imagem a div se movimenta também. Porém se a div estiver muito próxima do fim da janela do navegador, é gerado o scroll

na janela e a div flutuante não aparece por completo.

 

Eu precisaria fazer um calculo e virar de posição a div flutuante para não ocorrer esse problema com o scroll e ainda de cortar o

conteúdo dessa div flutuante...como eu poderia fazer isso?

 

$(".divProdutosImagem").each(function(){
		  
    var foto = $(this).parent().attr("foto");
    var prod = $(this).parent().attr("id");
    
    $(this).mouseover(function(){
        $("#divProdutoVoando").show();
        $("#divProdutoVoando #fotoProduto").attr("src", foto);
    });
		  
    $(this).mousemove(function(e){
        $("#divProdutoVoando").css({top: (posY+5),left: (posX+5)}); //Aki acontece a movimentação
    });
		  
    $(this).mouseout(function(){
        $("#divProdutoVoando").hide();
        $("#divProdutoVoando #fotoProduto").attr("src", "_imagens/ico_nada.gif");
    });

});

[Roniesds 0]

Talvez se limitar a div e deixa-la movimentar até 10px do tamanho total da pagina, adiantaria?

 

$(this).mousemove(function(e){
    
    // Tamanho em px da pagina | -10 para limitar a div até 10px do fim da pagina
    var tamanho = $('body').width() - 10;

    // Posicao do elemento em px.
    var posicao = $('#divProdutoVoando').offset().left + $('#divProdutoVoando').width();

   if(posicao <= tamanho)
   {
       $("#divProdutoVoando").css({top: (posY+5),left: (posX+5)});
   }   

 });

Aki eu limitei somente na largura.

 

Não sei se vai adiantar muito, qualquer coisa da pra tentar de outra maneira.