电子商务网站上的常用的js放大镜效果


Posted in Javascript onDecember 08, 2011
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*/ 
/*如果给它绑定事件处理函数,IE中不设置background-color属性就不触发事件*/ } 
</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; 
}, 
//计算放大蒙版位置 
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) 
</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*/ 
/*如果给它绑定事件处理函数,IE中不设置background-color属性就不触发事件*/ } 
</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; 
}, 
//计算放大蒙版位置 
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) 
</script> 
</body> 
</html>
Javascript 相关文章推荐
javascript document.images实例
May 27 Javascript
Ext面向对象开发实践(续)
Nov 18 Javascript
小议Javascript中的this指针
Mar 18 Javascript
js 实现css风格选择器(压缩后2KB)
Jan 12 Javascript
javascript实现淘宝幻灯片广告展示效果
Apr 27 Javascript
JS实现支持多选的遍历下拉列表代码
Aug 20 Javascript
Javascript技术难点之apply,call与this之间的衔接
Dec 04 Javascript
jquery调整表格行tr上下顺序实例讲解
Jan 09 Javascript
Vue2.0结合webuploader实现文件分片上传功能
Mar 09 Javascript
vue 移动端适配方案详解
Nov 15 Javascript
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 Javascript
jquery.pager.js分页实现详解
Jul 29 jQuery
常见JS效果之图片减速度滚动实现代码
Dec 08 #Javascript
JQuery循环滚动图片代码
Dec 08 #Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
Dec 08 #Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
Dec 08 #Javascript
js中document.getElementByid、document.all和document.layers区分介绍
Dec 08 #Javascript
基于jquery的代码显示区域自动拉长效果
Dec 07 #Javascript
5个javascript的数字格式化函数分享
Dec 07 #Javascript
You might like
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
javascript 四则运算精度修正函数代码
2010/05/31 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
2011/05/09 Javascript
js+html5实现canvas绘制圆形图案的方法
2015/06/05 Javascript
JavaScript Ajax编程 应用篇
2016/07/02 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
2017/01/05 Javascript
javascript判断回文数详解及实现代码
2017/02/03 Javascript
微信小程序左右滑动切换页面详解及实例代码
2017/02/28 Javascript
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
create-react-app修改为多页面支持的方法
2018/05/17 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
一百行JS代码实现一个校验工具
2019/04/30 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
Vue中util的工具函数实例详解
2019/07/08 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
vue 避免变量赋值后双向绑定的操作
2020/11/07 Javascript
linux服务器快速卸载安装node环境(简单上手)
2021/02/22 Javascript
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
Python调用命令行进度条的方法
2015/05/05 Python
ubuntu中配置pyqt4环境教程
2017/12/27 Python
完美解决安装完tensorflow后pip无法使用的问题
2018/06/11 Python
python主线程与子线程的结束顺序实例解析
2019/12/17 Python
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
详解HTML5中的picture元素响应式处理图片
2018/01/03 HTML / CSS
尤为Wconcept中国官网:韩国设计师品牌服饰
2019/01/10 全球购物
Footshop法国:购买运动鞋
2020/01/19 全球购物
物业客服专员岗位职责
2013/11/30 职场文书
园林资料员岗位职责
2013/12/30 职场文书
应用化学专业职业生涯规划书
2013/12/31 职场文书
平安校园建设方案
2014/05/02 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
千与千寻观后感
2015/06/04 职场文书
村主任当选感言
2015/08/01 职场文书
Python IO文件管理的具体使用
2022/03/20 Python
Python中time与datetime模块使用方法详解
2022/03/31 Python