Les produits spécifiques de JD ou Taobao ont pour effet d'une loupe. Bien qu'il existe de nombreux plug-ins similaires sur Internet, il existe de nombreux inconvénients lors de leur application à des projets. J'ai pris le temps d'écrire un plug-in similaire et un code accumulé. Pourquoi ne pas le faire !! laissez-le:
Je prévois d'encapsuler cet effet spécial dans un plug-in, d'implémenter d'abord l'algorithme le plus élémentaire, puis de le résumer étape par étape:
Effet final:
Code html:
La copie de code est la suivante:
<div id = "Magnifier"> </div>
Code CSS:
La copie de code est la suivante:
<style>
* {
marge: 0;
rembourrage: 0;
}
</ style>
Il semble qu'il n'y ait rien, commençons notre puissant voyage JS:
Code javascript:
La copie de code est la suivante:
Fonction CreateElement (MAGNIFIERID, SIMG, BIMG) {
var Magnifier = $ (MAGNIFIERID);
Acquitfier.style.position = 'relative';
// petite image div
var smallDiv = $ create ("div");
smalldiv.setAttribute ("id", "petit");
smalldiv.style.position = "absolu";
// Masque Couche
var mask = $ create ("div");
mask.setAttribute ("id", "mask");
mask.style.position = "absolu";
//lentille
var mirror = $ create ("div");
mirror.setAttribute ("id", "miroir");
mirror.style.opacity = 0,3;
mirror.style.position = "absolu";
mirror.style.display = "aucun";
// petite image
var stemImg = $ create ("img");
sailtImg.setAttribute ("src", simg);
sailtImg.setAttribute ("id", "smallImg");
sailtImg.onload = function () {
// Si la hauteur ou la largeur de la loupe n'est pas réglée, réglez la taille de la loupe en fonction de la taille de la petite image
if (! Magnifier.offsetheight) {
MAGNIFIER.STYLE.WIDTH = this.offsetWidth + "PX";
Actualifier.style.height = this.offsetheight + "px";
}
// La taille de la couche de masque est la même que la petite image
mask.style.opacity = "0";
mask.style.width = this.width + 'px';
mask.style.height = this.height + "px";
mask.style.zindex = 2;
bigdiv.style.left = this.width + 5 + "px";
bigdiv.style.top = "-5px";
}
smalldiv.ApendChild (masque);
smalldiv.appendChild (miroir);
Smalldiv.ApendChild (smarimg);
// Windows
var bigDiv = $ create ("div");
bigdiv.setAttribute ("id", "big");
bigdiv.style.position = "absolu";
bigdiv.style.overflow = "Hidden";
bigdiv.style.display = "Aucun";
var bigImg = $ create ("img");
bigImg.setAttribute ("src", bimg);
bigimg.setAttribute ("id", "bigimg");
bigimg.style.position = "absolu";
BigDiv.ApendChild (BigImg);
Magnifier.ApendChild (Smalldiv);
Magnifier.ApendChild (BigDiv);
}
fonction setMagnifiersTyle (mirrorstyle, shichangstyle) {
//miroir
pour (var élément dans mirrorstyle) {
mirror.style [item] = mirrorstyle [item];
}
for (var item in shichangstyle) {
$ ("big"). style [item] = shichangstyle [item];
}
}
fonction registerEvent () {
$ ("mask"). onMouseOver = function () {
$ ("big"). style.display = "bloc";
mirror.style.display = "bloc";
}
$ ("mask"). onMouseout = function () {
$ ("big"). style.display = "Aucun";
mirror.style.display = "aucun";
}
$ ("mask"). onMouSemove = fonction (evt) {
var oevent = evt || événement;
var disx = oevent.offsetx;
var disy = oevent.offsety;
var mirrorleft = disx - mirror.offsetwidth / 2;
var mirrortop = disy - mirror.offsetheight / 2;
if (mirrorleft <0) {
mirrorleft = 0;
}
else if (mirrorleft> mask.offsetwidth - mirror.offsetwidth) {
mirrorLeft = mask.offsetwidth - mirror.offsetwidth;
}
if (mirrortop <0) {
mirrortop = 0;
}
else if (mirortop> mask.offsetheight - mirror.offsetheight) {
Mirrortop = mask.offsetheight - mirror.offSetheight;
}
mirror.style.top = mirortop + "px";
mirror.style.left = mirrorleft + "px";
var pax = mirrortop / (mask.offsetheight - mirror.offsetheight);
var pay = mirrorleft / (mask.offsetwidth - mirror.offsetwidth);
$ ("bigimg"). style.top = -pax * ($ ("bigimg"). offSetheight - $ ("big"). offSetheight) + "px";
$ ("bigImg"). style.left = -pay * ($ ("bigImg"). OffsetWidth - $ ("big"). OffsetWidth) + "px";
}
}
fonction $ (id) {
return document.getElementById (id);
}
fonction $ create (type) {
retour document.CreateElement (type);
}
Enfin, appelons-le Onload:
La copie de code est la suivante:
window.onload = function () {
CreateElement ("Magnifier", "Images / Magnifier / small.jpg", "Images / Magnifier / Big.jpg");
setMagnifiersTyle ({"width": "30px", "height": "30px", "backgroundColor": "#ffff"}, {"width": "250px", "height": "250px"});
RegisterEvent ();
}
L'effet a finalement été calculé.
2. Encapsulons-le ensuite:
Code de classe Magnifer:
La copie de code est la suivante:
Magrand de fonction de fonction (
MAGIFIERID, // ID de conteneur d'agitation
simg, // petite image src
bimg, // grande image src
MirrorStyle, // Le style de l'objectif dans la petite image, JSON Format Data
ViewStyle // Style de fenêtre d'aperçu, données au format JSON
) {
var _this = this;
this.magnifierContainer = null; //Récipient
this.smallDiv = null; // petit conteneur d'image
this.mask = null; // petite couche de masque d'image
this.mirror = null; // Small Picture Lens
this.smallimg = null; // petite image
this.bigDiv = null; // Aperçu de la vue
this.bigimg = null; // grande image
var init = function () {
_This.magnifierContainer = _Ce. $ (MagnifieId);
_Ce.CreateElement (simg, bimg);
_This.setMagnifiersTyle (MirrorStyle, ViewStyle);
_This.maineEvent ();
}
init ();
}
Magifier.prototype.CreateElement = fonction (simg, bimg) {
var _this = this;
var $ create = this. $ Create;
this.magnifierContainer.style.position = 'relative'; // loin du flux de documents et le modifier le cas échéant
this.smallDiv = $ create ("div");
this.smalldiv.setAttribute ("id", "petit");
this.smalldiv.style.position = "absolu";
this.mask = $ create ("div");
this.mask.setAttribute ("id", "mask");
this.mask.style.position = "absolu";
this.Mirror = $ create ("div");
this.mirror.setAttribute ("id", "miroir");
this.mirror.style.opacity = 0,3;
this.mirror.style.position = "absolu";
this.mirror.style.display = "aucun";
this.smallimg = $ create ("img");
this.smallimg.setAttribute ("src", simg);
this.smallimg.setAttribute ("id", "smailMg");
this.smallimg.onload = function () {
// Si la hauteur ou la largeur de la loupe n'est pas réglée, réglez la taille de la loupe en fonction de la taille de la petite image
if (! _This.magnifierContainer.offsetheight) {
_This.magnifiersontainer.style.width = this.offsetWidth + "px";
_This.magnifierContainer.style.height = this.offsetheight + "px";
}
// La taille de la couche de masque est la même que la petite image
_This.mask.style.opacity = "0";
_This.mask.style.width = this.offsetwidth + 'px';
_This.mask.style.height = this.offsetheight + "px";
_This.mask.style.zindex = 2;
_This.bigdiv.style.left = this.offsetwidth + 5 + "px";
_This.bigdiv.style.top = "-5px";
}
this.smalldiv.appendChild (this.mask);
this.smalldiv.appendChild (this.mirror);
this.smalldiv.appendChild (this.smallimg);
this.bigDiv = $ create ("div");
this.bigdiv.setAttribute ("id", "big");
this.bigdiv.style.position = "absolu";
this.bigdiv.style.overflow = "Hidden";
this.bigdiv.style.display = "Aucun";
this.bigimg = $ create ("img");
this.bigimg.setAttribute ("src", bimg);
this.bigimg.setAttribute ("id", "bigImg");
this.bigimg.style.position = "absolu";
this.bigdiv.appendChild (this.bigimg);
this.magnifierContainer.ApendChild (this.smallDiv);
this.magnifierContainer.ApendChild (this.bigdiv);
}
MAGNIFIER.PROTOTYPE.SETMAGNIFIERSTYLE = FONCTION (MirrorStyle, ViewStyle) {
pour (var élément dans mirrorstyle) {
this.mirror.style [item] = MirrorStyle [item];
}
supprimer l'élément;
pour (var item dans ViewStyle) {
this.bigDiv.Style [item] = ViewStyle [item];
}
}
Magrfier.prototype.maineVent = function () {
var _this = this;
this.mask.onmouseOver = function () {
_This.bigdiv.style.display = "block";
_This.mirror.style.display = "bloc";
}
this.mask.onmouseout = function () {
_This.bigdiv.style.display = "Aucun";
_This.mirror.style.display = "Aucun";
}
this.mask.onmousemove = fonction (evt) {
var oevent = evt || événement;
var disx = oevent.offsetx || oevent.layerx; // FF compatible
var disy = oevent.offsety || Oevent.layery;
var mirrorLeft = disx - _This.mirror.offsetWidth / 2;
var mirrortop = disy - _this.mirror.offsetheight / 2;
if (mirrorleft <0) {
mirrorleft = 0;
}
else if (mirrorleft> this.offsetwidth - _this.mirror.offsetwidth) {
mirrorLeft = this.offsetwidth - mirror.offsetwidth;
}
if (mirrortop <0) {
mirrortop = 0;
}
else if (mirrortop> this.offsetheight - _This.mirror.offsetheight) {
Mirrortop = this.offsetheight - _This.Mirror.offsetheight;
}
_This.mirror.style.top = mirortop + "px";
_This.mirror.style.left = mirrorleft + "px";
var pax = mirrortop / (this.offsetheight - _This.mirror.offsetheight);
var pay = mirrorleft / (this.offsetwidth - _this.mirror.offsetwidth);
_This.bigimg.style.top = -pax * (_this.bigimg.offsetheight - _This.bigdiv.offsetheight) + "px";
_This.bigimg.style.left = -pay * (_This.bigimg.offsetWidth - _This.bigdiv.offsetwidth) + "px";
}
}
Magnifier.prototype. $ = Fonction (id) {
return document.getElementById (id);
}
Magifier.prototype. $ Create = fonction (type) {
retour document.CreateElement (type);
}
Enfin, sous l'appel Onload:
La copie de code est la suivante:
window.onload = function () {
Nouvelle agresse (
"Magnifique",
"Images / Magnifier / small.jpg",
"Images / Magnifier / big.jpg",
{"largeur": "30px", "hauteur": "30px", "backgroundColor": "#ffff"},
{"largeur": "250px", "hauteur": "250px"}
));
}
Ce qui précède est tout le contenu décrit dans cet article, j'espère que vous l'aimez.