JavaScript image magnifying technology of magnifying glass code sharing

  • 2020-03-29 23:43:57
  • OfStack


<!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>JavaScript Picture magnification technique ( A magnifying glass ) Implement code sharing  - www.jb51.net</title> 
<style type="text/css"> 
#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; 
} 
</style> 
<script type="text/javascript"> 
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) {//Compatible browsers set transparent values
    if(elem.filters) { 
        elem.style.filter = 'alpha(opacity=' + level * 100 + ')'; 
    } else { 
        elem.style.opacity = level; 
    } 
} 
function css(elem,prop) {   //CSS Settings function, easy to 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, //Zoom box
            scale : 15  //The scale, the bigger the scale, the bigger the scale, but the problem here is that if you don't divide, you're going to get some very small white edges, and I don't know how to solve that, right
        } 

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

        css(m.mag,{ 
            'display' : 'none', 
            'width' : m.cont.clientWidth + 'px',    //M.ont is the original image, and 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 zoom box is 10px to the far right of the original image
            'top' : m.cont.offsetTop + 'px'
            }) 

        var borderWid = m.cont.getElementsByTagName('div')[0].offsetWidth - m.cont.getElementsByTagName('div')[0].clientWidth;      //Gets the width of the border

        css(m.cont.getElementsByTagName('div')[0],{         //M.c ont. GetElementsByTagName (' div ') [0] to browse box
            'display' : 'none',                             //Set to invisible at first
            'width' : m.cont.clientWidth / m.scale - borderWid + 'px',          //The width/ratio value of the original image - the width of the border
            'height' : m.cont.clientHeight / m.scale - borderWid + 'px',//The height/ratio value of the original image - the width of the border
            'opacity' : 0.5//Set transparency
            }) 

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

        m.cont.onmouseover = magnifier.start; 

    }, 

    start:function(e){ 

        if(document.all){//Only under IE, mainly to avoid IE6 select can not be overridden
            magnifier.createIframe(magnifier.m.img); 
        } 

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

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

        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 does 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 the 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('mag'), 
                   scale : 3 
                   }); 
} 
</script> 
</head> 
<body> 
<div id="magnifier"> 
<img src="//www.jb51.net/images/20091107/fangda.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> Whether it can cover </option> 
</select> 
</body> 
</html> 


Related articles: