使用纯javascript实现放大镜效果_javascript技巧

js教程评论246 views阅读模式

jd或者淘宝的具体商品有个放大镜的效果。虽然网上类似插件琳琅满目，应用到项目上有诸多不便，自己抽点时间自己写了个类似插件，积累下代码，何乐而不为呢!!let‘go:

打算把此特效封装成个插件，先把最基本的算法实现，然后再一步步封装吧：

最终实现效果：

html 代码：

复制代码 代码如下:

css 代码：

复制代码 代码如下:

貌似什么都没有，开始咱们强大的js之旅吧：

javascript 代码：

复制代码 代码如下:

function createElement(MagnifierId, sImg, bImg) {

var Magnifier = $(MagnifierId);

Magnifier.style.position = 'relative';

//小图div

var smallDiv = $Create("div");

smallDiv.setAttribute("id", "small");

smallDiv.style.position = "absolute";

//遮罩层

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 () {

//如果没设置放大镜的height或者width 根据小图大小设置放大镜大小

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(mask);

smallDiv.appendChild(mirror);

smallDiv.appendChild(smallImg);

//视窗

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);

Magnifier.appendChild(smallDiv);

Magnifier.appendChild(bigDiv);

}

function setMagnifierStyle(mirrorStyle,shichuangStyle) {

//mirror

for (var item in mirrorStyle) {

mirror.style[item] = mirrorStyle[item];

}

for (var item in shichuangStyle) {

$("big").style[item] = shichuangStyle[item];

}

}

function registerEvent() {

$("mask").onmouseover = function () {

$("big").style.display = "block";

mirror.style.display = "block";

}

$("mask").onmouseout = function () {

$("big").style.display = "none";

mirror.style.display = "none";

}

$("mask").onmousemove = function (evt) {

var oEvent = evt || event;

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;

}

else if (mirrorLeft > mask.offsetWidth - mirror.offsetWidth) {

mirrorLeft = mask.offsetWidth - mirror.offsetWidth;

}

if (mirrorTop < 0) {

mirrorTop = 0;

}

else 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";

}

}

function $(id) {

return document.getElementById(id);

}

function $Create(type) {

return document.createElement(type);

}

最后再 onload小小的调用一下：

复制代码 代码如下:

window.onload = function () {

createElement("Magnifier", "images/Magnifier/small.jpg", "images/Magnifier/big.jpg");

setMagnifierStyle({ "width": "30px", "height": "30px", "backgroundColor": "#fff" }, { "width": "250px", "height": "250px" });

registerEvent();

}

效果总算出来了耶，

2. 接下来咱们封装吧：

Magnifer类代码：

复制代码 代码如下:

function Magnifier(

MagnifierId, //放大镜容器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 = function (sImg, bImg) {

var _this = this;

var $Create = this.$Create;

this.MagnifierContainer.style.position = 'relative'; //脱离文档流，视情况修改

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 () {

//如果没设置放大镜的height或者width 根据小图大小设置放大镜大小

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) {

for (var item in mirrorStyle) {

this.mirror.style[item] = mirrorStyle[item];

}

delete item;

for (var item in 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 = function (evt) {

var oEvent = evt || event;

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;

}

else if (mirrorLeft > this.offsetWidth - _this.mirror.offsetWidth) {

mirrorLeft = this.offsetWidth - mirror.offsetWidth;

}

if (mirrorTop < 0) {

mirrorTop = 0;

}

else 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);

}

最后在onload调用下：

复制代码 代码如下:

window.onload = function () {

new Magnifier(

"Magnifier",

"images/Magnifier/small.jpg",

"images/Magnifier/big.jpg",

{ "width": "30px", "height": "30px", "backgroundColor": "#fff" },

{ "width": "250px", "height": "250px" }

);

}

以上就是本文所述的全部内容了，希望大家能够喜欢。

企鹅博客
  • 本文由 发表于 2020年9月19日 02:34:37
  • 转载请务必保留本文链接：https://www.qieseo.com/414593.html

发表评论