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 mirrorleft = 0;
}
else if (mirrorleft > mask.offsetwidth - mirror.offsetwidth) {
mirrorleft = mask.offsetwidth - mirror.offsetwidth;
}
if (mirrortop 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 mirrorleft = 0;
}
else if (mirrorleft > this.offsetwidth - _this.mirror.offsetwidth) {
mirrorleft = this.offsetwidth - mirror.offsetwidth;
}
if (mirrortop 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 }
);
}
以上就是本文所述的全部内容了,希望大家能够喜欢。