JD or Taobao’s specific products have a magnifying glass effect. Although there are many similar plug-ins on the Internet, there are many inconveniences in applying them to projects. If you take some time to write a similar plug-in yourself and accumulate code, why not do it!! let’go:
I plan to encapsulate this special effect into a plug-in. First implement the most basic algorithm, and then encapsulate it step by step:
Final effect:
html code:
css code:
It seems like there is nothing, let’s start our powerful js journey:
javascript code:
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, // magnifying the mirror container ID
sImg,
bImg, because
MirrorStyle, // In the small picture lens style, json format data
) {
var _this = this;
This.MagnifierContainer = null; //Container
This.smallDiv = null; //Small image container
This.mask = null; //Small image mask layer
this.mirror = null;
This.smallImg = null; //Small image
This.bigDiv = null; //Preview view
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'; //Get out of the document flow and modify it as appropriate
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 the height or width of the magnifying glass is not set, set the size of the magnifying glass according to the size of the thumbnail
If (!_this.MagnifierContainer.offsetHeight) {
_this.MagnifierContainer.style.width = this.offsetWidth "px";
_this.MagnifierContainer.style.height = this.offsetHeight "px";
}
//The size of the mask layer is the same as the small image
_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" }
);
}
以上就是本文所述的全部内容了，希望大家能够喜欢。
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
