電子商務(wù)網(wǎng)站上的常用的js放大鏡效果
更新時(shí)間：2011年12月08日 23:22:55 作者：
電子商務(wù)網(wǎng)站經(jīng)常用到簡(jiǎn)單模仿一下,需要的朋友可以參考下。
復(fù)制代碼 代碼如下:
jsFiddleRun again Edit this fiddle Result HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>放大鏡</title>
<style>
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*/
/*如果給它綁定事件處理函數(shù)，IE中不設(shè)置background-color屬性就不觸發(fā)事件*/ }
</style>
</head>
<body>
<div>
<div class="mod_zoom">
<div class="p1" id="p1">
<img src="http://img14.360buyimg.com/n1/4071/b350e77e-fc74-4173-81b5-dfe54f425ef6.jpg" id="z1" />
<span class="mask" id="m"></span>
<span class="ph" id="eventproxy"></span>
</div>
<div class="p2" id="p2">
<img src="http://img14.360buyimg.com/n0/4071/b350e77e-fc74-4173-81b5-dfe54f425ef6.jpg" class="img" id="z2" />
</div>
</div>
</div>
<script>
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;
},
//計(jì)算放大蒙版位置
zoom: function(clientX, clientY){
var self = this,
//位置比例
rate = {},
//放大蒙版最大活動(dòng)范圍
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;//防止元素大小計(jì)算錯(cuò)誤
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)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>放大鏡</title>
<style>
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*/
/*如果給它綁定事件處理函數(shù)，IE中不設(shè)置background-color屬性就不觸發(fā)事件*/ }
</style>
</head>
<body>
<div>
<div class="mod_zoom">
<div class="p1" id="p1">
<img src="http://img14.360buyimg.com/n1/4071/b350e77e-fc74-4173-81b5-dfe54f425ef6.jpg" id="z1" />
<span class="mask" id="m"></span>
<span class="ph" id="eventproxy"></span>
</div>
<div class="p2" id="p2">
<img src="http://img14.360buyimg.com/n0/4071/b350e77e-fc74-4173-81b5-dfe54f425ef6.jpg" class="img" id="z2" />
</div>
</div>
</div>
<script>
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;
},
//計(jì)算放大蒙版位置
zoom: function(clientX, clientY){
var self = this,
//位置比例
rate = {},
//放大蒙版最大活動(dòng)范圍
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;//防止元素大小計(jì)算錯(cuò)誤
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)
</script>
</body>
</html>
相關(guān)文章
下面的演示可能存在一些與頁(yè)面JS沖突的問(wèn)題。如果想要演示或者完整的放大效果 html2010-05-05
javascript橢圓旋轉(zhuǎn)相冊(cè)實(shí)現(xiàn)代碼
支持自動(dòng)和手動(dòng)兩種模式：自動(dòng)模式下自動(dòng)旋轉(zhuǎn)展示，手動(dòng)模式下通過(guò)鼠標(biāo)選擇當(dāng)前圖片，或通過(guò)提供的接口選擇上一張/下一張圖片2012-01-01
js與自動(dòng)伸縮圖片 自動(dòng)縮小圖片的多瀏覽器兼容的方法總結(jié)
js與自動(dòng)伸縮圖片 自動(dòng)縮小圖片的多瀏覽器兼容的方法總結(jié)...2007-03-03
網(wǎng)上比較常見的用jquery實(shí)現(xiàn)的圖片輪播效果代碼。2008-12-12
兼容ie、firefox的圖片自動(dòng)縮放的css跟js代碼分享
這個(gè)功能主要是解決內(nèi)容頁(yè)中的圖片過(guò)大撐出，導(dǎo)致頁(yè)面比較難看，就需要這樣的代碼，需要的朋友可以參考下2012-01-01
TFDN圖片播放器 不錯(cuò)自動(dòng)播放...2006-10-10
JavaScript妙味課堂上的一個(gè)教學(xué)實(shí)例，物體平移運(yùn)動(dòng)特效，點(diǎn)擊按鈕后激活函數(shù)，控制圖片在一定時(shí)間內(nèi)勻速運(yùn)動(dòng)，是最簡(jiǎn)單、最基礎(chǔ)的運(yùn)動(dòng)方式，其特點(diǎn)是運(yùn)動(dòng)的方向和速度都不發(fā)生改變。2010-09-09
用dom+xhtml+css制作的一個(gè)相冊(cè)效果代碼打包下載
2008-01-01
javascript 動(dòng)態(tài)調(diào)整圖片尺寸實(shí)現(xiàn)代碼
在自己的網(wǎng)站上更新文章時(shí)一個(gè)比較常見的問(wèn)題是：文章插圖太寬，使整個(gè)網(wǎng)頁(yè)都變形了。如果對(duì)每個(gè)插圖都先進(jìn)行縮放再插入的話，太麻煩了。2009-12-12
發(fā)一個(gè)自己用JS寫的實(shí)用看圖工具實(shí)現(xiàn)代碼
所以決定慢慢來(lái)照顧一下博客吧，這里先把眼前就有的一個(gè)小東西拿出來(lái)和大家分享一下，這是2006年的時(shí)候（文本里記下了時(shí)間，不然也忘記了）為了自己看網(wǎng)絡(luò)圖片方便而寫的。2008-07-07