首页
所有分类
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 相关文章推荐
JS target与currentTarget区别说明
Aug 28 Javascript
JQuery判断HTML元素是否存在的两种解决方法
Dec 26 Javascript
javascript闭包入门示例
Apr 30 Javascript
chrome下jq width()方法取值为0的解决方法
May 26 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
Jun 12 Javascript
Javascript发送AJAX请求实例代码
Aug 21 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
Nov 22 Javascript
angular学习之从零搭建一个angular4.0项目
Jul 10 Javascript
vue解决跨域路由冲突问题思路解析
Nov 03 Javascript
vue element-ui table表格滚动加载方法
Mar 02 Javascript
JS使用setInterval实现的简单计时器功能示例
Apr 19 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
Sep 14 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
Normal From(1) css3 (2) JSON(10) MapReduce(1) pyqt5(3) linux(15) DFA(1) pycharm(6) MybatisPlus(2) Qlabel(1)
You might like
php数据库备份还原类分享
2014/03/20 PHP
PHP定时执行任务的3种方法详解
2015/12/21 PHP
PHP array_shift()用法实例分析
2019/01/07 PHP
javascript动态添加删除tabs标签的方法
2015/07/06 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供）
2016/12/26 Javascript
jQuery实现页面顶部下拉广告
2016/12/30 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
详解在 Angular 项目中添加 clean-blog 模板
2017/07/04 Javascript
让你彻底掌握es6 Promise的八段代码
2017/07/26 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
使用typescript开发angular模块并发布npm包
2018/04/19 Javascript
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
微信小程序点击滚动到指定位置的实现
2020/05/22 Javascript
Python re模块介绍
2014/11/30 Python
Python数据分析中Groupby用法之通过字典或Series进行分组的实例
2017/12/08 Python
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
pytorch使用指定GPU训练的实例
2019/08/19 Python
python中栈的原理及实现方法示例
2019/11/27 Python
如何利用Python写个坦克大战
2020/11/18 Python
Python基于Faker假数据构造库
2020/11/30 Python
css3中flex布局宽度不生效的解决
2020/12/09 HTML / CSS
苹果香港官方商城：Apple香港
2016/09/14 全球购物
创联软件面试题笔试题
2012/10/07 面试题
部队万能检讨书
2014/02/20 职场文书
爱与责任演讲稿
2014/05/20 职场文书
2014年党建工作总结
2014/11/11 职场文书
2014年车间工作总结
2014/11/21 职场文书
离婚协议书范文
2015/01/26 职场文书
小学教师师德师风自我评价
2015/03/04 职场文书
正规借条模板
2015/05/26 职场文书
教师节简报
2015/07/20 职场文书
远程教育培训心得体会
2016/01/09 职场文书
幼儿园教学反思范文
2016/03/02 职场文书
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python