Visualizzazione dei risultati da 1 a 2 su 2
  1. #1
    Utente di HTML.it
    Registrato dal
    Oct 2008
    Messaggi
    81

    [Jquery] far comparire un elemento a destra e sinistra della pagina

    Ciao, come da titolo avrei bisogno di capire come posso far comparire un elemento a sinistra e/o a destra dello screen all'avvicinarsi del mouse.

    Ho immaginato la cosa così:

    1) quando il mouse si avvicina al margine destro compare l'elemento a destra (un menu animato da un slide toggle);
    2) quando mi allontano con il mouse dal margine destro verso la parte centrale dello screen l'elemento a destra scompare;
    3) se mi riavvicino col mouse a destra l'elemento a destra ricompare, oppure se mi avvicino al margine sinistro, compare un altro elemento a sinistra che scomparirà non appena mi allontano da esso.

    In pratica ho un elemento attivo a destra e a sinistra dello screen, mentre la parte centrale è una "zona morta".

    Qualcuno ha qualche consiglio?

    Grazie,
    f

  2. #2
    Utente di HTML.it
    Registrato dal
    Oct 2008
    Messaggi
    81
    Risolto da me:

    codice:
    //trova distanze del mouse a sx e dx
    function SxDx() {
     $("#wrapper").mousemove(function(e) {
    	var wScreen = $(window).width();
    	var offset = $(this).offset();
    	//distanza del mouse a sx
    	var relativeL = (e.pageX - offset.left);
    	//distanza del mouse a dx
    	var relativeR = (wScreen - relativeL);
    	
    	//alert(wScreen);
    	//alert("left: " + relativeL + "  right: " + relativeR);
    	
    	if(relativeL<200){
    		$("#menu").show();
    	} else {
    		$("#menu").hide();
    	};
    	
    	if(relativeR<200){
    		$(".icone").show();
    	} else {
    		$(".icone").hide();
    	};
     });
    };
    
    $(window).resize(function() {
    	resize();
    	SxDx();
    });
    window.onload = function(){	
    	resize();
    	SxDx();
     };
    Funziona, ma non so quanto sia buona questa soluzione: mi sembra che impegni molte risorse...

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.