Produk spesifik JD atau Taobao memiliki efek kaca pembesar. Meskipun ada banyak plug-in serupa di internet, ada banyak ketidaknyamanan saat menerapkannya pada proyek. Saya meluangkan waktu untuk menulis plug-in yang serupa dan akumulasi kode. Mengapa tidak melakukannya !! Let'go:
Saya berencana untuk merangkum efek khusus ini ke dalam plug-in, pertama-tama mengimplementasikan algoritma paling dasar, dan kemudian merangkumnya langkah demi langkah:
Efek Akhir:
Kode HTML:
Salinan kode adalah sebagai berikut:
<Div ID = "Magnifier"> </div>
Kode CSS:
Salinan kode adalah sebagai berikut:
<tyle>
* {
Margin: 0;
Padding: 0;
}
</tyle>
Tampaknya tidak ada apa -apa, mari kita mulai perjalanan JS kita yang kuat:
Kode JavaScript:
Salinan kode adalah sebagai berikut:
function createelement (magnifierid, simg, bimg) {
var magnifier = $ (magnifierid);
Magnifier.style.position = 'relatif';
// gambar kecil div
var smalldiv = $ create ("div");
smalldiv.setAttribute ("id", "Small");
smalldiv.style.position = "absolute";
// Lapisan Topeng
var mask = $ create ("div");
mask.setAttribute ("id", "mask");
mask.style.position = "absolute";
//lensa
var mirror = $ create ("div");
mirror.setAttribute ("id", "mirror");
mirror.style.opacity = 0.3;
mirror.style.position = "absolute";
mirror.style.display = "none";
// gambar kecil
var smallimg = $ create ("img");
smallimg.setAttribute ("src", simg);
Smallimg.setAttribute ("id", "Smallimg");
smallimg.onload = function () {
// Jika tinggi atau lebar kaca pembesar tidak diatur, atur ukuran kaca pembesar sesuai dengan ukuran gambar kecil
if (! magnifier.offsetHeight) {
Magnifier.style.width = this.offsetWidth+"px";
Magnifier.style.height = this.offsetheight + "px";
}
// Ukuran lapisan topeng sama dengan gambar kecil
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 (topeng);
smalldiv.AppendChild (mirror);
smalldiv.AppendChild (Smallimg);
// windows
var bigdiv = $ create ("div");
BigDiv.setAttribute ("id", "Big");
bigdiv.style.position = "absolute";
bigdiv.style.overflow = "tersembunyi";
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);
}
fungsi setMagnaFierstyle (mirrorstyle, shichangstyle) {
//cermin
untuk (item var di mirrorstyle) {
mirror.style [item] = mirrorstyle [item];
}
untuk (item var di shichangstyle) {
$ ("Besar"). Gaya [item] = shichangstyle [item];
}
}
function registerEvent () {
$ ("mask"). onmouseover = function () {
$ ("besar"). style.display = "block";
mirror.style.display = "block";
}
$ ("mask"). onmouseout = function () {
$ ("besar"). style.display = "none";
mirror.style.display = "none";
}
$ ("mask"). onmouseMove = function (evt) {
var oevent = evt || peristiwa;
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;
}
lain if (mirrorleft> mask.offsetwidth - mirror.offsetWidth) {
mirrorleft = mask.offsetwidth - mirror.offsetwidth;
}
if (mirrortop <0) {
mirrortop = 0;
}
lain 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";
}
}
fungsi $ (id) {
return document.getElementById (id);
}
fungsi $ create (type) {
return document.createElement (type);
}
Akhirnya, mari kita sebut itu onload:
Salinan kode adalah sebagai berikut:
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 ();
}
Efeknya akhirnya telah dihitung.
2. Mari kita selimutasi selanjutnya:
Kode Kelas Magnifer:
Salinan kode adalah sebagai berikut:
Fungsi pembesar (
Magnifierid, // ID Kontainer Magnifier
simg, // gambar kecil src
bimg, // gambar besar src
MirrorStyle, // Gaya lensa dalam gambar kecil, data format JSON
Viewstyle // Pratinjau Gaya Jendela, Data Format JSON
) {
var _pis = ini;
this.magnifierContainer = null; //Wadah
this.smallDiv = null; // wadah gambar kecil
this.mask = null; // lapisan topeng gambar kecil
this.mirror = null; // Lensa gambar kecil
this.smallimg = null; // gambar kecil
this.bigdiv = null; // Tampilan Pratinjau
this.bigimg = null; // gambar besar
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 _pis = ini;
var $ create = this. $ create;
this.magnifiercontainer.style.position = 'relatif'; // Jauh dari aliran dokumen dan memodifikasinya sebagaimana mestinya
this.smallDiv = $ create ("div");
this.smalldiv.setAttribute ("id", "Small");
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 () {
// Jika tinggi atau lebar kaca pembesar tidak diatur, atur ukuran kaca pembesar sesuai dengan ukuran gambar kecil
if (! _this.magnifiercontainer.offsetHeight) {
_this.magnifiercontainer.style.width = this.offsetWidth + "px";
_this.magnifiercontainer.style.height = this.offsetheight + "px";
}
// Ukuran lapisan topeng sama dengan gambar kecil
_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 = "absolute";
this.bigdiv.style.overflow = "tersembunyi";
this.bigdiv.style.display = "none";
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);
}
Magnifier.prototype.setMagnifierstyle = function (mirrorstyle, viewstyle) {
untuk (item var di mirrorstyle) {
this.mirror.style [item] = mirrorstyle [item];
}
Hapus item;
untuk (item var di viewstyle) {
this.bigdiv.style [item] = viewstyle [item];
}
}
Magnifier.prototype.mainevent = function () {
var _pis = ini;
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 || peristiwa;
var disx = oevent.offsetx || oevent.layerx; // FF kompatibel
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;
}
lain if (mirrorleft> this.offsetWidth - _this.mirror.offsetWidth) {
mirrorleft = this.offsetWidth - mirror.offsetWidth;
}
if (mirrortop <0) {
mirrortop = 0;
}
lain 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";
}
}
Magnifier.prototype. $ = Function (id) {
return document.getElementById (id);
}
Magnifier.prototype. $ Create = function (type) {
return document.createElement (type);
}
Akhirnya, di bawah panggilan onload:
Salinan kode adalah sebagai berikut:
window.onload = function () {
pembesar baru (
"Kaca pembesar",
"Gambar/Magnifier/Small.jpg",
"Gambar/Magnifier/Big.jpg",
{"width": "30px", "height": "30px", "backgroundColor": "#ffff"},
{"width": "250px", "height": "250px"}
);
}
Di atas adalah semua konten yang dijelaskan dalam artikel ini, saya harap Anda menyukainya.