本文給大家分享的是使用純javascript實現(xiàn)放大鏡效果的代碼，并附上封裝的步驟，做電商程序的小伙伴們一定不要錯過。

jd或者淘寶的具體商品有個放大鏡的效果。雖然網(wǎng)上類似插件琳瑯滿目，應(yīng)用到項目上有諸多不便，自己抽點時間自己寫了個類似插件，積累下代碼，何樂而不為呢!!let‘go:

打算把此特效封裝成個插件，先把最基本的算法實現(xiàn)，然后再一步步封裝吧：

最終實現(xiàn)效果：

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

//如果沒設(shè)置放大鏡的height或者width 根據(jù)小圖大小設(shè)置放大鏡大小

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小小的調(diào)用一下：

代碼如下:

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格式數(shù)據(jù)

ViewStyle //預(yù)覽視窗樣式，json格式數(shù)據(jù)

) {

var _this = this;

this.MagnifierContainer = null; //容器

this.smallDiv = null; //小圖容器

this.mask = null; //小圖遮罩層

this.mirror = null; //小圖鏡片

this.smallImg = null; //小圖

this.bigDiv = null; //預(yù)覽視圖

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

//如果沒設(shè)置放大鏡的height或者width 根據(jù)小圖大小設(shè)置放大鏡大小

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調(diào)用下：

代碼如下:

window.onload = function () {

new Magnifier(

"Magnifier",

"images/Magnifier/small.jpg",

"images/Magnifier/big.jpg",

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

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

);

}

以上就是本文所述的全部內(nèi)容了，希望大家能夠喜歡。

更多信息請查看IT技術(shù)專欄