Javascript: Przybliż myszką JUŻ BEZ JQuery lub wtyczek.

Szukałem tego wszędzie od tygodni, a ja po prostu nie mogę znaleźć czegoś, co by mi powiedziało, co robię źle, a nawet jak postępować. Celem jest stworzenie funkcji podobnej do zbliżenia Amazona na mouseover dla produktów z małymi obrazami.Javascript: Przybliż myszką JUŻ BEZ JQuery lub wtyczek.

Obecnie nie mam pojęcia, jak postąpić, chociaż zdaję sobie sprawę, że będę potrzebować dwóch obrazów - jednego w rozmiarze "powiększonym" i jednego w "pomniejszonym". Nie używam Jquery - Nie mogę zainstalować ani żadnych wtyczek do strony internetowej na żądanie mojego pracodawcy. Zasadniczo pytam o trudniejszą odpowiedź i przepraszam za to z góry. Muszę to zrobić od umiarkowanego zadrapania. Ostrzeżenie: Jestem uczniem programowania. Weź to tak, jak chcesz.

Mam skrypt HTML i CSS, a ponieważ nie mamy tutaj IDE, robię to w sekcji projektu codecademy, w przeciwnym razie musiałbym zaprogramować to całkowicie na żywo. Możesz znaleźć mój kod here, ale również opublikuję poniższy kod, ponieważ ten link będzie musiał zmienić kod, ponieważ używa on zapisu proceduralnego.

Uwaga: Pierwotnie miałem to tak, że szara skrzynka podążała za myszą w odpowiednim centrum. Migotało, gdy się poruszało, ale działało. Obecnie jednak postanowiliśmy tego nie robić, przynajmniej na moim komputerze roboczym. Nie testowałem tego na moim komputerze osobistym.

Edytuj: Kod działa na moim komputerze Surface Pro 3, ale działa podążając za myszą obrazu (co jest tymczasowe i coś przypadkowego złapałem). Nie jestem pewien, dlaczego kod nie działa na moim komputerze w pracy, choć jest to prawdopodobne, bo to Macintosh OSX wersja 10.6.8 ...

HTML kod:

<!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 Kod:

#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; 
}

kod 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"; 
}

Źródło

2015-11-19 Kitfoxpup

jQuery nie wymaga instalacji, podobnie jak jego przesyłania lub dodanie pliki na serwerze sieciowym lub jeśli nie możesz tego zrobić, wstaw tag skryptu z src z jQuery CDN lub jego strony internetowej '' – CY5

@ CY5 Przepraszam za to, ja figu czerwony JQuery wymagał instalacji, szczególnie jeśli chcesz używać rzeczy takich jak Bootstrap.Tam, gdzie uczęszczam do szkoły na programowanie, większość moich instruktorów ostrzega nas, abyśmy nie polegali na JQuery, ponieważ jest to bardziej kuli niż pewna odpowiedź - nie to, że JQuery jest złą rzeczą, to tak jak student, próbuję nauczyć się w pełni metoda. Przypuszczam, że to głównie powód, dla którego nie chcę go używać, abym mógł nauczyć się, jak zrobić to ręcznie. W gruncie rzeczy jestem głównie programistą gier wideo, więc absurdalnie trudny kod, który nie ma pomocników, zwykle robię to przez cały dzień. – Kitfoxpup

Zgadzam się z tobą, ponieważ uczysz się, że masz prawo wiedzieć, jak rzeczy są robione z rdzenia, ale w przyszłości pamiętaj, że ponowne wymyślanie koła jest złe, gdy pracujesz w ograniczeniu czasowym, jeśli możesz to łatwo zrobić za pomocą jakiegoś narzędzia, bo nie wiesz kiedy twoje rzeczy się zepsują – CY5

można po prostu to zrobić grając background-position po najechaniu myszą po prostu przesuwając background-position po najechaniu myszą 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>

Źródło

2015-11-19 18:40:35 CY5

To wygląda fantastycznie, postaram się również to zrobić. Obie opcje, które do tej pory otrzymałem, są fantastyczne! – Kitfoxpup

Próbowałem twojego kodu @ CY5, ale dostaję kwadrat na dole obrazu, a powiększony obraz jest statyczny i pokazuje górną prawą część rzeczywistego obrazu. –

Działa to dla mnie: (Oto 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; 
}

Można również dodać to na chłodnym efektu przejścia:

* { 
    -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; 
}

* Ponadto, można zastosować tę samą logikę nie tylko dla obrazów, ale także dla elementów div.

Źródło

2015-11-19 18:09:48 Amit

Spróbuję teraz! – Kitfoxpup

Dodałem JSFiddle, jeśli chcesz go zobaczyć na żywo. – Amit

To niezwykle pomocne. Poza tym, że odmawia przejścia na mój koniec, wygląda bardzo ładnie i może w rzeczywistości jest wszystkim, czego potrzebuję. Poprowadzę to przez mojego pracodawcę i zobaczę, co myśli! Dziękuję Ci! – Kitfoxpup

Javascript: Przybliż myszką JUŻ BEZ JQuery lub wtyczek.

Odpowiedz

Powiązane problemy