Javascript: Ingrandisci al passaggio del mouse SENZA Jquery o plug-in

L'ho cercato dappertutto per settimane e semplicemente non riesco a trovare qualcosa che mi dica cosa sto facendo male o come procedere. L'obiettivo è creare una funzione simile allo zoom di Amazon sul passaggio del mouse per i prodotti con immagini di piccole dimensioni.Javascript: Ingrandisci al passaggio del mouse SENZA Jquery o plug-in

Attualmente non riesco a capire come procedere, anche se sono consapevole che sono necessarie due immagini, una nella dimensione "ingrandita" e una nella dimensione "ingrandita". Non sto utilizzando Jquery - Non riesco a installarlo o altri plug-in al sito web tramite la richiesta del mio datore di lavoro. Fondamentalmente sto chiedendo la risposta più difficile, e mi scuso per quello in anticipo. Devo farlo da un graffio moderato. Avviso: Sono uno studente di programmazione. Prendilo come vuoi

Ho uno script HTML e CSS, e poiché in realtà non abbiamo un IDE, lo sto facendo nella sezione del progetto di codecademy, altrimenti dovrei programmarlo completamente dal vivo. È possibile trovare il mio codice here, ma inserirò anche il codice di seguito, in quanto quel collegamento è destinato ad avere un codice che cambia poiché utilizza il salvataggio procedurale.

Nota: inizialmente l'avevo in modo che la casella grigia seguisse il mio mouse al centro relativo. Stava tremolando mentre si muoveva, ma stava funzionando. Attualmente anche se è deciso di non farlo, almeno sul mio computer di lavoro. Non l'ho testato sul mio personal computer.

Modifica: il codice funziona sul mio Surface Pro 3, sebbene segua il mouse dell'immagine (che è temporaneo e qualcosa di casuale che ho afferrato). Io non so perché il codice non funziona sul mio computer di lavoro, anche se è probabile perché è una versione per Macintosh OSX 10.6.8 ...

codice HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <link rel='stylesheet' href='style.css'/> 
    <script src='script.js'></script> 
</head> 
<body> 

<img id="imgZoom" onmousemove="zoomIn()" onmouseout="zoomOut()" src="http://ginger-mum.com/wp-content/uploads/2015/10/3633-1269758855-0da5042c33400a811a5d766be4579cb8.jpg"> 
<div id="overlay" onmousemove="zoomIn()"></div> 
</body> 
</html>

CSS codice:

#imgZoom { 
    height: 300; 
} 

#overlay { 
    visibility: hidden; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    width:20%; 
    height:20%; 
    padding: 25px; 
    border: 5px solid gray; 
    background-color: white; 
    opacity:0.4; 
    text-align:center; 
    z-index: 1000; 
}

codice Javascript:

function zoomIn() 
{ 
    var element = document.getElementById("overlay"); 
    element.style.visibility = "visible"; 

    var x = event.clientX;  // Get the horizontal coordinate 
    var y = event.clientY;  // Get the vertical coordinate 

    element.style.top = y - 80; 
    element.style.left = x - 80; 
} 

function zoomOut() 
{ 
    var element = document.getElementById("overlay"); 
    element.style.visibility = "hidden"; 
}

fonte

2015-11-19 Kitfoxpup

jQuery non richiede installazione è proprio come il caricamento o Aggiunta file sul server web o se non è possibile eseguire tale tag di script di inserimento con src da jQuery CDN o dal suo sito Web '' – CY5

@ CY5 Scusaci, I figu il rosso JQuery richiedeva alcune installazioni, specialmente se si desidera utilizzare cose come Bootstrap.Dove frequento la scuola per la programmazione, la maggior parte dei miei istruttori ci ha avvertito di non fare affidamento su JQuery, in quanto è più una stampella che una risposta infallibile - non che JQuery sia una brutta cosa, è proprio come uno studente che sto cercando di imparare metodo. Suppongo che sia principalmente il motivo per cui non voglio usarlo, così da poter imparare come farlo manualmente. In realtà sono principalmente un programmatore per i videogiochi, quindi il codice incredibilmente difficile che non ha aiutanti di solito è quello che faccio tutto il giorno – Kitfoxpup

Sono d'accordo con te dal momento che stai imparando che hai ragione di sapere come sono fatte le cose da lì core ma in futuro ricorda che reinventare la ruota è brutto in cui lavori nel vincolo temporale se puoi farlo facilmente con qualche strumento, perché non sai quando le tue cose si romperanno – CY5

si può solo farlo giocando background-position al passaggio del mouse semplicemente spostando background-position al passaggio del mouse DEMO

function zoomIn(event) { 
 
    var element = document.getElementById("overlay"); 
 
    element.style.display = "inline-block"; 
 
    var img = document.getElementById("imgZoom"); 
 
    var posX = event.offsetX ? (event.offsetX) : event.pageX - img.offsetLeft; 
 
    var posY = event.offsetY ? (event.offsetY) : event.pageY - img.offsetTop; 
 
    element.style.backgroundPosition = (-posX * 4) + "px " + (-posY * 4) + "px"; 
 

 
} 
 

 
function zoomOut() { 
 
    var element = document.getElementById("overlay"); 
 
    element.style.display = "none"; 
 
}

#overlay { 
 
    border: 1px solid black; 
 
    width: 200px; 
 
    height: 200px; 
 
    display: inline-block; 
 
    background-image: url('http://ginger-mum.com/wp-content/uploads/2015/10/3633-1269758855-0da5042c33400a811a5d766be4579cb8.jpg'); 
 
    background-repeat: no-repeat; 
 
}

<img id="imgZoom" width="200px" height="200px" onmousemove="zoomIn(event)" onmouseout="zoomOut()" src="http://ginger-mum.com/wp-content/uploads/2015/10/3633-1269758855-0da5042c33400a811a5d766be4579cb8.jpg"> 
 
<div id="overlay" onmousemove="zoomIn(event)"></div>

fonte

2015-11-19 18:40:35 CY5

Questo sembra fantastico, proverò anche a dare una possibilità. Entrambe le opzioni che ho ricevuto finora sono fantastiche! – Kitfoxpup

Ho provato il tuo codice @ CY5, ma sto ottenendo un quadrato nella parte inferiore dell'immagine e l'immagine ingrandita è statica e mostra la parte in alto a destra dell'immagine reale. –

questo funziona per me: (Qui è un JSFiddle)

#imgZoom { 
    height: 300; 
} 
img#imgZoom:hover { 
    position: relative; 
    -webkit-transform: scale(1.5); 
    -ms-transform: scale(1.5); 
    -o-transform: scale(1.5); 
    transform: scale(1.5); 
    z-index: 1000; 
}

È inoltre possibile aggiungere questo per un effetto di transizione cool:

* { 
    -webkit-transition: all 0.5s ease-in-out; 
    -moz-transition: all 0.5s ease-in-out; 
    -ms-transition: all 0.5s ease-in-out; 
    -o-transition: all 0.5s ease-in-out; 
    transition: all 0.5s ease-in-out; 
}

* Inoltre, è possibile applicare la stessa logica non solo per immagini, ma anche per div.

fonte

2015-11-19 18:09:48 Amit

Ora ci provo! – Kitfoxpup

Ho aggiunto un JSFiddle se vuoi vederlo dal vivo. – Amit

Questo è incredibilmente utile. A parte il fatto che si rifiuta di uscire dalla mia parte, sembra molto bello e potrebbe essere tutto ciò di cui ho bisogno. Lo gestirò dal mio datore di lavoro e vedrò cosa pensa! Grazie! – Kitfoxpup

Javascript: Ingrandisci al passaggio del mouse SENZA Jquery o plug-in

risposta

Problemi correlati