Die spezifischen Produkte von JD oder Taobao haben die Wirkung einer Lupe. Obwohl es im Internet viele ähnliche Plug-Ins gibt, gibt es viele Unannehmlichkeiten bei der Anwendung auf Projekte. Ich habe mir einige Zeit genommen, um ein ähnliches Plug-In und ein so gesammeltes Code zu schreiben. Warum tust es nicht !! let'go:
Ich habe vor, diesen Spezialeffekt in ein Plug-In zu integrieren, zuerst den grundlegendsten Algorithmus zu implementieren und dann Schritt für Schritt einzukapseln:
Endgültiger Effekt:
HTML -Code:
Die Codekopie lautet wie folgt:
<div id = "Magnifier"> </div>
CSS -Code:
Die Codekopie lautet wie folgt:
<Styles>
* {{
Rand: 0;
Polsterung: 0;
}
</style>
Es scheint, dass es nichts gibt, lassen Sie uns unsere mächtige JS -Reise beginnen:
JavaScript -Code:
Die Codekopie lautet wie folgt:
Funktion createLement (MagnifierId, Simg, Bimg) {
var Magnifier = $ (LupeInid);
Magnifier.Style.position = 'relativ';
// kleines Bild div
var smalldiv = $ create ("div");
smalldiv.setattribute ("id", "klein");
smalldiv.style.position = "absolut";
// Schicht maskieren
var mask = $ create ("div");
mask.setattribute ("id", "mask");
mask.Style.position = "Absolute";
//Linse
var Mirror = $ create ("div");
Mirror.SetatTribute ("ID", "Mirror");
Mirror.Style.Opacity = 0,3;
Mirror.Style.position = "Absolute";
Mirror.Style.display = "Keine";
// kleines Bild
var smallimg = $ create ("img");
smallimg.setattribute ("src", Simg);
smallimg.setattribute ("id", "smallimg");
smallimg.onload = function () {
// Wenn die Höhe oder Breite des Lupe nicht eingestellt ist, stellen Sie die Größe des Lupe nach der Größe des kleinen Bildes fest
if (! Magnifier.offseteight) {
Magnifier.Style.width = this.offsetwidth+"px";
Magnifier.Style.Height = this.offseteight + "px";
}
// Die Maskenschichtgröße ist das gleiche wie das kleine Bild
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 (Maske);
smalldiv.appendchild (spiegel);
smalldiv.appendchild (smallimg);
// Windows
var bigdiv = $ create ("div");
BigDiv.SetAttribute ("ID", "Big");
BigDiv.Style.position = "Absolute";
BigDiv.Style.Overflow = "Hidden";
BigDiv.Style.display = "None";
var bigimg = $ create ("img");
bigimg.setattribute ("src", bimg);
bigimg.setattribute ("id", "bigimg");
Bigimg.Style.position = "Absolute";
BigDiv.AppendChild (Bigimg);
Magnifier.AppendChild (smalldiv);
Magnifier.AppendChild (BigDiv);
}
Funktion SetMagnifierSyle (MirrorStyle, Shichangstyle) {
//Spiegel
für (var item in MirrorStyle) {
Mirror.Style [item] = MirrorStyle [item];
}
für (var item in Shichangstyle) {
$ ("big"). Stil [Artikel] = ShichangStyle [Artikel];
}
}
Funktion RegisterEvent () {
$ ("Maske"). onmouseover = function () {
$ ("big"). style.display = "block";
Mirror.Style.display = "Block";
}
$ ("Maske"). onmouseout = function () {
$ ("big"). style.display = "keine";
Mirror.Style.display = "Keine";
}
$ ("Maske"). OnmousEmove = Funktion (evt) {
var oevent = evt || Ereignis;
var disx = oEvent.OffsetX;
var disy = oevent.offsety;
var MirrorLeft = disx - Mirror.Offsetwidth / 2;
var minortop = disy - Mirror.offseteight / 2;
if (MirrorLeft <0) {
MirrorLeft = 0;
}
else if (minorLeft> mask.offsetwidth - mirror.offsetwidth) {
MirrorLeft = mask.Offsetwidth - Mirror.Offsetwidth;
}
if (minortop <0) {
minortop = 0;
}
sonst if (minortop> mask.offseteight - Mirror.offseteight) {
minortop = mask.offseteight - Mirror.Offseteight;
}
Mirror.Style.top = Mirrortop + "px";
Mirror.Style.Left = MirrorLeft + "px";
var pax = minortop / (mask.offseteight - Mirror.offseteight);
var pay = minorLeft / (mask.Offsetwidth - Mirror.Offsetwidth);
$ ("bigimg"). style.top = -pax * ($ ("Bigimg"). Offseteight - $ ("Big").
$ ("bigimg"). style.left = -pay * ($ ("bigimg").
}
}
Funktion $ (id) {
return document.getElementById (id);
}
Funktion $ create (type) {
return document.createelement (type);
}
Nennen wir es schließlich Onload:
Die Codekopie lautet wie folgt:
window.onload = function () {
CreateLement ("Magnifier", "Images/Magnifier/Small.jpg", "Images/Magnifier/Big.jpg");
setMagnifierSyle ({"width": "30px", "Höhe": "30px", "backgroundColor": "#ffff"}, {"width": "250px", "Höhe": "250px"});
RegisterEvent ();
}
Der Effekt wurde schließlich berechnet.
2. Lassen Sie es uns als nächstes zusammenfassen:
Magnifer -Klassencode:
Die Codekopie lautet wie folgt:
Funktionsvermutung (
Magnifierid, // Lupe Container -ID
Simg, // kleines Bild SRC
Bimg, // großes Bild SRC
MirrorStyle, // Der Linsenstil im kleinen Bild, JSON -Formatdaten
ViewStyle // Vorschau -Fensterstil, JSON -Formatdaten
) {
var _this = this;
this.MagnifierContainer = null; //Container
this.smalldiv = null; // kleiner Bildbehälter
this.mask = null; // kleine Bildmaskenschicht
this.mirror = null; // kleines Bildlinsen
this.smallimg = null; // kleines Bild
this.bigdiv = null; // Vorschauansicht
this.bigimg = null; // großes Bild
var init = function () {
_this.MagnifierContainer = _this. $ (MagnifierId);
_this.createelement (Simg, Bimg);
_this.setMagnifierSyle (MirrorStyle, ViewStyle);
_This.maneEvent ();
}
init ();
}
Magnifier.Prototype.Createelement = Funktion (SIMG, Bimg) {
var _this = this;
var $ create = this. $ create;
this.MagnifierContainer.Style.position = 'Relative'; // weit weg vom Dokumentfluss und modifizieren Sie ihn nach Bedarf
this.smalldiv = $ create ("div");
this.smalldiv.setattribute ("id", "klein");
this.smalldiv.style.position = "Absolute";
this.mask = $ create ("div");
this.mask.setattribute ("id", "mask");
this.mask.Style.position = "Absolute";
this.mirror = $ create ("div");
this.mirror.setAttribute ("id", "mirror");
this.mirror.Style.Opacity = 0,3;
this.mirror.style.position = "Absolute";
this.mirror.style.display = "none";
this.smallimg = $ create ("img");
this.smallimg.setattribute ("src", Simg);
this.smallimg.setattribute ("id", "smallimg");
this.smallimg.onload = function () {
// Wenn die Höhe oder Breite des Lupe nicht eingestellt ist, stellen Sie die Größe des Lupe nach der Größe des kleinen Bildes fest
if (! _this.MagnifierContainer.offseteight) {
_this.MagnifierContainer.Style.width = this.offsetwidth + "px";
_this.MagnifierContainer.Style.Height = this.offseteight + "px";
}
// Die Maskenschichtgröße ist das gleiche wie das kleine Bild
_this.mask.style.opacity = "0";
_this.mask.style.width = this.offsetwidth + 'px';
_this.mask.style.height = this.offseteight + "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 = "Absolute";
this.bigdiv.style.overflow = "Hidden";
this.bigdiv.style.display = "none";
this.bigimg = $ create ("img");
this.bigimg.setattribute ("src", bimg);
this.bigimg.setattribute ("id", "bigimg");
this.bigimg.style.position = "absolut";
this.bigdiv.Appendchild (this.bigimg);
this.MagnifierContainer.AppendChild (this.smalldiv);
this.MagnifierContainer.AppendChild (this.bigdiv);
}
Magnifier.Prototype.SetMagnifierSyle = Funktion (MirrorStyle, ViewStyle) {
für (var item in MirrorStyle) {
this.mirror.Style [item] = MirrorStyle [item];
}
Artikel löschen;
für (var item in viewStyle) {
this.bigdiv.style [item] = viewStyle [item];
}
}
Magnifier.Prototype.maineEvent = function () {
var _this = this;
this.mask.onmouseover = function () {
_this.bigdiv.style.display = "block";
_this.mirror.style.display = "block";
}
this.mask.onmouseout = function () {
_this.bigdiv.style.display = "none";
_this.mirror.style.display = "none";
}
this.mask.onmousemove = function (evt) {
var oevent = evt || Ereignis;
var disx = oevent.offsetx || oevent.layerx; // ff kompatibel
var disy = oevent.offsety || oevent.layery;
var MirrorLeft = disx - _this.mirror.Offsetwidth / 2;
var minortop = disy - _this.mirror.offseteight / 2;
if (MirrorLeft <0) {
MirrorLeft = 0;
}
sonst if (MirrorLeft> this.offsetwidth - _this.mirror.offsetwidth) {
MirrorLeft = this.Offsetwidth - Mirror.Offsetwidth;
}
if (minortop <0) {
minortop = 0;
}
else if (minortop> this.offseteight - _this.mirror.offseteight) {
minortop = this.offseteight - _this.mirror.offseteight;
}
_this.mirror.style.top = minortop + "px";
_this.mirror.Style.left = MirrorLeft + "px";
var pax = minortop / (this.offseteight - _this.mirror.offseteight);
var pay = minorLeft / (this.Offsetwidth - _this.mirror.Offsetwidth);
_this.bigimg.style.top = -pax * (_this.bigimg.offseteight - _this.bigdiv.offseteight) + "px";
_this.bigimg.style.left = -pay * (_this.bigimg.offsetwidth - _this.bigdiv.Offsetwidth) + "px";
}
}
Magnifier.Prototyp. $ = Funktion (id) {
return document.getElementById (id);
}
Magnifier.Prototype. $ Create = function (type) {
return document.createelement (type);
}
Schließlich unter dem Onload -Anruf:
Die Codekopie lautet wie folgt:
window.onload = function () {
neuer Lupe (
"Lupe",
"Bilder/Lupe/small.jpg",
"Bilder/Lupe/Big.jpg",
{"Breite": "30px", "Höhe": "30px", "HintergrundColor": "#ffff"},
{"Breite": "250px", "Höhe": "250px"}
);
}
Das obige Inhalt ist der in diesem Artikel beschriebene Inhalt. Ich hoffe, es gefällt Ihnen.