用纯javaｓｃｒｉｐｔ实现放大镜的效果

JD或淘宝的具体产品有放大镜。虽然网上有很多插件，应用中还存在很多的不便。编写类似的插件并积累代码需要很多时间。为什么不呢让！

这个特殊效果打算打包成一个插件，首先实现基本算法，然后一步一步地重新开始：
最终实现结果：

HTML代码：

复制代码代码如下所示：
CSS代码：

复制代码代码如下所示：
{ *

保证金：0；

填充：0；

}
看起来什么都没有。让我们开始强大的js之旅。

Javaｓｃｒｉｐｔ代码：

复制代码代码如下所示：

功能createElement（magnifierid，SIMG，巴塞尔指数活动度目标）{

放大镜= $（var magnifierid）；

magnifier.style.position = 'relative；

图小/小

无功smalldiv =美元创造（div）；

smalldiv.setattribute（身份

smalldiv.style.position =绝对；

掩码层

变量掩码=创建（）；

mask.setattribute（身份

mask.style.position =绝对；

镜头

var镜像=创建（）；

mirror.setattribute（身份

mirror.style.opacity = 0.3；

mirror.style.position =绝对；

mirror.style.display =没有；

/小地图

smallimg = $（var创建IMG）；

smallimg.setattribute（src

smallimg.setattribute（身份

smallimg.onload =函数（）{

如果您没有设置放大镜的高度或宽度，根据小的图形大小设置放大镜的大小。

如果（！放大镜。offsetheight）{

magnifier.style.width =这。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）；

窗口

无功bigdiv =美元创造（div）；

bigdiv.setattribute（身份

bigdiv.style.position =绝对；

bigdiv.style.overflow =隐藏；

bigdiv.style.display =没有；

bigimg = $（var创建IMG）；

bigimg.setattribute（src

bigimg.setattribute（身份

bigimg.style.position =绝对；

bigdiv.appendchild（bigimg）；

magnifier.appendchild（smalldiv）；

magnifier.appendchild（bigdiv）；

}

功能setmagnifierstyle（mirrorstyle，shichuangstyle）{

/镜像

对于（在mirrorstyle var item）{

镜子。风格{项目} = mirrorstyle {项目}；

}

对于（在shichuangstyle var item）{

$（大）。风格{项目} = shichuangstyle {项目}；

}

}

功能registerevent（）{

$（面具）。onmouseover =函数（）{（）

$（大）。style.display =块；

mirror.style.display =块；

}

$(Mask).Onmouseout = function () {()

$（大）。style.display =没有；

mirror.style.display =没有；

}

$（面具）。Onmousemove =功能（EVT）{

无功oevent = EVT事件| |；

VaR disx = oevent.offsetx；

VaR Disy = oevent.offsety；

无功mirrorleft = disx - mirror.offsetwidth / 2；

无功mirrortop = Disy - mirror.offsetheight / 2；

如果（mirrorleft＜0）{

mirrorleft = 0；

}

如果（mirrorleft > mask.offsetwidth镜。offsetwidth）{

mirrorleft = mask.offsetwidth - mirror.offsetwidth；

}

如果（mirrortop＜0）{

mirrortop = 0；

}

如果（mirrortop > mask.offsetheight镜。offsetheight）{

MirrorTop = mask.offsetHeight - mirror.offsetHeight;

}

mirror.style.top = mirrortop +PX；

mirror.style.left = mirrorleft +PX；

VaR PAX = mirrortop /（mask.offsetheight镜。offsetheight）；

VaR的付出= mirrorleft /（mask.offsetwidth镜。offsetwidth）；

$（bigimg）。Style.top -帕克斯*（$（bigimg ）。offsetheight $（大）。OffsetHeight）+PX）；

$（bigimg）。Style.left =收入*（$（bigimg ）。offsetwidth $（大）。OffsetWidth）+PX）；

}

}

函数$（id）{

返回document.getelementbyid（ID）；

}

函数创建（类型）{

返回document.createelement（型）；

}
最后，送上小电话：

复制代码代码如下所示：

在window.onload =函数（）{

createElement（放大镜

setmagnifierstyle（{宽度：30px

RegisterEvent（）；

}
效果出来了。

2。then let's wrap it up.

镜类代码：

复制代码代码如下所示：

功能放大镜（

magnifierid，ID / /放大玻璃容器

SImg / /小图片的src

巴塞尔指数活动度目标 /大图片的src

mirrorstyle，小图片 /镜头风格，JSON格式的数据

viewstyle / /预览窗口风格，JSON格式的数据

{）

无功_this =这；

this.magnifiercontainer = null； / /容器

this.smalldiv = null； / /小地图的容器

this.mask = null； / /小地图图层蒙板

this.mirror = null； / /小图镜片

this.smallimg = null； / /小地图

this.bigdiv = null； / /预览

this.bigimg = null； / /图

函数（）{（）

_this.magnifiercontainer = _this美元（magnifierid）；

_this.createelement（SIMG，巴塞尔指数活动度目标）；

_this.setmagnifierstyle（mirrorstyle，viewstyle）；

_this.mainevent（）；

}

init（）；

}

magnifier.prototype.createelement =功能（SIMG，巴塞尔指数活动度目标）{

无功_this =这；

创建；

this.magnifiercontainer.style.position = 'relative '； / /从文件流，修正

this.smalldiv = $（div创建）；

this.smalldiv.setattribute（身份

this.smalldiv.style.position =绝对；

this.mask = $（div创建）；

this.mask.setattribute（身份

this.mask.style.position =绝对；

this.mirror = $（div创建）；

this.mirror.setattribute（身份

this.mirror.style.opacity = 0.3；

this.mirror.style.position =绝对；

this.mirror.style.display =没有；

this.smallimg = $（img创建）；

this.smallimg.setattribute（src

this.smallimg.setattribute（身份

this.smallimg.onload =函数（）{

如果您没有设置放大镜的高度或宽度，根据小的图形大小设置放大镜的大小。

如果（！_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.smalldiv.appendchild镜像。）；

this.smalldiv.appendchild（这个。smallimg）；

this.bigdiv = $（div创建）；

this.bigdiv.setattribute（身份

this.bigdiv.style.position =绝对；

this.bigdiv.style.overflow =隐藏；

this.bigdiv.style.display =没有；

this.bigimg = $（img创建）；

this.bigimg.setattribute（src

this.bigimg.setattribute（身份

this.bigimg.style.position =绝对；

this.bigdiv.appendchild（这个。bigimg）；

This.MagnifierContainer.appendChild (this.smallDiv);

this.magnifiercontainer.appendchild（这个。bigdiv）；

}

magnifier.prototype.setmagnifierstyle =功能（mirrorstyle，viewstyle）{

对于（在mirrorstyle var item）{

这个镜子。风格{项目} = mirrorstyle {项目}；

}

删除项目；

对于（在viewstyle var item）{

这个bigdiv。风格{项目} = viewstyle {项目}；

}

}

（magnifier.prototype.mainevent =功能）{

无功_this =这；

This.mask.onmouseover = function () {

_this.bigdiv.style.display =块；

_this.mirror.style.display =块；

}

this.mask.onmouseout =函数（）{

_this.bigdiv.style.display =没有；

_this.mirror.style.display =没有；

}

this.mask.onmousemove =功能（EVT）{

无功oevent = EVT事件| |；

VaR disx = oevent.offsetx oevent.layerx / FF兼容| |；

VaR Disy = oevent.offsety oevent.layery | |；

无功mirrorleft = disx - _this.mirror.offsetwidth / 2；

无功mirrortop = Disy - _this.mirror.offsetheight / 2；

如果（mirrorleft＜0）{

mirrorleft = 0；

}

如果（mirrorleft > this.offsetwidth - _this。镜子。offsetwidth）{

mirrorleft = this.offsetwidth - mirror.offsetwidth；

}

如果（mirrortop＜0）{

mirrortop = 0；

}

如果（mirrortop > this.offsetheight - _this。镜子。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。镜子。offsetheight）；

VaR工资= mirrorleft /（this.offsetwidth - _this。镜子。offsetwidth）；

_this.bigimg.style.top = -帕克斯*（_this.bigimg.offsetheight - _this。bigdiv。offsetheight）+PX；

_this.bigimg.style.left =收入×（_this.bigimg.offsetwidth - _this。bigdiv。offsetwidth）+PX；

}

}

放大镜。原型。$ =函数（id）{

返回document.getelementbyid（ID）；

}

放大镜.原型. $ =函数（类型）{

返回document.createelement（型）；

}
在onload调用结束：

复制代码代码如下所示：

在window.onload =函数（）{

新的放大镜（

放大镜

图像/放大镜小/ JPG

图像/放大镜

{宽度：30px

{宽度：250px

）；

}
以上是本文所描述的全部内容，希望您能喜欢。