Hoe maak je een vergrootglas Effect op een Website



Geven bezoekers aan uw Web-pagina een kans om te nemen een kijkje op een afbeelding vereist een beetje van achter de schermen de beeldmanipulatie. Door een beetje van CSS, JavaScript en jQuery toe te voegen aan de mix kunt u het effect van een vergrootglas als een muisaanwijzer beweegt boven een afbeelding op uw pagina. Dit effect wordt bereikt door het maken van een klein venster dat de achtergrondafbeelding wordt weergegeven wanneer de muisaanwijzer boven de afbeelding weergegeven op de voorgrond.

Instructies

1

JavaScript en jQuery deelnemen aan de "head"-sectie van uw HTML-code met de verklaringen:

< script type = "text/javascript" src="jquery.js" >< / script >
< script type = "text/javascript" >< / script >

In dit voorbeeld de bibliotheek jQuery ligt in de standaardmap voor HTML.

2

Een CDATA-code om te voorkomen dat de browser pogingen om parse jQuery exploitanten invoegen:

<! [CDATA [

3

De hoogte en breedte variabelen gebruikt voor het weergeven van beide afbeeldingen definiƫren:

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

4

Stel de criteria die leiden de vergroting functie tot. Wanneer aangeroepen, vervangt deze functie de muisaanwijzer met een cirkelvormige vertoning van de grotere onderliggende afbeelding wanneer de gebruiker de muis over de kleinere afbeelding op de pagina getoond rolt. Maak deze gebeurtenis met de code:

{$(document).ready(function()}

{$("#myimage").mouseover(function(e)}
$(document).mousemove(myMM);
$("#glass").fadeIn('fast');
});

});

5

Definiƫren van de vergroting functie display en eindigend parameters. In dit voorbeeld, de verborgen afbeelding wordt vergroot door tweemaal de grootte van de kleinere afbeelding en het vergrotingsvenster verdwijnt wanneer de muisaanwijzer uit de kleinere afbeelding grenzen beweegt. U kunt dit doen met de code:

functie myMM(e) {}

var myImage = $("#myimage");
var glassImage = $("#glass-afbeelding");
var glas = $("#glass");
var xs = e.pageX - myImage.offset () .left;
var ys = e.pageY - myImage.offset () .top;
var bx = glassImage.width () / 2 - xsW/w;
var door = glassImage.height () / 2 - ys
H/h;
Glass.CSS("left",e.pageX-75-89+"px").CSS("Top",e.pageY-75-10+"px");
glassImage.css ("achtergrond-positie", bx + "px" + met + "px");
Als (bx <-W || door <-H || bx > 150 || door > 150) {}
myImage.unbind('mousemove',myMM);
glass.fadeOut('fast');
}
}

6

Sluit de jQuery script en CDATA parser uitsluiting met de verklaringen:

]] >
< / script >

7

Stel uw CSS pagina-indeling om te plaatsen de grenzen van het grotere achtergrond afbeelding en vergroting de venster met de code:

< stijl type = "text/css" >

{monaimage}

marge-linkerzijde: 200px;
}

glas {}

achtergrond-herhaling: geen-herhaling;
achtergrond-positie: linksboven;
breedte: 250px;
hoogte: 170px;
opvulling-top: 10px;
opvulling-links: 89px;
marge: 0;
positie: absoluut;
weergeven: none;
}

glas-afbeelding {}

Background-Image:URL('myImageLarge.jpg');
breedte: 150px;
hoogte: 150px;
border-radius: 75px;
-moz-grens-radius: 75px;
achtergrond-herhaling: geen-herhaling;
achtergrondkleur: #fff;
marge: 0;
opvulling: 0;
cursor: none;
}
< / style >
< / head >

8

Schrijven van de HTML-code om uw pagina in de sectie "body" weer te geven:

< body >

< p > verplaatsen muis over de afbeelding < /p >
< img id = "myimage" title = "Vergroting voorbeeld" src="myimageSmall.jpg" alt = "The Big Picture" / >
< div id = "glas" >< div id = "glas-image" >< / div >< / div >

< / body >

< / html >

Tips & waarschuwingen

  • Deze code berust op CSS3 om een ronde vergroting veld te maken en kan niet werken op oudere browsers. Voor achterwaartse compatibiliteit met oudere CSS implementaties, definieert een rechthoekig veld voor "#glass-image."
  • Zonder de CDATA tags, browsers wilt parseren de minder dan "<" en groter is dan ">" exploitanten als HTML-codes. Altijd omringen JavaScript en jQuery exploitanten met de CDATA tags om te voorkomen dat script mislukking.