Hvordan lage et forstørrelsesglass Effekt på et nettsted

January 1

Å gi besøkende til websiden muligheten til å ta en nærmere titt på et bilde krever litt bak-kulissene bildemanipulering. Ved å legge en bit av CSS, Javascript og jQuery til mix kan du skape effekten av et forstørrelsesglass som et musepekeren beveger seg over et bilde på siden din. Denne effekten oppnås ved å lage et lite vindu som viser bakgrunnsbildet når musepekeren beveger seg over bildet som vises i forgrunnen.

Bruksanvisning

1 Ta med Javascript og jQuery i "hodet" -delen av HTML-koden i påstandene:

I dette eksempel er jQuery biblioteket plassert i standard HTML-katalogen.

2 Sett inn en CDATA tag for å hindre nettleserens forsøk på å tolke jQuery operatører:

<! [CDATA [

3 Definer høyde og bredde variabler som brukes for å vise både bilder:

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

4 Sett forholdene som utløser forstørrelsesfunksjon. Når kalt, denne funksjonen erstatter musepekeren med en sirkulær visning av større underliggende bildet når brukeren ruller musen over mindre bilde vises på siden. Lag denne hendelsen med koden:

$ (Document) .ready (function () {

$ ( "# Myimage"). Mouse (funksjon (e) {
$ (Document) .mousemove (myMM);
$ ( "# Glass») fadeIn ( 'fort.');
});

});

5 Definer forstørrelse funksjonsvisnings og slutter parametere. I dette eksemplet er det skjulte bildet forstørret av dobbelt så stor som den mindre bilde og forstørrelsesvinduet forsvinner når musepekeren beveger seg ut av den mindre bilde grenser. Du kan gjøre dette med koden:

funksjon myMM (e) {

Var myImage = $ ( "# myimage");
Var glassImage = $ ( "# glass-image");
Var glass = $ ( "# glass");
Var xs = e.pageX - myImage.offset () venstre;.
Var ys = e.pageY - myImage.offset () øverst.;
Var bx = glassImage.width () / 2 - xs

W / w;
Var med = glassImage.height () / 2 - YS H / h;
glass.css ( "venstre", e.pageX-75-89 + "px") css ( "topp", e.pageY-75-10 + "px.");
glassImage.css ( "background-position", bx + "px" + av + "px");
if (bx <-W || av <-H || bx> 150 || ved> 150) {
myImage.unbind ( 'mousemove', myMM);
glass.fadeOut ( "rask");
}
}

6 Lukk jQuery script og CDATA parser eksklusjon med uttalelser:

//]]>
</ Script>

7 Angi CSS layout for å plassere de større bakgrunnsbildet og forstørrelse vindusrammer med koden:

monaimage {

margin-left: 200px;
}

glass {

background-repeat: no-repeat;
background-posisjon: øverst til venstre;
width: 250px;
høyde: 170 piksler;
padding-top: 10px;
padding-left: 89px;
margin: 0;
position: absolute;
display: none;
}

glass-image {

background-image: url ( 'myImageLarge.jpg');
width: 150px;
height: 150px;
border-radius: 75px;
-moz-border-radius: 75px;
background-repeat: no-repeat;
background-color: #fff;
margin: 0;
padding: 0;
markøren: none;
}
</ Style>
</ Head>

8 Skriv HTML-kode for å vise siden i "kroppen" seksjonen:

<Body>

<P> Flytt musen over bildet </ p>
<Img id = "myimage" title = "Forstørrelse Eksempel" src = "myimageSmall.jpg" alt = "The Big Picture" />
<Div id = "glass"> <div id = "glass-image"> </ div> </ div>

</ Body>

</ Html>

Hint

Denne koden er avhengig av CSS3 for å lage en rund forstørrelse felt og kan ikke fungere på eldre nettlesere. For bakoverkompatibilitet med eldre CSS implementeringer, definere et rektangulært felt for "# glass-bilde."
Uten CDATA koder, nettlesere prøve å analysere mindre enn "<" og større enn ">" operatører som HTML-koder. Alltid surround Javascript og jQuery operatører med CDATA koder for å hindre script feil.