Hogyan hozhat létre nagyító hatásot egy webhelyen

Tartalom

• irányok
• tippek
• figyelmeztetés

A webhely látogatóinak lehetőséget ad arra, hogy részletesen megnézhessék a képeket. Egy kis CSS, JavaScript és jQuery hozzáadása a kompozícióhoz létrehozhat egy nagyító hatását, mivel az egérmutató egy kép fölé mozog az oldalon. Ez a hatás egy kis ablak létrehozásával érhető el, amely megjeleníti a háttérképet, amikor az egérmutató az előtérben megjelenített kép fölé mozog.

irányok

Adja meg a webhely látogatóit a kép "közeli" részének (Márka X Képek / Brand X Képek / Getty Images)

1. Tartsa be a JavaScript és a jQuery-t a HTML kód "fej" részébe az utasításokkal:

   Ebben a példában a jQuery könyvtár a HTML alapértelmezett könyvtárában található.

2. Helyezzen be egy CDATA-címkét, hogy megakadályozza a böngésző megpróbálja elemezni a jQuery-operátorokat:

3. Állítsa be a képek megjelenítéséhez használt magasság- és szélességi változókat:

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

4. Állítsa be a nagyítási funkció elindításához szükséges feltételeket. Híváskor ez a funkció az egérmutatót a legnagyobb fedett kép körkörös megjelenítőjével helyettesíti, amikor a felhasználó az oldalon látható kisebb kép fölé mozog. Hozza létre ezt a példányt a kóddal:

   
   

   $ (dokumentum). már (funkció () {

   $ ("# myimage"). mouseover (funkció (e) {$ (dokumentum) .mousemove (myMM); $ ("# glass"). fadeIn ('fast');

   });

5. Állítsa be a nagyítási funkciót és a véglegesítési paramétereket. Ebben a példában a rejtett képet a kisebb kép méretének kétszerese növeli, és a nagyítás ablak eltűnik, amikor az egérmutató a kisebb kép határain kívül mozog. Ezt a kóddal teheti meg:

   funkció myMM (e) {var myImage = $ ("# myimage"); var glassImage = $ ("# glass-image"); var glass = $ ("# glass"); var xs = e.pageX - myImage.offset (). var ys = e.pageY - myImage.offset (). var bx = glassImage.width () / 2 - xsW / w; var by = glassImage.height () / 2 - ysH / h; glass.css ("bal", e.pageX-75-89 + "px") css ("top", e.pageY-75-10 + "px"); glassImage.css ("háttérpozíció", bx + "px" + + + "px"); ha (bx <-W || by <-H || bx> 150 || by> 150) {myImage.unbind ('mousemove', myMM); glass.fadeOut ('gyors'); }}

   
   

6. Zárja be a jQuery "parancsfájlt", és törölje a CDATA elemzőt az utasításokkal:

   // ]]>

7. Állítsa be az oldalelrendezést a CSS-lel a nagyobb háttérkép és a nagyítás ablak határolásához:

   type = "text / css"> #monaimage {margin-left: 200px; } #glass {háttér-ismétlés: nincs ismétlés; háttérpozíció: bal felső; szélesség: 250x; magasság: 170px; padding-top: 10px; párnázott bal: 89px; margin: 0; pozíció: abszolút; kijelző: nincs; } # glass-image {background-image: url ('myImageLarge.jpg'); szélesség: 150px; magasság: 150px; határ-sugár: 75px; -moz-határ-sugár: 75px; háttér-ismétlés: nincs ismétlés; háttérszín: #fff; margin: 0; párnázás: 0; kurzor: nincs; }

8. Írja be a HTML kódot, hogy megjelenítse az oldalt a "test" részben:

   >

   Mozgassa az egeret a kép fölé

   

tippek

• Ez a kód függ a CSS3-tól, hogy kerek nagyítási mezőt hozzon létre, és előfordulhat, hogy nem működik régebbi böngészőkben. A régebbi CSS implementációkkal való visszafelé történő kompatibilitás érdekében állítson be egy téglalap alakú mezőt a "# glass-image" (nagyító) számára.

figyelmeztetés

• A CDATA-címkék nélkül a böngészők megpróbálják elemezni az operátorokat kevesebb, mint "<" és nagyobb, mint ">" HTML-címkékként. A "script" meghibásodások elkerülése érdekében mindig a JavaScript és a jQuery operátorokat használja a CDATA címkékkel.