jd或者淘宝的具体商品有个放大镜的效果。虽然网上类似插件琳琅满目，应用到项目上有诸多不便，自己抽点时间自己写了个类似插件，积累下代码，何乐而不为呢!!let‘go:
打算把此特效封装成个插件，先把最基本的算法实现，然后再一步步封装吧：
最终实现效果：
html 代码：
代码如下:
css 代码：
代码如下:
* {
margin: 0;
padding: 0;
}
貌似什么都没有，开始咱们强大的js之旅吧：
javascript 代码：
代码如下:
SEOver = 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小小的调用一下：
代码如下:
效果总算出来了耶，
2. 接下来咱们封装吧：
Magnifer类代码：
代码如下:
图片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调用下：
代码如下:
以上就是本文所述的全部内容了，希望大家能够喜欢。
原文链接：https://www.f2er.com/js/55224.html