JS实现图片局部放大或缩小的方法
本文实例讲述了JS实现图片局部放大或缩小的方法。分享给大家供大家参考，具体如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>Magnifier</title>
<styletype="text/css">
#magnifier{
width:500px;
height:696px;
position:absolute;
top:100px;
left:250px;
font-size:0;
border:1pxsolid#000;
}
#img{
width:500px;
height:696px;
}
#Browser{
border:1pxsolid#000;
z-index:100;
position:absolute;
background:#555;
}
#mag{
border:1pxsolid#000;
overflow:hidden;
z-index:100;
}
</style>
<scripttype="text/javascript">
functiongetEventObject(W3CEvent){//事件标准化函数
returnW3CEvent||window.event;
}
functiongetPointerPosition(e){//兼容浏览器的鼠标x,y获得函数
e=e||getEventObject(e);
varx=e.pageX||(e.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft));
vary=e.pageY||(e.clientY+(document.documentElement.scrollTop||document.body.scrollTop));
return{'x':x,'y':y};
}
functionsetOpacity(elem,level){//兼容浏览器设置透明值
if(elem.filters){
elem.style.filter='alpha(opacity='+level*100+')';
}else{
elem.style.opacity=level;
}
}
functioncss(elem,prop){//css设置函数,可以方便设置css值,并且兼容设置透明值
for(variinprop){
if(i=='opacity'){
setOpacity(elem,prop[i]);
}else{
elem.style[i]=prop[i];
}
}
returnelem;
}
varmagnifier={
m:null,
init:function(magni){
varm=this.m=magni||{
cont:null,//装载原始图像的div
img:null,//放大的图像
mag:null,//放大框
scale:15//比例值,设置的值越大放大越大,但是这里有个问题就是如果不可以整除时,会产生些很小的白边,目前不知道如何解决
}
css(m.img,{
'position':'absolute',
'width':(m.cont.clientWidth*m.scale)+'px',//原始图像的宽*比例值
'height':(m.cont.clientHeight*m.scale)+'px'//原始图像的高*比例值
})
css(m.mag,{
'display':'none',
'width':m.cont.clientWidth+'px',//m.cont为原始图像,与原始图像等宽
'height':m.cont.clientHeight+'px',
'position':'absolute',
'left':m.cont.offsetLeft+m.cont.offsetWidth+10+'px',//放大框的位置为原始图像的右方远10px
'top':m.cont.offsetTop+'px'
})
varborderWid=m.cont.getElementsByTagName('div')[0].offsetWidth-m.cont.getElementsByTagName('div')[0].clientWidth;//获取border的宽
css(m.cont.getElementsByTagName('div')[0],{//m.cont.getElementsByTagName('div')[0]为浏览框
'display':'none',//开始设置为不可见
'width':m.cont.clientWidth/m.scale-borderWid+'px',//原始图片的宽/比例值-border的宽度
'height':m.cont.clientHeight/m.scale-borderWid+'px',//原始图片的高/比例值-border的宽度
'opacity':0.5//设置透明度
})
m.img.src=m.cont.getElementsByTagName('img')[0].src;//让原始图像的src值给予放大图像
m.cont.style.cursor='crosshair';
m.cont.onmouseover=magnifier.start;
},
start:function(e){
if(document.all){//只在IE下执行,主要避免IE6的select无法覆盖
magnifier.createIframe(magnifier.m.img);
}
this.onmousemove=magnifier.move;//this指向m.cont
this.onmouseout=magnifier.end;
},
move:function(e){
varpos=getPointerPosition(e);//事件标准化
this.getElementsByTagName('div')[0].style.display='';
css(this.getElementsByTagName('div')[0],{
'top':Math.min(Math.max(pos.y-this.offsetTop-parseInt(this.getElementsByTagName('div')[0].style.height)/2,0),this.clientHeight-this.getElementsByTagName('div')[0].offsetHeight)+'px',
'left':Math.min(Math.max(pos.x-this.offsetLeft-parseInt(this.getElementsByTagName('div')[0].style.width)/2,0),this.clientWidth-this.getElementsByTagName('div')[0].offsetWidth)+'px'//left=鼠标x-this.offsetLeft-浏览框宽/2,Math.max和Math.min让浏览框不会超出图像
})
magnifier.m.mag.style.display='';
css(magnifier.m.img,{
'top':-(parseInt(this.getElementsByTagName('div')[0].style.top)*magnifier.m.scale)+'px',
'left':-(parseInt(this.getElementsByTagName('div')[0].style.left)*magnifier.m.scale)+'px'
})
},
end:function(e){
this.getElementsByTagName('div')[0].style.display='none';
magnifier.removeIframe(magnifier.m.img);//销毁iframe
magnifier.m.mag.style.display='none';
},
createIframe:function(elem){
varlayer=document.createElement('iframe');
layer.tabIndex='-1';
layer.src='javascript:false;';
elem.parentNode.appendChild(layer);
layer.style.width=elem.offsetWidth+'px';
layer.style.height=elem.offsetHeight+'px';
},
removeIframe:function(elem){
varlayers=elem.parentNode.getElementsByTagName('iframe');
while(layers.length>0){
layers[0].parentNode.removeChild(layers[0]);
}
}
}
window.onload=function(){
magnifier.init({
cont:document.getElementById('magnifier'),
img:document.getElementById('magnifierImg'),
mag:document.getElementById('mag'),
scale:3
});
}
</script>
</head>
<body>
<divid="magnifier">
<imgsrc="lib/images/1.jpg"id="img"/>
<divid="Browser"></div>
</div>
<divid="mag"><imgid="magnifierImg"/></div>
<selectstyle="position:absolute;top:200px;left:650px;width:100px;">
<option>select测试</option>
<option>是否能覆盖</option>
</select>
</body>
</html>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。