正文
js图片放大镜代码，html图片放大镜代码
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
急求个JS图片放大器，可以放大当前显示图层在鼠标指针附件区域，
!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="" id="z1" /
span class="mask" id="m"/span
span class="ph" id="eventproxy"/span
/div
div class="p2" id="p2"
img src="" 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
相关问答
Q1: 怎么用js实现图片点击时放大，再点击恢复
用JavaScript实现图片点击放大再次点击恢复代码如下：
知识拓展：
JavaScript 是目前所有主流浏览器上唯一支持的脚本语言，这也是早期JavaScript的唯一用途。其主要作用是在不与服务器交互的情况下修改HTML页面内容，因此其最关键的部分是DOM（文档对象模型），也就是HTML元素的结构。
通过Ajax可以使HTML页面通过JavaScript，在不重新加载页面的情况下从服务器上获取数据并显示，大幅提高用户体验。通过JavaScript，使Web页面发展成胖客户端成为可能。
Q2: js实现单击图片放大图片的方法
这篇文章主要介绍了js实现单击图片放大图片的方法,涉及javascript操作图片的技巧与onclick事件的用法,需要的朋友可以参考下
本文实例讲述了js实现单击图片放大图片的方法。分享给大家供大家参考。具体实现方法如下：
代码如下:
html
title单击图片即可放大图片/title
body
点击图片预览效果。br
img
src="/images/m01.jpg"
onclick="this.width+=50;this.height+=50"
onclick="javascript:window.open(this.src);"
style="cursor:pointer;"/
img
src="/images/m02.jpg"
onclick="this.style.zoom='2'"
onclick="javascript:window.open(this.src);"
style="cursor:pointer;"/
/body
/html
希望本文所述对大家的javascript程序设计有所帮助。
js图片放大镜代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于html图片放大镜代码、js图片放大镜代码的信息别忘了在本站进行查找喔。
