首页
所有分类
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 相关文章推荐
事件模型在各浏览器中存在差异
Oct 20 Javascript
JS分割字符串并放入数组的函数
Jul 04 Javascript
js中关于一个分号的崩溃示例
Nov 11 Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
Aug 11 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
Nov 18 Javascript
JS实现图片预加载之无序预加载功能代码
May 12 Javascript
详解Vue.js搭建路由报错 router.map is not a function
Jun 27 Javascript
angular.js实现列表orderby排序的方法
Oct 02 Javascript
Vue函数式组件-你值得拥有
May 09 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
May 30 Javascript
Vue 禁用浏览器的前进后退操作
Sep 04 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
RTX 3050 ti(1) cudnn(1) Vite(1) cudn(1) 字符画(1) 脚本(1) dict(1) 热力图(1) hook(1) callback(1)
You might like
php下用GD生成生成缩略图的两个选择和区别
2007/04/17 PHP
joomla组件开发入门教程
2016/05/04 PHP
php基于CodeIgniter实现图片上传、剪切功能
2016/05/14 PHP
prototype1.4中文手册
2006/09/22 Javascript
JS 判断undefined的实现代码
2009/11/26 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
2012/09/14 Javascript
window.onload和$(function(){})的区别介绍
2013/10/30 Javascript
js输入框邮箱自动提示功能代码实现
2013/12/10 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
2013/12/11 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
jquery实现拖拽调整Div大小
2015/01/30 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
2016/07/27 Javascript
js实现简单的碰壁反弹效果
2016/08/30 Javascript
JavaScript实现左右下拉框动态增删示例
2017/03/09 Javascript
在js中做数字字符串补0(js补零)
2017/03/25 Javascript
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
解决ie img标签内存泄漏的问题
2017/10/13 Javascript
手机注册发送验证码倒计时的简单实例
2017/11/15 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
vue.js2.0点击获取自己的属性和jquery方法
2018/02/23 jQuery
vue动态路由配置及路由传参的方式
2018/05/23 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
js实现可爱的气泡特效
2020/09/05 Javascript
Django 前后台的数据传递的方法
2017/08/08 Python
利用python库在局域网内传输文件的方法
2018/06/04 Python
python datetime处理时间小结
2020/04/16 Python
20佳惊艳的HTML5应用程序示例分享
2011/05/03 HTML / CSS
您的时尚，您的生活方式：DTLR Villa
2019/12/25 全球购物
Nixon手表英国官网：美国尼克松手表品牌
2020/02/10 全球购物
毕业生自我推荐
2013/11/04 职场文书
幼儿园教学随笔感言
2014/02/23 职场文书
开业庆典主持词
2014/03/21 职场文书
大学生学雷锋活动总结
2014/06/26 职场文书
高校自主招生自荐信2015
2015/03/04 职场文书
大学生党员自我评价
2015/03/04 职场文书
python批量更改目录名/文件名的方法
2021/04/18 Python