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 mask.offsetwidth - mirror.offsetwidth) { mirrorleft = mask.offsetwidth - mirror.offsetwidth; } 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 this.offsetwidth - _this.mirror.offsetwidth) { mirrorleft = this.offsetwidth - mirror.offsetwidth; } 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 } ); }