js-放大镜效果
浏览数：59 /
时间：2015年06月09日
jd或者淘宝的具体商品有个放大镜的效果。虽然网上类似插件琳琅满目，应用到项目上有诸多不便，自己抽点时间自己写了个类似插件，积累下代码，何乐而不为呢!!let‘go:
- 打算把此特效封装成个插件，先把最基本的算法实现，然后再一步步封装吧：
最终实现效果：
html 代码：
<div id="Magnifier"></div>
css 代码：
<style> * { margin: 0; padding: 0; } </style>
貌似什么都没有，开始咱们强大的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" } ); }
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
