Eseguire una panoramica di un’immagine grande usando il mouse, iniziando dal centro

Sto usando il codice postato nella risposta qui per eseguire il pan di una grande immagine usando il mouse, posizionata in un div al di sotto di un’altra immagine con trasparenza. Non è necessario zoomare. Il codice funziona correttamente per me, tranne per il fatto che la panoramica inizia dall’angolo in alto a sinistra dell’immagine grande, e voglio che inizi dal punto centrale, e quindi esegui la panoramica in tutte le direzioni. Non ne so abbastanza dei calcoli necessari per farlo, quindi apprezzerei davvero alcuni suggerimenti su come risolverlo o, in alternativa, cosa dovrei fare per specificare un punto di partenza.

Il jQuery è:

var clicking = false; var previousX; var previousY; $("#scroll").mousedown(function(e) { e.preventDefault(); previousX = e.clientX; previousY = e.clientY; clicking = true; }); $(document).mouseup(function() { clicking = false; }); $("#scroll").mousemove(function(e) { if (clicking) { e.preventDefault(); var directionX = (previousX - e.clientX) > 0 ? 1 : -1; var directionY = (previousY - e.clientY) > 0 ? 1 : -1; $("#scroll").scrollLeft($("#scroll").scrollLeft() + (previousX - e.clientX)); $("#scroll").scrollTop($("#scroll").scrollTop() + (previousY - e.clientY)); previousX = e.clientX; previousY = e.clientY; } }); $("#scroll").mouseleave(function(e) { clicking = false; }); 

L’html è:

 

Il css è:

 #scroll { width: 580px; height: 620px; overflow: hidden; } .background { width: 100%; height: 100%; } .overlay { width: 100%; height: 100%; position: absolute; pointer-events: none; } 

Mi scuso se questo è davvero ovvio – non sono riuscito a trovare nulla che avrebbe risposto alla mia domanda, ma potrebbe non aver cercato la cosa giusta.

Poiché la risposta a cui si fa riferimento utilizza lo scorrimento su un div con overflow:hidden , è sufficiente scorrere il div verso il punto di partenza corretto. Puoi calcolarlo sottraendo la larghezza dell’immagine dalla larghezza del div. Questo ti dà lo spazio marginale su entrambi i lati del div, quindi dobbiamo dividerlo per due.

calcoli

Fai lo stesso con le altezze per trovare il margine superiore, quindi scorri semplicemente il tuo div in quella posizione usando scrollLeft() jQuery e scrollLeft() .

jsFiddle

Credo che puoi farlo funzionare per dispositivi mobili utilizzando gli eventi tattili. Non sono sicuro che sia necessario un touch-end e un equivalente per il muso, ma sarebbe qualcosa del genere:

 $(document).ready(function(){ var $container = $("#scroll"); var $img = $("#scroll img"); var cHeight = $container.height(); var cWidth = $container.width(); var iHeight = $img.height(); var iWidth = $img.width(); var top = (iHeight - cHeight) / 2; var left = (iWidth - cWidth) / 2; $container.scrollLeft(left); $container.scrollTop(top); }); var clicking = false; var previousX; var previousY; $("#scroll").bind('touchstart', function(e) { e.preventDefault(); previousX = e.touches[0].clientX; previousY = e.touches[0].clientY; clicking = true; }); /* $(document).bind('touchend', function() { clicking = false; }); */ $("#scroll").bind('touchmove', function(e) { if (clicking) { e.preventDefault(); var directionX = (previousX - e.touches[0].clientX) > 0 ? 1 : -1; var directionY = (previousY - e.touches[0].clientY) > 0 ? 1 : -1; container.scrollLeft(container.scrollLeft() + (previousX - e.touches[0].clientX)); container.scrollTop(container.scrollTop() + (previousY - e.touches[0].clientY)); previousX = e.touches[0].clientX; previousY = e.touches[0].clientY; } }); 

jsFiddle (il violino non funziona a meno che tu non riesca in qualche modo a simulare il mobile – non sono sicuro di come)