ผลิตภัณฑ์เฉพาะของ JD หรือ Taobao มีผลกระทบจากแว่นขยาย แม้ว่าจะมีปลั๊กอินที่คล้ายกันมากมายบนอินเทอร์เน็ต แต่ก็มีความไม่สะดวกมากมายเมื่อนำไปใช้กับโครงการ ฉันใช้เวลาในการเขียนปลั๊กอินและรหัสสะสมที่คล้ายกัน ทำไมไม่ทำมัน !! ให้ไป:
ฉันวางแผนที่จะห่อหุ้มเอฟเฟกต์พิเศษนี้ลงในปลั๊กอินก่อนอื่นใช้อัลกอริทึมพื้นฐานที่สุดก่อนแล้วจึงห่อหุ้มทีละขั้นตอน:
ผลสุดท้าย:
รหัส HTML:
การคัดลอกรหัสมีดังนี้:
<div id = "magnifier"> </div>
รหัส CSS:
การคัดลอกรหัสมีดังนี้:
<style>
-
มาร์จิ้น: 0;
Padding: 0;
-
</style>
ดูเหมือนว่าไม่มีอะไรเลยเริ่มต้นการเดินทาง JS อันทรงพลังของเรา:
รหัส JavaScript:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น createElement (magnifierid, simg, bimg) {
var magnifier = $ (magnifierid);
Magnifier.style.position = 'ญาติ';
// ภาพขนาดเล็ก Div
var smalldiv = $ create ("div");
smalldiv.setAttribute ("id", "เล็ก");
smalldiv.style.position = "สัมบูรณ์";
// เลเยอร์หน้ากาก
var mask = $ create ("div");
mask.setAttribute ("id", "mask");
mask.style.position = "สัมบูรณ์";
// เลนส์
var mirror = $ create ("div");
Mirror.setAttribute ("ID", "Mirror");
mirror.style.Opacity = 0.3;
mirror.style.position = "Absolute";
mirror.style.display = "ไม่มี";
// ภาพเล็ก ๆ
var smallimg = $ create ("img");
Smallimg.setAttribute ("SRC", SIMG);
Smallimg.setAttribute ("id", "smallimg");
smallimg.onload = function () {
// หากไม่ได้ตั้งค่าความสูงหรือความกว้างของแว่นขยายให้ตั้งขนาดของแว่นขยายตามขนาดของภาพขนาดเล็ก
if (! magnifier.offsetheight) {
Magnifier.style.width = this.offsetWidth+"px";
Magnifier.style.height = this.offSetheight + "PX";
-
// ขนาดเลเยอร์หน้ากากเหมือนกับภาพขนาดเล็ก
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 (หน้ากาก);
Smalldiv.AppendChild (กระจก);
Smalldiv.AppendChild (Smallimg);
// windows
var bigdiv = $ create ("div");
bigdiv.setAttribute ("id", "big");
bigdiv.style.position = "สัมบูรณ์";
bigdiv.style.overflow = "ซ่อน";
bigdiv.style.display = "ไม่มี";
var bigimg = $ create ("img");
Bigimg.setAttribute ("SRC", BIMG);
bigimg.setAttribute ("id", "bigimg");
bigimg.style.position = "สัมบูรณ์";
BigDiv.AppendChild (Bigimg);
Magnifier.AppendChild (smalldiv);
Magnifier.AppendChild (BigDiv);
-
ฟังก์ชั่น setMagnifierstyle (MirrorStyle, Shichangstyle) {
//กระจกเงา
สำหรับ (รายการ var ใน MirrorStyle) {
mirror.style [item] = mirrorstyle [item];
-
สำหรับ (รายการ var ใน shichangstyle) {
$ ("big"). style [item] = shichangstyle [item];
-
-
ฟังก์ชั่น registerEvent () {
$ ("Mask"). onMouseOver = function () {
$ ("big"). style.display = "block";
mirror.style.display = "block";
-
$ ("Mask"). onMouseOut = function () {
$ ("ใหญ่"). style.display = "ไม่มี";
mirror.style.display = "ไม่มี";
-
$ ("Mask"). OnMousemove = function (evt) {
var oEvent = evt || เหตุการณ์;
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;
-
อื่นถ้า (mirrorleft> mask.offsetWidth - mirror.offsetWidth) {
mirrorleft = mask.offsetWidth - mirror.offsetWidth;
-
ถ้า (mirrortop <0) {
mirrortop = 0;
-
อื่นถ้า (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";
-
-
ฟังก์ชั่น $ (id) {
ส่งคืน document.getElementById (id);
-
ฟังก์ชั่น $ สร้าง (พิมพ์) {
ส่งคืนเอกสารการสร้าง (ประเภท);
-
สุดท้ายขอเรียกมันว่า OnLoad:
การคัดลอกรหัสมีดังนี้:
window.onload = function () {
CreateElement ("Magnifier", "Images/Magnifier/Small.jpg", "Images/Magnifier/big.jpg");
SetMagnifierstyle ({"width": "30px", "ความสูง": "30px", "BackgroundColor": "#FFFF"}, {"Width": "250px", "ความสูง": "250px"});
RegisterEvent ();
-
ในที่สุดก็มีการคำนวณผลกระทบ
2. เอาไว้ในตัวต่อไป:
รหัสคลาสแว่นตา:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชันแว่นขยาย (
Magnifierid, // Magnifier Container ID
simg, // ภาพขนาดเล็ก src
bimg, // ภาพขนาดใหญ่ src
MirrorStyle, // สไตล์เลนส์ในภาพขนาดเล็กข้อมูลรูปแบบ JSON
ViewStyle // ตัวอย่างสไตล์หน้าต่าง, ข้อมูลรูปแบบ JSON
-
var _this = this;
this.magnifierContainer = null; //คอนเทนเนอร์
this.smalldiv = null; // คอนเทนเนอร์ภาพขนาดเล็ก
this.mask = null; // เลเยอร์หน้ากากภาพขนาดเล็ก
this.mirror = null; // เลนส์ภาพขนาดเล็ก
this.smallimg = null; // ภาพเล็ก ๆ
this.bigdiv = null; // ดูตัวอย่างมุมมอง
this.bigimg = null; // ภาพขนาดใหญ่
var init = function () {
_this.magnifierContainer = _this. $ (magnifierid);
_this.createElement (Simg, Bimg);
_this.setMagnifierstyle (MirrorStyle, ViewStyle);
_this.mainevent ();
-
init ();
-
Magnifier.prototype.createElement = ฟังก์ชั่น (simg, bimg) {
var _this = this;
var $ create = this. $ สร้าง;
this.magnifierContainer.style.position = 'ญาติ'; // ห่างจากการไหลของเอกสารและแก้ไขตามความเหมาะสม
this.smalldiv = $ create ("div");
this.smalldiv.setAttribute ("id", "เล็ก");
this.smalldiv.style.position = "สัมบูรณ์";
this.mask = $ create ("div");
this.mask.setAttribute ("id", "mask");
this.mask.style.position = "สัมบูรณ์";
this.mirror = $ create ("div");
this.mirror.setAttribute ("id", "mirror");
this.mirror.style.Opacity = 0.3;
this.mirror.style.position = "สัมบูรณ์";
this.mirror.style.display = "ไม่มี";
this.mallimg = $ create ("img");
this.smallimg.setAttribute ("src", simg);
this.smallimg.setAttribute ("id", "smallimg");
this.smallimg.onload = function () {
// หากไม่ได้ตั้งค่าความสูงหรือความกว้างของแว่นขยายให้ตั้งขนาดของแว่นขยายตามขนาดของภาพขนาดเล็ก
if (! _this.magnifierContainer.offSetheight) {
_this.magnifierContainer.style.width = this.offsetWidth + "px";
_this.magnifierContainer.style.height = this.offSetheight + "px";
-
// ขนาดเลเยอร์หน้ากากเหมือนกับภาพขนาดเล็ก
_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.mallimg);
this.bigdiv = $ create ("div");
this.bigdiv.setAttribute ("id", "big");
this.bigdiv.style.position = "สัมบูรณ์";
this.bigdiv.style.overflow = "ซ่อน";
this.bigdiv.style.display = "ไม่มี";
this.bigimg = $ create ("img");
this.bigimg.setAttribute ("src", bimg);
this.bigimg.setAttribute ("id", "bigimg");
this.bigimg.style.position = "สัมบูรณ์";
this.bigdiv.appendchild (this.bigimg);
this.magnifierContainer.AppendChild (this.malldiv);
this.magnifierContainer.AppendChild (this.bigdiv);
-
Magnifier.prototype.setMagnifierstyle = ฟังก์ชั่น (MirrorStyle, ViewStyle) {
สำหรับ (รายการ var ใน MirrorStyle) {
this.mirror.style [item] = mirrorstyle [item];
-
ลบรายการ;
สำหรับ (รายการ var ใน viewstyle) {
this.bigdiv.style [item] = viewstyle [รายการ];
-
-
magnifier.prototype.mainevent = 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 = "ไม่มี";
_this.mirror.style.display = "ไม่มี";
-
this.mask.onmousemove = function (evt) {
var oEvent = evt || เหตุการณ์;
var disx = oEvent.OffSetx || OEVENT.LAYERX; // ff เข้ากันได้
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;
-
อื่นถ้า (mirrorleft> this.offsetWidth - _this.mirror.offsetWidth) {
MirrorLeft = this.offsetWidth - Mirror.OffsetWidth;
-
ถ้า (mirrortop <0) {
mirrortop = 0;
-
อื่นถ้า (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) {
ส่งคืน document.getElementById (id);
-
Magnifier.prototype. $ create = function (ประเภท) {
ส่งคืนเอกสารการสร้าง (ประเภท);
-
ในที่สุดภายใต้การโทร OnLoad:
การคัดลอกรหัสมีดังนี้:
window.onload = function () {
เฟืองใหม่ (
"แว่นขยาย",
"รูปภาพ/แว่นขยาย/small.jpg"
"รูปภาพ/แว่นขยาย/big.jpg"
{"width": "30px", "ความสูง": "30px", "BackgroundColor": "#FFFF"},
{"width": "250px", "ความสูง": "250px"}
-
-
ข้างต้นเป็นเนื้อหาทั้งหมดที่อธิบายไว้ในบทความนี้ฉันหวังว่าคุณจะชอบ