search

Home >Web Front-end >JS Tutorial >Implementation of JavaScript image enlargement technology

Implementation of JavaScript image enlargement technology

不言
不言Original
2018-06-26 09:46:341419browse

This article introduces the JavaScript image magnification technology (magnifying glass) implementation code. Friends in need can refer to it

The specific code is 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>JavaScript图片放大技术(放大镜)实现代码分享 - 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) {//事件标准化函数 
    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 { &#39;x&#39;:x,&#39;y&#39;:y }; 
} 
function setOpacity(elem,level) {//兼容浏览器设置透明值 
    if(elem.filters) { 
        elem.style.filter = &#39;alpha(opacity=&#39; + level * 100 + &#39;)&#39;; 
    } else { 
        elem.style.opacity = level; 
    } 
} 
function css(elem,prop) {   //css设置函数,可以方便设置css值,并且兼容设置透明值 
    for(var i in prop) { 
        if(i == &#39;opacity&#39;) { 
            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,    //装载原始图像的p 
            img : null, //放大的图像 
            mag : null, //放大框 
            scale : 15  //比例值,设置的值越大放大越大,但是这里有个问题就是如果不可以整除时,会产生些很小的白边,目前不知道如何解决 
        } 
        css(m.img,{  
            &#39;position&#39; : &#39;absolute&#39;, 
            &#39;width&#39; : (m.cont.clientWidth * m.scale) + &#39;px&#39;,                //原始图像的宽*比例值     
            &#39;height&#39; : (m.cont.clientHeight * m.scale) + &#39;px&#39;               //原始图像的高*比例值 
            }) 
        css(m.mag,{ 
            &#39;display&#39; : &#39;none&#39;, 
            &#39;width&#39; : m.cont.clientWidth + &#39;px&#39;,    //m.cont为原始图像,与原始图像等宽 
            &#39;height&#39; : m.cont.clientHeight + &#39;px&#39;, 
            &#39;position&#39; : &#39;absolute&#39;, 
            &#39;left&#39; : m.cont.offsetLeft + m.cont.offsetWidth + 10 + &#39;px&#39;,//放大框的位置为原始图像的右方远10px 
            &#39;top&#39; : m.cont.offsetTop + &#39;px&#39;
            }) 
        var borderWid = m.cont.getElementsByTagName(&#39;p&#39;)[0].offsetWidth - m.cont.getElementsByTagName(&#39;p&#39;)[0].clientWidth;      //获取border的宽 
        css(m.cont.getElementsByTagName(&#39;p&#39;)[0],{         //m.cont.getElementsByTagName(&#39;p&#39;)[0]为浏览框 
            &#39;display&#39; : &#39;none&#39;,                             //开始设置为不可见 
            &#39;width&#39; : m.cont.clientWidth / m.scale - borderWid + &#39;px&#39;,          //原始图片的宽/比例值 - border的宽度 
            &#39;height&#39; : m.cont.clientHeight / m.scale - borderWid + &#39;px&#39;,//原始图片的高/比例值 - border的宽度 
            &#39;opacity&#39; : 0.5//设置透明度 
            }) 
        m.img.src = m.cont.getElementsByTagName(&#39;img&#39;)[0].src;//让原始图像的src值给予放大图像 
        m.cont.style.cursor = &#39;crosshair&#39;; 
        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){ 
        var pos = getPointerPosition(e);        //事件标准化 
        this.getElementsByTagName(&#39;p&#39;)[0].style.display = &#39;&#39;; 
        css(this.getElementsByTagName(&#39;p&#39;)[0],{ 
            &#39;top&#39; : Math.min(Math.max(pos.y - this.offsetTop - parseInt(this.getElementsByTagName(&#39;p&#39;)[0].style.height) / 2,0),this.clientHeight - this.getElementsByTagName(&#39;p&#39;)[0].offsetHeight) + &#39;px&#39;, 
            &#39;left&#39; : Math.min(Math.max(pos.x - this.offsetLeft - parseInt(this.getElementsByTagName(&#39;p&#39;)[0].style.width) / 2,0),this.clientWidth - this.getElementsByTagName(&#39;p&#39;)[0].offsetWidth) + &#39;px&#39;            //left=鼠标x - this.offsetLeft - 浏览框宽/2,Math.max和Math.min让浏览框不会超出图像 
            }) 
        magnifier.m.mag.style.display = &#39;&#39;; 
        css(magnifier.m.img,{ 
            &#39;top&#39; : - (parseInt(this.getElementsByTagName(&#39;p&#39;)[0].style.top) * magnifier.m.scale) + &#39;px&#39;, 
            &#39;left&#39; : - (parseInt(this.getElementsByTagName(&#39;p&#39;)[0].style.left) * magnifier.m.scale) + &#39;px&#39;
            }) 
    }, 
    end:function(e){ 
        this.getElementsByTagName(&#39;p&#39;)[0].style.display = &#39;none&#39;; 
        magnifier.removeIframe(magnifier.m.img);        //销毁iframe 
        magnifier.m.mag.style.display = &#39;none&#39;; 
    }, 
    createIframe:function(elem){ 
        var layer = document.createElement(&#39;iframe&#39;); 
        layer.tabIndex = &#39;-1&#39;; 
        layer.src = &#39;javascript:false;&#39;; 
        elem.parentNode.appendChild(layer); 
        layer.style.width = elem.offsetWidth + &#39;px&#39;; 
        layer.style.height = elem.offsetHeight + &#39;px&#39;; 
    }, 
    removeIframe:function(elem){ 
        var layers = elem.parentNode.getElementsByTagName(&#39;iframe&#39;); 
        while(layers.length >0){ 
            layers[0].parentNode.removeChild(layers[0]); 
        } 
    } 
} 
window.onload = function(){ 
    magnifier.init({ 
                   cont : document.getElementById(&#39;magnifier&#39;), 
                   img : document.getElementById(&#39;magnifierImg&#39;), 
                   mag : document.getElementById(&#39;mag&#39;), 
                   scale : 3 
                   }); 
} 
</script> 
</head> 
<body> 
<p id="magnifier"> 
<img src="//www.jb51.net/images/20091107/fangda.jpg" id="img" /> 
<p id="Browser"></p> 
</p> 
<p id="mag"><img id="magnifierImg" /></p> 
<select style="position:absolute;top:200px;left:650px;width:100px;"> 
<option>select测试</option> 
<option>是否能覆盖</option> 
</select> 
</body> 
</html>

The above is The entire content of this article is hoped to be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to use JS to implement the imitation WeChat payment pop-up window function

javascript to implement waterfall flow dynamic loading of images

JavaScript implements drawing graphics using Canvas

##

The above is the detailed content of Implementation of JavaScript image enlargement technology. For more information, please follow other related articles on the PHP Chinese website!

php JavaScript JS canvas
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to use vue's transition to complete sliding transitionNext article：How to use vue's transition to complete sliding transition

Related articles

See more