Os produtos específicos de JD ou Taobao têm o efeito de uma lupa. Embora existam muitos plug-ins semelhantes na Internet, existem muitos inconvenientes ao aplicá-los a projetos. Levei algum tempo para escrever um plug-in e código acumulado semelhante. Por que não fazer isso !! Let'Go:
Planejo encapsular esse efeito especial em um plug-in, primeiro implemento o algoritmo mais básico e depois o encapsulou passo a passo:
Efeito final:
Código HTML:
A cópia do código é a seguinte:
<div id = "Ligna"> </div>
Código CSS:
A cópia do código é a seguinte:
<estilo>
* {
margem: 0;
preenchimento: 0;
}
</style>
Parece que não há nada, vamos começar nossa poderosa jornada de js:
Código JavaScript:
A cópia do código é a seguinte:
Função CreateElement (MagnifierId, Simg, BIMG) {
Var denificador = $ (MagnifierId);
Magnifier.style.Position = 'relativo';
// Picture Small Picture Div
var smallDiv = $ create ("div");
smalldiv.setAttribute ("id", "pequeno");
smalldiv.style.position = "absoluto";
// camada de máscara
var máscara = $ create ("div");
Mask.setAtattribute ("ID", "Mask");
Mask.style.Position = "Absolute";
//lente
Var Mirror = $ create ("div");
Mirror.SetAttribute ("ID", "Mirror");
espelho.style.Opacity = 0,3;
Mirror.style.Position = "Absolute";
espelho.style.display = "nenhum";
// imagem pequena
var smallImg = $ create ("img");
smallImg.setAttribute ("src", simg);
smallImg.setAttribute ("id", "smallImg");
smallimg.onload = function () {
// Se a altura ou largura da lupa não estiver definida, defina o tamanho da lupa de acordo com o tamanho da imagem pequena
if (! Magnifier.OffSetHeight) {
Magnifier.style.width = this.offsetWidth+"px";
Magnifier.style.Height = this.offsetHeight + "px";
}
// O tamanho da camada de máscara é o mesmo que a imagem pequena
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 (espelho);
SmallDiv.AppendChild (SmallImg);
//Windows
var bigdiv = $ create ("div");
bigdiv.setAttribute ("id", "grande");
bigdiv.style.position = "absoluto";
bigdiv.style.overflow = "Hidden";
bigdiv.style.display = "nenhum";
var bigimg = $ create ("img");
bigimg.setAttribute ("src", bimg);
bigimg.setAttribute ("id", "bigimg");
bigimg.style.position = "absoluto";
bigdiv.appendchild (bigimg);
Magnifier.AppendChild (SmallDiv);
Magnifier.appendChild (bigdiv);
}
Função setMagnifiersTyle (MirrorStyle, Shichangstyle) {
//espelho
para (var item no espelhostyle) {
espelho.style [item] = espelhostyle [item];
}
para (var item em shichangstyle) {
$ ("big"). estilo [item] = shichangstyle [item];
}
}
Função RegisterEvent () {
$ ("máscara"). onmouseover = function () {
$ ("big"). style.display = "bloco";
espelho.style.display = "bloco";
}
$ ("máscara"). onmouseout = function () {
$ ("big"). style.display = "nenhum";
espelho.style.display = "nenhum";
}
$ ("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 (espelhoft <0) {
espelhoft = 0;
}
else if (espelhoft> mask.offsetWidth - Mirror.OffsetWidth) {
espelhoft = mask.offsetWidth - Mirror.OffSetWidth;
}
if (MirRortop <0) {
espelhop = 0;
}
caso contrário, if (MirRortop> Mask.offSethEight - Mirror.offsetHeight) {
Mirrortop = Mask.offsetHeight - Mirror.offsetHeight;
}
espelho.style.top = Mirrortop + "px";
espelho.style.left = espelhoft + "px";
var pax = MirrorTop / (Mask.offsetHeight - Mirror.OffSetHeight);
var page = espelhoft / (mask.offsetWidth - Mirror.OffSetWidth);
$ ("bigimg"). style.top = -pax * ($ ("bigimg").
$ ("bigimg"). style.left = -pay * ($ ("bigimg"). OffsetWidth - $ ("big"). OffsetWidth) + "px";
}
}
função $ (id) {
retornar document.getElementById (id);
}
função $ create (type) {
retornar document.createElement (tipo);
}
Por fim, vamos chamá -lo de Onload:
A cópia do código é a seguinte:
window.onload = function () {
CreateElement ("Magnifier", "Images/Magnifier/Small.jpg", "Images/Magnifier/big.jpg");
setMagnifiersTyle ({"Width": "30px", "Height": "30px", "BackgroundColor": "#ffff"}, {"largura": "250px", "altura": "250px"});
RegisterEvent ();
}
O efeito foi finalmente calculado.
2. Vamos encapsular a seguir:
Código de classe LOGNIFER:
A cópia do código é a seguinte:
Linente de função (
MagnifierId, // ID de contêiner de lupa
Simg, // Picture Strc SRC
bimg, // imagem grande src
Mirrorstyle, // O estilo da lente na imagem pequena, JSON Format Data
ViewStyle // Visualize Window Style, JSON Format Data
) {
var _This = this;
this.MagnifierContainer = null; //Recipiente
this.smalldiv = null; // contêiner de imagem pequena
this.mask = null; // camada de máscara de imagem pequena
this.mirror = nulo; // Lente de imagem pequena
this.smallImg = null; // imagem pequena
this.bigdiv = null; // Visualização de visualização
this.bigimg = null; // imagem grande
var init = function () {
_This.MagnifierContainer = _This. $ (MagnifierId);
_This.CreateElement (SIMG, BIMG);
_This.setMagnifiersTyle (MirrorStyle, ViewStyle);
_This.Mainevent ();
}
init ();
}
Magnifier.prototype.createElement = function (simg, bimg) {
var _This = this;
var $ create = this. $ create;
this.MagnifierContainer.style.Position = 'relativo'; // longe do fluxo de documentos e modifique -o conforme apropriado
this.smalldiv = $ create ("div");
this.smalldiv.setAttribute ("id", "pequeno");
this.smalldiv.style.position = "absoluta";
this.mask = $ create ("div");
this.mask.setAttribute ("id", "máscara");
this.mask.style.Position = "Absolute";
this.mirror = $ create ("div");
this.mirror.setAttribute ("id", "espelho");
this.mirror.style.Opacity = 0,3;
this.mirror.style.position = "absoluto";
this.mirror.style.display = "nenhum";
this.smallImg = $ create ("img");
this.smallimg.setAttribute ("src", simg);
this.smallimg.setAttribute ("id", "smallImg");
this.smallimg.onload = function () {
// Se a altura ou largura da lupa não estiver definida, defina o tamanho da lupa de acordo com o tamanho da imagem pequena
if (! _This.MagnifierContainer.offsetHeight) {
_This.MagnifierContainer.style.width = this.offsetWidth + "px";
_This.MagnifierContainer.style.Height = this.offsetHeight + "px";
}
// O tamanho da camada de máscara é o mesmo que a imagem pequena
_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 = "absoluto";
this.bigdiv.style.overflow = "Hidden";
this.bigdiv.style.display = "nenhum";
this.bigimg = $ create ("img");
this.bigimg.setattribute ("src", bimg);
this.bigimg.setattribute ("id", "bigimg");
this.bigimg.style.position = "absoluto";
this.bigdiv.appendchild (this.bigimg);
this.MagnifierContainer.AppendChild (this.smalldiv);
this.MagnifierContainer.AppendChild (this.bigdiv);
}
Magnifier.prototype.setMagnifiersTyle = function (MirrorStyle, ViewStyle) {
para (var item no espelhostyle) {
this.mirror.style [item] = espelhostyle [item];
}
excluir item;
para (var item no viewstyle) {
this.bigdiv.style [item] = viewStyle [item];
}
}
Magnifier.prototype.mainevent = function () {
var _This = this;
this.mask.onMouseOver = function () {
_This.bigdiv.style.display = "bloco";
_This.mirror.style.display = "bloco";
}
this.mask.onmouseout = function () {
_This.bigdiv.style.display = "nenhum";
_This.mirror.style.display = "nenhum";
}
this.mask.onmouseMove = function (EVT) {
var oevent = evt || evento;
var disx = oevent.offsetx || OEvent.layerx; // ff compatível
var disy = oevent.offsety || OEvent.Layery;
Var MirrorLeft = Disx - _This.Mirror.OffSetWidth / 2;
var MirrorTop = Disy - _This.Mirror.OffSetHeight / 2;
if (espelhoft <0) {
espelhoft = 0;
}
caso contrário, se (espelhoft> this.offsetWidth - _This.Mirror.OffSetWidth) {
espelhoft = this.offsetWidth - Mirror.OffSetWidth;
}
if (MirRortop <0) {
espelhop = 0;
}
caso contrário, if (MirRorTop> this.offsethEight - _This.mirror.offsetHeight) {
espelhop = this.offsetHeight - _this.mirror.offSethEight;
}
_This.mirror.style.top = MirRortop + "px";
_This.mirror.style.left = espelhoft + "px";
var pax = MirrorTop / (this.offsetHeight - _this.mirror.offsetHeight);
var page = espelhoft / (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. $ = Function (id) {
retornar document.getElementById (id);
}
Magnifier.prototype. $ Create = function (type) {
retornar document.createElement (tipo);
}
Finalmente, sob a chamada de Onload:
A cópia do código é a seguinte:
window.onload = function () {
Novo Linente (
"Linente",
"Images/Magnifier/Small.jpg",
"Images/Magnifier/big.jpg",
{"Width": "30px", "altura": "30px", "BackgroundColor": "#ffff"},
{"Width": "250px", "altura": "250px"}
);
}
O exposto acima é todo o conteúdo descrito neste artigo, espero que você goste.