用JS做图片的放大

今天继续我们那项目，今天收获了点新知识，写下来和大家分享一下：
图片的放大：
<script type="text/javascript">
function getEventObject(W3CEvent) { //¼׼
return W3CEvent || window.event;
}
function getPointerPosition(e) { //x,yú
e = e || getEventObject(e);
var x = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
var y = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));

return { 'x':x,'y':y };
}
function setOpacity(elem,level) { //͸ֵ
if(elem.filters) {
elem.style.filter = 'alpha(opacity=' + level * 100 + ')';
} else {
elem.style.opacity = level;
}
}
function css(elem,prop) { //cssú,Էcssֵ,Ҽ͸ֵ
for(var i in prop) {
if(i == 'opacity') {
setOpacity(elem,prop[i]);
} else {
elem.style[i] = prop[i];
}
}
return elem;
}

var magnifier = {
m : null,
init:function(magni){
var m = 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 +90 + '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'
})
var borderWid = 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ִ,ҪIE6select޷
magnifier.createIframe(magnifier.m.img);
}
this.onmousemove = magnifier.move; //thisָm.cont
this.onmouseout = magnifier.end;
},
move:function(e){
var pos = 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.maxMath.min