首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

电子商务网站上的常用的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>

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript延迟加载
Mar 09 Javascript
脚本收藏iframe
Jul 21 Javascript
JavaScript高级程序设计 DOM学习笔记
Sep 10 Javascript
最佳的addEvent事件绑定是怎样诞生的
Oct 24 Javascript
JS如何将UTC格式时间转本地格式
Sep 04 Javascript
node.js中的fs.lchmod方法使用说明
Dec 16 Javascript
详解微信小程序 wx.uploadFile 的编码坑
Jan 23 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
Mar 08 Javascript
使用jQuery实现简单的tab框实例
Aug 22 jQuery
js 毫秒转天时分秒的实例
Nov 17 Javascript
Bootstrap Table列宽拖动的方法
Aug 15 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 Javascript
常见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
希腊购物网站(6) 越南购物网站(9) 罗马尼亚购物网站(10) 亚洲购物网站(6) 乌克兰购物网站(27) 摩纳哥购物网站(1) 北美洲购物网站(1) 巴基斯坦购物网站(2) 匈牙利购物网站(11) 缅甸购物网站(1)
You might like
php递归实现无限分类生成下拉列表的函数
2010/08/08 PHP
如何让thinkphp在模型中自动完成session赋值小教程
2014/09/05 PHP
php cookie中点号（句号）自动转为下划线问题
2014/10/21 PHP
php中array_column函数简单实现方法
2016/07/11 PHP
PHP7常量数组用法分析
2016/09/26 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
JS异步文件分片断点上传的实现思路
2016/12/25 Javascript
node.js实现复制文本到剪切板的功能
2017/01/23 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
2017/12/24 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
2018/04/10 Javascript
详解webpack运行Babel教程
2018/06/13 Javascript
基于vue如何发布一个npm包的方法步骤
2019/05/15 Javascript
countup.js实现数字动态叠加效果
2019/10/17 Javascript
Vue设置长时间未操作登录自动到期返回登录页
2020/01/22 Javascript
js实现简单扫雷
2020/11/27 Javascript
详解阿里Node.js技术文档之process模块学习指南
2021/01/04 Javascript
[04:11]DOTA2上海特级锦标赛主赛事首日TOP10
2016/03/03 DOTA
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
对Python 两大环境管理神器 pyenv 和 virtualenv详解
2018/12/31 Python
python爬虫爬取微博评论案例详解
2019/03/27 Python
python修改字典键（key）的方法
2019/08/05 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
MAC平台基于Python Appium环境搭建过程图解
2020/08/13 Python
Python通用唯一标识符uuid模块使用案例
2020/09/10 Python
Django admin组件的使用
2020/10/24 Python
StubHub智利：购买和出售您的门票
2016/11/23 全球购物
给民警的表扬信
2014/01/08 职场文书
主管会计岗位职责
2014/03/13 职场文书
高三上学期学习自我评价
2014/04/23 职场文书
英语教育专业毕业生求职信
2014/08/28 职场文书
2015年超市工作总结范文
2015/05/26 职场文书
2016十一国庆节感言
2015/12/09 职场文书
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS