منتجات JD أو Taobao المحددة لها تأثير كوب مكبرة. على الرغم من وجود العديد من المكونات الإضافية المماثلة على الإنترنت ، إلا أن هناك العديد من الإزعاج عند تطبيقها على المشاريع. لقد استغرقت بعض الوقت لكتابة مكونات إضافية مماثلة والرمز المتراكم. لماذا لا تفعل ذلك !!
أخطط لتغليف هذا التأثير الخاص في المكون الإضافي ، وقم أولاً بتنفيذ الخوارزمية الأساسية ، ثم تغليفه خطوة بخطوة:
التأثير النهائي:
رمز HTML:
نسخة الكود كما يلي:
<div id = "machifier"> </viv>
رمز CSS:
نسخة الكود كما يلي:
<style>
* {
الهامش: 0 ؛
الحشو: 0 ؛
}
</style>
يبدو أنه لا يوجد شيء ، لنبدأ رحلة JS القوية:
رمز JavaScript:
نسخة الكود كما يلي:
وظيفة CreateElement (MachifierId ، Simg ، Bimg) {
var machifier = $ (machifierId) ؛
machifier.style.position = 'النسبية' ؛
// صورة صغيرة div
var smalldiv = $ create ("div") ؛
smalldiv.setattribute ("id" ، "small") ؛
smalldiv.Style.position = "aboROMUTE" ؛
// قناع طبقة
var mask = $ create ("div") ؛
Mask.SetAttribute ("id" ، "Mask") ؛
Mask.Style.position = "absolute" ؛
//عدسة
var mirror = $ create ("div") ؛
Mirror.SetAttribute ("id" ، "Mirror") ؛
Mirror.Style.Opacity = 0.3 ؛
Mirror.Style.position = "absolute" ؛
Mirror.style.display = "none" ؛
// صورة صغيرة
var smallimg = $ create ("img") ؛
smallimg.setattribute ("SRC" ، Simg) ؛
smallimg.setattribute ("id" ، "smallimg") ؛
smallimg.onload = function () {
// إذا لم يتم ضبط ارتفاع أو عرض الزجاج المكبرة ، فقم بضبط حجم الزجاج المكبرة وفقًا لحجم الصورة الصغيرة
if (! machifier.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 (Mirror) ؛
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) ؛
machifier.appendchild (smalldiv) ؛
Machifier.AppendChild (Bigdiv) ؛
}
وظيفة setMagnifiersstyle (MirrorStyle ، Shichangstyle) {
//مرآة
لـ (var item في MirrorStyle) {
Mirror.Style [item] = mirrorstyle [item] ؛
}
لـ (var item in Shichangstyle) {
$ ("big"). النمط [البند] = shichangstyle [item] ؛
}
}
وظيفة registerEvent () {
$ ("قناع"). onMouseover = function () {
$ ("big"). style.display = "block" ؛
Mirror.style.display = "block" ؛
}
$ ("قناع"). onMouseout = function () {
$ ("big"). style.display = "none" ؛
Mirror.style.display = "none" ؛
}
$ ("قناع"). 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 ؛
}
if (mirrortop <0) {
Mirrortop = 0 ؛
}
وإلا إذا
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").
}
}
وظيفة $ (id) {
return document.getElementById (id) ؛
}
وظيفة $ CREATE (type) {
return document.createElement (type) ؛
}
أخيرًا ، دعنا نسميها onload:
نسخة الكود كما يلي:
window.onload = function () {
CreateElement ("Machifier" ، "Images/Machifier/small.jpg" ، "Images/Machifier/big.jpg") ؛
setMagnifiersTyle ({"عرض": "30px" ، "الارتفاع": "30px" ، "BackgroundColor": "#ffff"} ، {"width": "250px" ، "height": "250px"}) ؛
registerEvent () ؛
}
تم حساب التأثير أخيرًا.
2. دعنا نغلفه بعد ذلك:
رمز فئة MACKEFER:
نسخة الكود كما يلي:
مكبدي الوظيفة (
Machifierid ، // معرف حاوية المكبر
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. $ (machifierId) ؛
_THIS.CREATEELEMENT (SIMG ، BIMG) ؛
_this.setMagnifiersTyle (MirrorStyle ، ViewStyle) ؛
_this.mainevent () ؛
}
init () ؛
}
magnifier.prototype.CreateElement = وظيفة (SIMG ، BIMG) {
var _ this = this ؛
var $ create = this. $ create ؛
this.magnifierContainer.style.position = 'النسبية' ؛ // بعيدًا عن تدفق المستند وتعديله حسب الاقتضاء
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 () {
// إذا لم يتم ضبط ارتفاع أو عرض الزجاج المكبرة ، فقم بضبط حجم الزجاج المكبرة وفقًا لحجم الصورة الصغيرة
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.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 = "absolute" ؛
this.bigdiv.appendchild (this.bigimg) ؛
this.magnifiercontainer.appendchild (this.smalldiv) ؛
this.magnifiercontainer.appendchild (this.bigdiv) ؛
}
magnifier.prototype.setMagnifiersTyle = function (mirrorstyle ، viewstyle) {
لـ (var item في MirrorStyle) {
this.mirror.style [item] = mirrorstyle [item] ؛
}
حذف العنصر ؛
لـ (var item في ViewStyle) {
this.bigdiv.style [item] = viewStyle [item] ؛
}
}
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 = "none" ؛
_this.mirror.style.display = "none" ؛
}
this.mask.onmousemove = وظيفة (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 - mirror.offsetWidth ؛
}
if (mirrortop <0) {
Mirrortop = 0 ؛
}
آخر إذا (mirtorp> 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" ؛
}
}
machifier.prototype. $ = function (id) {
return document.getElementById (id) ؛
}
machifier.prototype. $ create = function (type) {
return document.createElement (type) ؛
}
أخيرًا ، ضمن مكالمة onload:
نسخة الكود كما يلي:
window.onload = function () {
مكبّر جديد (
"المكبر" ،
"الصور/المكبر/small.jpg" ،
"الصور/المكبر/big.jpg" ،
{"العرض": "30px" ، "الارتفاع": "30px" ، "BackgroundColor": "#ffff"} ،
{"العرض": "250px" ، "الارتفاع": "250px"}
) ؛
}
ما سبق هو كل المحتوى الموضح في هذه المقالة ، آمل أن تنال إعجابك.