Los productos específicos de JD o Taobao tienen el efecto de una lupa. Aunque hay muchos complementos similares en Internet, hay muchos inconvenientes al aplicarlos a proyectos. Me tomé un tiempo para escribir un complemento similar y un código acumulado. ¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡Lo ¡¡
Planeo encapsular este efecto especial en un complemento, primero implementar el algoritmo más básico y luego encapsularlo paso a paso:
Efecto final:
Código HTML:
La copia del código es la siguiente:
<Div id = "Magnifier"> </div>
Código CSS:
La copia del código es la siguiente:
<estilo>
* {
margen: 0;
relleno: 0;
}
</style>
Parece que no hay nada, comencemos nuestro poderoso viaje JS:
Código JavaScript:
La copia del código es la siguiente:
function CreateElement (Magnifierid, Simg, Bimg) {
VAR MAJATIVO = $ (MACILEDIRID);
Magnificador.style.position = 'relativo';
// Pequeña imagen div
var smalldiv = $ create ("div");
smallDiv.SetAttribute ("id", "pequeño");
smalldiv.style.position = "Absolute";
// capa de máscara
var máscara = $ create ("div");
Mask.SetAttribute ("id", "máscara");
Mask.Style.Position = "Absolute";
//lente
var espejo = $ create ("div");
Mirror.SetAttribute ("id", "espejo");
Mirror.style.opacity = 0.3;
Mirror.style.Position = "Absolute";
Mirror.style.display = "Ninguno";
// imagen pequeña
var smallimg = $ create ("img");
smallImg.SetAttribute ("SRC", SIMG);
smallImg.SetAttribute ("id", "smallimg");
smallimg.onload = function () {
// Si no se establece la altura o el ancho de la lupa, establezca el tamaño de la lupa de acuerdo con el tamaño de la imagen pequeña
if (! Magnifier.offsetheight) {
Magnificador.style.width = this.OffSetWidth+"Px";
Magnificador.style.Height = this.OffSetheight + "Px";
}
// El tamaño de la capa de máscara es el mismo que la imagen pequeña
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.appendchild (máscara);
smalldiv.appendchild (espejo);
smalldiv.appendchild (smallimg);
// Windows
var bigDiv = $ create ("div");
bigDiv.setAttribute ("id", "grande");
bigdiv.style.position = "Absolute";
bigdiv.style.overflow = "Hidden";
bigdiv.style.display = "Ninguno";
var bigimg = $ create ("img");
bigImg.SetAttribute ("SRC", BIMG);
bigImg.SetAttribute ("id", "bigimg");
bigimg.style.position = "Absolute";
BigDiv.AppendChild (Bigimg);
Magnificador.appendChild (SmallDiv);
Magnifier.AppendChild (BigDiv);
}
función setmagnifierstyle (MirrorStyle, shichangstyle) {
//espejo
para (elemento var en espeRRorStyle) {
Mirror.style [item] = MirrorStyle [item];
}
para (elemento var en shichangstyle) {
$ ("grande"). Style [item] = shichangstyle [elemento];
}
}
function registroVent () {
$ ("máscara"). onMouseOver = function () {
$ ("grande"). style.display = "bloque";
espejo.style.display = "bloque";
}
$ ("máscara"). onMouseOut = function () {
$ ("grande"). style.display = "Ninguno";
Mirror.style.display = "Ninguno";
}
$ ("máscara"). onmouseMove = function (evt) {
var oevent = evt || evento;
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 (Mirrortop> Mask.OffSetheight - Mirror.Offsetheight) {
Mirrortop = Mask.OffSetheight - Mirror.Offsetheight;
}
Mirror.style.top = Mirrortop + "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";
}
}
función $ (id) {
return document.getElementById (id);
}
función $ create (type) {
return document.createElement (tipo);
}
Finalmente, llamemos a Onload:
La copia del código es la siguiente:
window.onload = function () {
CreateElement ("Magnifier", "Images/Magnifier/Small.jpg", "Images/Magnifier/Big.jpg");
setmagnifierstyle ({"ancho": "30px", "altura": "30px", "backgroundColor": "#ffff"}, {"ancho": "250px", "altura": "250px"});
RegisterEvent ();
}
El efecto finalmente se ha calculado.
2. Vamos a encapsularlo a continuación:
Código de clase Magnifer:
La copia del código es la siguiente:
lupa de función (
ID de contenedor de lupa, // lupa
simg, // imagen pequeña src
bimg, // imagen grande src
MirrorStyle, // El estilo de lente en la imagen pequeña, datos de formato JSON
ViewStyle // Vista previa estilo de ventana, datos de formato JSON
) {
var _This = this;
this.magnifierContainer = null; //Recipiente
this.smallDiv = null; // contenedor de imágenes pequeñas
this.mask = null; // capa de máscara de imagen pequeña
this.mirror = nulo; // lente de imagen pequeña
this.smallimg = null; // imagen pequeña
this.bigdiv = null; // Vista previa
this.bigimg = null; // imagen grande
var init = function () {
_THIS.MagnifierContainer = _This. $ (MagnifierID);
_THIS.CreateElement (Simg, BIMG);
_THIS.SetMagnifierStyle (MirrorStyle, ViewStyle);
_THIS.MaineVent ();
}
init ();
}
Magnificador.prototype.createElement = function (simg, bimg) {
var _This = this;
var $ create = this. $ create;
this.magnifiercontainer.style.position = 'relativo'; // lejos del flujo del documento y modificarlo según corresponda
this.smallDiv = $ create ("div");
this.smallDiv.SetAttribute ("id", "pequeño");
this.smallDiv.style.Position = "Absolute";
this.mask = $ create ("div");
this.Mask.SetAttribute ("id", "máscara");
this.mask.style.position = "Absolute";
this.mirror = $ create ("div");
this.mirror.setAttribute ("id", "espejo");
this.mirror.style.opacity = 0.3;
this.mirror.style.position = "Absolute";
this.mirror.style.display = "Ninguno";
this.smallimg = $ create ("img");
this.smallimg.SetAttribute ("src", simg);
this.smallimg.SetAttribute ("id", "smallImg");
this.smallimg.Onload = function () {
// Si no se establece la altura o el ancho de la lupa, establezca el tamaño de la lupa de acuerdo con el tamaño de la imagen pequeña
if (! _this.magnifiercontainer.offsetheight) {
_this.magnifierContainer.style.width = this.offsetWidth + "Px";
_this.magnifiercontainer.style.height = this.offsetheight + "px";
}
// El tamaño de la capa de máscara es el mismo que la imagen pequeña
_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", "grande");
this.bigdiv.style.position = "Absolute";
this.bigdiv.style.overflow = "Hidden";
this.bigdiv.style.display = "ninguno";
this.bigimg = $ create ("img");
this.bigimg.SetAttribute ("Src", bimg);
this.bigimg.setAttribute ("id", "bigImg");
this.bigimg.style.position = "Absolute";
this.bigdiv.appendchild (this.bigimg);
this.magnifiercontainer.appendChild (this.smallDiv);
this.magnifiercontainer.appendChild (this.bigdiv);
}
Magnificador.prototype.setMagnifierstyle = function (MirrorStyle, ViewStyle) {
para (elemento var en espeRRorStyle) {
this.mirror.style [item] = MirrorStyle [item];
}
Eliminar el artículo;
para (elemento var en ViewStyle) {
this.bigdiv.style [item] = ViewStyle [item];
}
}
Magnifier.prototype.maineVent = function () {
var _This = this;
this.mask.onmouseover = function () {
_this.bigdiv.style.display = "bloque";
_this.mirror.style.display = "bloque";
}
this.mask.onmouseOut = function () {
_this.bigdiv.style.display = "Ninguno";
_this.mirror.style.display = "Ninguno";
}
this.mask.onmouseMove = function (evt) {
var oevent = evt || evento;
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 = Mirrortop + "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";
}
}
Magnificador.prototype. $ = Function (id) {
return document.getElementById (id);
}
Magnifier.prototype. $ Create = function (type) {
return document.createElement (tipo);
}
Finalmente, debajo de la llamada de Onload:
La copia del código es la siguiente:
window.onload = function () {
nueva lupa (
"Magnificador",
"Images/Magnifier/Small.jpg",
"Images/Magnifier/Big.jpg",
{"ancho": "30px", "altura": "30px", "backgroundColor": "#ffff"},
{"ancho": "250px", "altura": "250px"}
);
}
Lo anterior es todo el contenido descrito en este artículo, espero que les guste.