html js 放大镜,电商网站上常用的js放大镜效果(京东商城的js放大镜代码)

本节主要内容:

js放大镜效果，用于电子商务网站上的js放大镜代码。

例子：

复制代码 代码示例:

js放大镜-www.jquerycn.cn

img{ vertical-align:bottom;}

.mod_zoom{ overflow:hidden; zoom:1;}

.mod_zoom .p1 { float:left; position:relative; height:350px; width:350px; margin-right:5px; }

.mod_zoom .p1 .mask{ position:absolute; left:0; top:0; width:175px; height:175px; background-color:#fede4f; opacity:0.3; filter: alpha(opacity=30); display:none; }

.mod_zoom .p2{ position:relative; width:400px; height:400px; overflow:hidden; display:none;}

.mod_zoom .p2 .img{ position:absolute; left:0; top:0;}

.mod_zoom .ph{width:100%; height:350px; position:absolute; top:0; left:0; cursor:crosshair;

/*background-color:red*/

/*如果给它绑定事件处理函数，IE中不设置background-color属性就不触发事件*/ }

function PhotoZoomer(elements){

this.mask = elements.mask; //蒙版

this.container = elements.container //原图容器

this.originimg = elements.originimg; //原图

this.eventproxy = elements.eventproxy;

this.bigContainer = elements.bigContainer; //大图容器

this.bigimg = elements.bigimg; //大图

this.visible = false;

this._bind();

}

PhotoZoomer.prototype = {

display: function(style){

var self = this;

self.mask.style.display = style;

self.bigContainer.style.display = style;

},

//计算放大蒙版位置

zoom: function(clientX, clientY){

var self = this,

//位置比例

rate = {},

//放大蒙版最大活动范围

maxrange = {

offsetLeft: self.container.offsetWidth - self.mask.offsetWidth,

offsetTop: self.container.offsetHeight - self.mask.offsetHeight

},

//mask left

left = clientX - self.container.offsetLeft - self.mask.offsetWidth/2,

//mask top

top = clientY - self.container.offsetTop - self.mask.offsetHeight/2;

if(left < 0) {

left = 0;

}else if(left> maxrange.offsetLeft) {

left = maxrange.offsetLeft;

}

if(top < 0) {

top = 0;

}else if(top > maxrange.offsetTop){

top = maxrange.offsetTop;

}

//alert(maxrange.offsetTop);

rate.left = left / maxrange.offsetLeft;

rate.top = top / maxrange.offsetTop;

self.mask.style.left = left + 'px';

self.mask.style.top = top + 'px';

self.bigimg.style.left = -rate.left * (self.bigimg.offsetWidth - self.bigContainer.offsetWidth) + "px";

self.bigimg.style.top = -rate.top * (self.bigimg.offsetHeight - self.bigContainer.offsetHeight) + "px";

},

_bind: function(){

var self = this;

self.container.onmouseover = function(e){

e = e || window.event;

var target = e.targe || e.srcElement;

self.display("block");

this.visible = true;

};

self.container.onmouseout = function(e){

e = e || window.event;

var target = e.targe || e.srcElement;

self.display("none");

this.visible = false;

};

self.container.onmousemove = function(e){

e = e || window.event;

if(!this.visible )return;//防止元素大小计算错误

self.zoom(e.clientX, e.clientY);

};

}

};

function get(id){

return document.getElementById(id)

}

var elements = {

mask: get("m"),

container: get("p1"),

originimg: get("z1"),

bigContainer: get("p2"),

bigimg: get("z2"),

eventproxy: get("eventproxy")

};

var zoomer = new PhotoZoomer(elements);

// alert(elements.container.offsetParent.tagName)

放大镜

img{ vertical-align:bottom;}

.mod_zoom{ overflow:hidden; zoom:1;}

.mod_zoom .p1 { float:left; position:relative; height:350px; width:350px; margin-right:5px; }

.mod_zoom .p1 .mask{ position:absolute; left:0; top:0; width:175px; height:175px; background-color:#fede4f; opacity:0.3; filter: alpha(opacity=30); display:none; }

.mod_zoom .p2{ position:relative; width:400px; height:400px; overflow:hidden; display:none;}

.mod_zoom .p2 .img{ position:absolute; left:0; top:0;}

.mod_zoom .ph{width:100%; height:350px; position:absolute; top:0; left:0; cursor:crosshair;

/*background-color:red*/

/*如果给它绑定事件处理函数，IE中不设置background-color属性就不触发事件*/ }

function PhotoZoomer(elements){

this.mask = elements.mask; //蒙版

this.container = elements.container //原图容器

this.originimg = elements.originimg; //原图

this.eventproxy = elements.eventproxy;

this.bigContainer = elements.bigContainer; //大图容器

this.bigimg = elements.bigimg; //大图

this.visible = false;

this._bind();

}

PhotoZoomer.prototype = {

display: function(style){

var self = this;

self.mask.style.display = style;

self.bigContainer.style.display = style;

},

//计算放大蒙版位置

zoom: function(clientX, clientY){

var self = this,

//位置比例

rate = {},

//放大蒙版最大活动范围

maxrange = {

offsetLeft: self.container.offsetWidth - self.mask.offsetWidth,

offsetTop: self.container.offsetHeight - self.mask.offsetHeight

},

//mask left

left = clientX - self.container.offsetLeft - self.mask.offsetWidth/2,

//mask top

top = clientY - self.container.offsetTop - self.mask.offsetHeight/2;

if(left < 0) {

left = 0;

}else if(left> maxrange.offsetLeft) {

left = maxrange.offsetLeft;

}

if(top < 0) {

top = 0;

}else if(top > maxrange.offsetTop){

top = maxrange.offsetTop;

}

//alert(maxrange.offsetTop);

rate.left = left / maxrange.offsetLeft;

rate.top = top / maxrange.offsetTop;

self.mask.style.left = left + 'px';

self.mask.style.top = top + 'px';

self.bigimg.style.left = -rate.left * (self.bigimg.offsetWidth - self.bigContainer.offsetWidth) + "px";

self.bigimg.style.top = -rate.top * (self.bigimg.offsetHeight - self.bigContainer.offsetHeight) + "px";

},

_bind: function(){

var self = this;

self.container.onmouseover = function(e){

e = e || window.event;

var target = e.targe || e.srcElement;

self.display("block");

this.visible = true;

};

self.container.onmouseout = function(e){

e = e || window.event;

var target = e.targe || e.srcElement;

self.display("none");

this.visible = false;

};

self.container.onmousemove = function(e){

e = e || window.event;

if(!this.visible )return;//防止元素大小计算错误

self.zoom(e.clientX, e.clientY);

};

}

};

function get(id){

return document.getElementById(id)

}

var elements = {

mask: get("m"),

container: get("p1"),

originimg: get("z1"),

bigContainer: get("p2"),

bigimg: get("z2"),

eventproxy: get("eventproxy")

};

var zoomer = new PhotoZoomer(elements);

// alert(elements.container.offsetParent.tagName)