JavaScript image magnification technology (magnifying glass)

[Recommended] JavaScript image magnification technology (magnifying glass) sample code - www.webdm.cn #magnifier{ width :342px; height:420px; position:absolute; top:100px; left:250px; font-size:0; border:1px solid #000; } #img{ width:342px; height:420px; } #Browser{ border:1px solid #000; z-index:100; position:absolute; background:#555; } #mag{ border:1px solid #000; overflow:hidden; z-index:100; } function getEventObject(W3CEvent) {//Event normalization function return W3CEvent || window.event; } function getPointerPosition(e) {//Browser-compatible mouse x, y get function 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) {//Set transparent value for compatible browsers if(elem.filters) { elem.style.filter = 'alpha( opacity=' + level * 100 + ')'; } else { elem.style.opacity = level; } } function css(elem,prop) { //css setting function, which can conveniently set css values, And compatible with setting transparent values 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, / /Load the div of the original image img: null, //Enlarged image mag: null, //Magnification box scale: 15 //Scale value, the larger the value set, the greater the magnification, but there is a problem here is if When it is not divisible, some small white edges will be produced. I don’t know how to solve it at the moment. }

css(m.img,{ 'position' : 'absolute', 'width' : (m.cont.clientWidth * m.scale) + 'px', //The width * ratio value of the original image 'height' : (m.cont.clientHeight * m.scale) + 'px' //The height * ratio value of the original image } )

css(m.mag,{ 'display' : 'none', 'width' : m.cont.clientWidth + 'px', //m.cont is the original image, which is the same width as the original image ' height' : m.cont.clientHeight + 'px', 'position' : 'absolute', 'left' : m.cont.offsetLeft + m.cont.offsetWidth + 10 + 'px',//Enlarge the box The position is 10px to the right of the original image. .getElementsByTagName('div')[0].clientWidth; //Get the width of the border

css(m.cont.getElementsByTagName('div')[0],{ //m.cont.getElementsByTagName('div') [0] is the browsing box 'display' : 'none', //Start setting to invisible 'width' : m.cont.clientWidth / m.scale - borderWid + 'px', //Width of the original image/ Proportional value - the width of the border 'height' : m.cont.clientHeight / m.scale - borderWid + 'px',//The height/proportional value of the original image - the width of the border 'opacity' : 0.5//Set transparency })

m.img.src = m.cont.getElementsByTagName('img')[0].src;//Let the src value of the original image be given to the enlarged image m.cont.style.cursor = 'crosshair' ;

m.cont.onmouseover = magnifier.start;

},

start:function(e){

if(document.all){//Only executed under IE, mainly to avoid IE6’s select from being overwritten magnifier.createIframe(magnifier.m.img); }

this.onmousemove = magnifier.move;//This points to m.cont this.onmouseout = magnifier.end; },

move:function(e){ var pos = getPointerPosition(e); //Event Standardize

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=mouse x - this.offsetLeft - browsing box width/2, Math.max and Math.min allow browsing The box will not exceed the image })

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); //Destroy iframe

magnifier.m.mag.style.display = 'none'; },

createIframe:function(elem){ var layer = 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){ var layers = elem.parentNode.getElementsByTagName('iframe'); while(layers.length >0 ){ layers[0].parentNode.removeChild(layers[0]); } } } window.onload = function(){ magnifier.init({ cont : document.getElementById('magnifier') , . lt; body> select test whether it can cover