电子商务网站上的常用的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中call()方法引发的对面向对象继承机制call的思考
Sep 12 Javascript
模拟select的代码
Oct 19 Javascript
jquery图片放大功能简单实现
Aug 01 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
Mar 28 Javascript
js获取IP地址的方法小结
Jul 01 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
在JSP中如何实现MD5加密的方法
Nov 02 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
Nov 28 Javascript
概述如何实现一个简单的浏览器端js模块加载器
Dec 07 Javascript
详谈js模块化规范
Jul 07 Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
vue+echarts实现多条折线图
Mar 21 Vue.js
常见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
Zend Framework教程之请求对象的封装Zend_Controller_Request实例详解
2016/03/07 PHP
javascript中String类的subString()方法和slice()方法
2011/05/24 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
2013/09/02 Javascript
基于jquery实现的文字淡入淡出效果
2013/11/14 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
2014/01/09 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
2014/04/02 Javascript
JS获取当前网页大小以及屏幕分辨率等
2014/09/05 Javascript
jQuery使用元素属性attr赋值详解
2015/02/27 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
2016/05/03 Javascript
原生js实现水平方向无缝滚动
2017/01/10 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
2017/05/12 Javascript
js 图片转base64的方式(两种)
2018/04/24 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
2018/05/14 Javascript
Vue组件之高德地图地址选择功能的实例代码
2019/06/21 Javascript
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
如何优雅地在Node应用中进行错误异常处理
2019/11/25 Javascript
Python使用pylab库实现画线功能的方法详解
2017/06/08 Python
Scrapy框架CrawlSpiders的介绍以及使用详解
2017/11/29 Python
Python Unittest自动化单元测试框架详解
2018/04/04 Python
TensorFlow的权值更新方法
2018/06/14 Python
python web框架中实现原生分页
2019/09/08 Python
python多继承(钻石继承)问题和解决方法简单示例
2019/10/21 Python
Python解析json代码实例解析
2019/11/25 Python
500行python代码实现飞机大战
2020/04/24 Python
python filecmp.dircmp实现递归比对两个目录的方法
2020/05/22 Python
python如何实现图片压缩
2020/09/11 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
压铸汽车模型收藏家:Diecastmodelswholesale.com
2016/12/21 全球购物
大码女装:Ulla Popken
2019/08/06 全球购物
董事长致辞
2015/07/29 职场文书
丧事答谢词大全
2015/09/30 职场文书
2016年小学优秀班主任事迹材料
2016/02/29 职场文书
Go Gin实现文件上传下载的示例代码
2021/04/02 Golang
python爬取豆瓣电影TOP250数据
2021/05/23 Python
《艾尔登法环》发布最新「战技」宣传片
2022/04/03 其他游戏