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 the code, why not do it!! let'go:
Final effect:
html code:
<div id="Magnifier"></div>
css code:
<style> * { margin: 0; padding: 0; } </style>It seems there is nothing, let’s start with 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); }Finally, make a small onload call:
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(); }The effect is finally out,
2. Next let’s encapsulate:
Magnifer class code:
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); }Finally under the onload call:
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)
