This article describes the method of JS to achieve local enlargement or reduction of images. Share it for your reference, as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Magnifier</title><style type="text/css">#magnifier{ width:500px; height:696px; position:absolute; top:100px; left:250px; font-size:0; border:1px solid #000;}#img{ width:500px; height:696px;}#Browser{ border:1px solid #000; z-index:100; position:absolute; background:#555;}#mag{ border:1px solid #000; overflow:hidden; z-index:100;}</style><script type="text/javascript">function getEventObject(W3CEvent) { //Event normalized function return W3CEvent || window.event;}function getPointerPosition(e) { //Get the 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) { //Compatible browser settings for transparent values if(elem.filters) { elem.style.filter = 'alpha(opacity=' + level * 100 + ')'; } else { elem.style.opacity = level; }}function css(elem,prop) { //Css setting function can easily set css value and compatible with 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, //Div img loading the original image img : null, //Scale mag : null, //Scale frame scale : 15 //Scale value, the larger the value set, the larger the enlargement, but there is a problem here that if it cannot be divisible, some small white edges will be generated. 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*scale value of the original image'height' : (m.cont.clientHeight * m.scale) + 'px' //High*scale 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', //The position of the enlargement box is far to the right of the original image 10px 'top' : m.cont.offsetTop + 'px' }) var borderWid = m.cont.getElementsByTagName('div')[0].offsetWidth - m.cont.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', //Settings': m.cont.clientWidth / m.scale - borderWid + 'px', //The width/scale value of the original image- The width of border 'height' : m.cont.clientHeight / m.scale - borderWid + 'px', //The height/scale value of the original image - the width of border 'opacity' : 0.5 //Set transparency}) m.img.src = m.cont.getElementsByTagName('img')[0].src; //Let the src value of the original image to enlarge the image m.cont.style.cursor = 'crosshair'; m.cont.onmouseover = magnifier.start; }, start:function(e){ if(document.all){ //Execute only under IE, mainly to avoid the inability to overwrite 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 standardization 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 - Browse box width/2,Math.max and Math.min so that the browse 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'), img : document.getElementById('magnifierImg'), mag : document.getElementById('magnifier'), scale : 3 });}</script></head><body><div id="magnifier"><img src="lib/images/1.jpg" id="img" /><div id="Browser"></div></div><div id="mag"><img id="magnifierImg" /></div><select style="position:absolute;top:200px;left:650px;width:100px;"><option>select test</option><option>can overwrite</option></select></body></html>For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm skills", "Summary of JavaScript traversal algorithms and techniques", and "Summary of JavaScript mathematical operations usage"
I hope this article will be helpful to everyone's JavaScript programming.