Jak stworzyć efekt szkła powiększającego na stronie internetowej

Zawartość

• Instrukcje
• Jak
• Uwaga

Dawanie odwiedzającym Twojej stronie możliwości szczegółowego obejrzenia obrazu wymaga nieco manipulacji tymi zdjęciami. Dodając do kompozycji trochę CSS, JavaScript i jQuery, możesz stworzyć efekt szkła powiększającego, gdy wskaźnik myszy przesunie się nad obrazem na stronie. Efekt ten uzyskuje się poprzez utworzenie małego okna, które wyświetla obraz tła, gdy wskaźnik myszy przesuwa się nad obrazem wyświetlanym na pierwszym planie.

Instrukcje

Daj odwiedzającym Twoją stronę internetową „zbliżenie” obrazu (Brand X Pictures / Brand X Pictures / Getty Images)

1. Dołącz JavaScript i jQuery w sekcji „head” kodu HTML z instrukcjami:

   W tym przykładzie biblioteka jQuery znajduje się w domyślnym katalogu HTML.

2. Wstaw tag CDATA, aby uniemożliwić przeglądarkom próbę przeanalizowania operatorów jQuery:

3. Ustaw zmienne wysokości i szerokości używane do wyświetlania obrazów:

   var W = 743; var H = 1155; var w = 192; var h = 300;

4. Ustaw warunki, które rozpoczynają funkcję powiększania. Po wywołaniu ta funkcja zastępuje wskaźnik myszy okrężną przeglądarką największego zakrytego obrazu, gdy użytkownik najedzie kursorem na mniejszy obraz pokazany na stronie. Utwórz tę instancję za pomocą kodu:

   
   

   $ (document) .ready (function () {

   $ ("# myimage"). mouseover (funkcja (e) {$ (dokument) .mousemove (myMM); $ ("# glass"). fadeIn ('fast');

   });

5. Ustaw funkcję powiększania i parametry finalizacji. W tym przykładzie ukryty obraz jest powiększany o dwa razy mniejszy obraz, a okno powiększenia znika, gdy wskaźnik myszy przesuwa się poza granice mniejszego obrazu. Możesz to zrobić za pomocą kodu:

   funkcja myMM (e) {var myImage = $ ("# myimage"); var glassImage = $ ("# glass-image"); var glass = $ ("# glass"); var xs = e.pageX - myImage.offset (). left; var ys = e.pageY - myImage.offset (). top; var bx = glassImage.width () / 2 - xsW / w; var by = glassImage.height () / 2 - ysH / h; glass.css („left”, e.pageX-75-89 + „px”). css („top”, e.pageY-75-10 + „px”); glassImage.css („pozycja-tła”, bx + „px” + przez + „px”); if (bx <-W || przez <-H || bx> 150 || przez> 150) {myImage.unbind ('mousemove', myMM); glass.fadeOut („szybko”); }}

   
   

6. Zamknij skrypt „jQuery” i usuń parser CDATA za pomocą instrukcji:

   // ]]>

7. Ustaw układ strony za pomocą CSS, aby ustawić większy obraz tła i obramowanie okna powiększenia za pomocą kodu:

   type = "text / css"> #monaimage {margin-left: 200px; } #glass {powtórz tło: nie powtarzaj; pozycja tła: górny lewy; szerokość: 250px; wysokość: 170px; padding-top: 10px; padding-left: 89px; margines: 0; pozycja: absolutna; wyświetlacz: brak; } # glass-image {background-image: url ('myImageLarge.jpg'); szerokość: 150px; wysokość: 150px; granica-promień: 75px; -moz-border-radius: 75px; powtórz tło: nie powtarzaj; background-color: #fff; margines: 0; dopełnienie: 0; kursor: brak; }

8. Napisz kod HTML, aby wyświetlić stronę w sekcji „treść”:

   >

   Przesuń kursor myszy nad obraz

   

Jak

• Ten kod zależy od CSS3, aby utworzyć okrągłe pole powiększenia i może nie działać w starszych przeglądarkach. Aby zachować kompatybilność wstecz ze starszymi implementacjami CSS, ustaw prostokątne pole dla „# glass-image” (szkło powiększające).

Uwaga

• Bez tagów CDATA przeglądarki próbują analizować operatory mniej niż „<” i większe niż „>” jako znaczniki HTML. Zawsze używaj operatorów JavaScript i jQuery ze znacznikami CDATA, aby uniknąć błędów „skryptowych”.