jd或淘寶的具體商品有個放大鏡的效果。雖然網路上類似插件琳瑯滿目，應用在專案上有諸多不便，自己抽點時間自己寫了個類似插件，累積下程式碼，何樂而不為呢!!let‘go:
打算把此特效封裝成個插件，先把最基本的演算法實現，然後再一步步封裝吧：
最終實現效果：
html 代碼：
css 代碼：
似乎什麼都沒有，開始咱們強大的js之旅吧：
javascript 程式碼：
函數 createElement(MagnifierId, sImg, bImg) {
var 放大鏡 = $(MagnifierId);
Magnifier.style.position = '相對';
//小圖div
var SmallDiv = $Create("div");
smallDiv.setAttribute("id", "small");
SmallDiv.style.position = "絕對";
//遮罩層
var mask = $Create("div");
mask.setAttribute("id", "mask");
mask.style.position = "絕對";
// 鏡頭
varmirror = $Create("div");
mirror.setAttribute("id", "mirror");
mirror.style.opacity = 0.3;
mirror.style.position = "絕對";
mirror.style.display = "無";
//小圖
var SmallImg = $Create("img");
SmallImg.setAttribute("src", sImg);
smallImg.setAttribute("id", "smallImg");
SmallImg.onload = function () {
//如果沒有設定放大鏡的高度或寬度依小圖大小設定放大鏡大小
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 = "絕對";
bigDiv.style.overflow = "隱藏";
bigDiv.style.display = "none";
var bigImg = $Create("img");
bigImg.setAttribute("src", bImg);
bigImg.setAttribute("id", "bigImg");
bigImg.style.position = "絕對";
bigDiv.appendChild(bigImg);
Magnifier.appendChild(smallDiv);
Magnifier.appendChild(bigDiv);
}
function setMagnifierStyle(mirrorStyle,shichuangStyle) {
// 鏡子
for (mirrorStyle 中的 var item) {
mirror.style[item] =mirrorStyle[item];
}
for (shichuangStyle 中的 var item) {
$("big").style[item] = shichuangStyle[item];
}
}
函數registerEvent() {
$("mask").onmouseover = function () {
$("big").style.display = "block";
mirror.style.display = "block";
}
$("mask").onmouseout = function () {
$("big").style.display = "none";
mirror.style.display = "無";
}
$("mask").onmousemove = function (evt) {
var oEvent = evt ||事件；
var disX = oEvent.offsetX;
var disY = oEvent.offsetY;
varmirrorLeft=disX-mirror.offsetWidth/2;
varmirrorTop=disY-mirror.offsetHeight/2;
if (mirrorLeft
鏡像左 = 0;
}
else if (mirrorLeft > mask.offsetWidth -mirror.offsetWidth) {
mirrorLeft = mask.offsetWidth -mirror.offsetWidth;
}
if (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";
}
}
函數 $(id) {
return document.getElementById(id);
}
函數 $Create(類型) {
return document.createElement(type);
}
最後重新加載搶奪：
window.onload = function () {
createElement("放大鏡", "images/Magnifier/small.jpg", "images/Magnifier/big.jpg");
setMagnifierStyle({ "width": "30px", "height": "30px", "backgroundColor": "#fff" }, { "width": "250px", "height": "250px" });
註冊事件();
}
算效果總出來了耶，
2. 我們接下來的封裝：
放大鏡類別代碼：
function Magnifier(
MagnifierId,
sImg,
Img,
mirrorStyle,
ViewStyle
) {
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 (mirrorStyle 中的 var item) {
this.mirror.style[item] =mirrorStyle[item];
}
刪除項目；
for (ViewStyle 中的 var item) {
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 = "無";
}
this.mask.onmousemove = function (evt) {
var oEvent = evt ||事件；
var disX = oEvent.offsetX || oEvent.layerX; //相容ff
var disY = oEvent.offsetY || oEvent.layerY;
varmirrorLeft = disX - _this.mirror.offsetWidth / 2;
varmirrorTop = disY - _this.mirror.offsetHeight / 2;
if (mirrorLeft
鏡像左 = 0;
}
else if (mirrorLeft > this.offsetWidth - _this.mirror.offsetWidth) {
mirrorLeft = this.offsetWidth -mirror.offsetWidth;
}
if (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.$ = 関数 (id) {
return document.getElementById(id);
}
Magnifier.prototype.$Create = 関数 (型) {
return document.createElement(type);
}
最後にonload调用下：
window.onload = function () {
新しい拡大鏡(
「拡大鏡」、
"images/Magnifier/small.jpg",
"images/Magnifier/big.jpg",
{ "幅": "30px"、"高さ": "30px"、"backgroundColor": "#fff" },
{ "幅": "250px"、"高さ": "250px" }
);
}
以上が本明細書に記載されている内容のすべてです。
