js 图片点击放大功能

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1"/>
    <title>loading</title>
</head>
<body>
    <a href="javascript:;" rel="http://www.zuixiaoyao.test/images/v2/index/header.jpg" id="fas" style="display:block;" onclick="creatediv(this)">
        <img src="erweima.jpg" />
    </a>
</body>
</html>
<script>
    function getPos(element){
        if ( arguments.length != 1 || element == null ) { 
            return null; 
        } 
        var offsetTop = element.offsetTop; 
        var offsetLeft = element.offsetLeft; 
        var offsetWidth = element.offsetWidth; 
        var offsetHeight = element.offsetHeight; 
        while( element = element.offsetParent ) { 
            offsetTop += element.offsetTop; 
            offsetLeft += element.offsetLeft; 
        }
        return { absoluteTop: offsetTop, absoluteLeft: offsetLeft, 
            offsetWidth: offsetWidth, offsetHeight: offsetHeight }; 
    }
    function creatediv(elm){
        var deld = document.getElementById('version_sz_h');
        if(deld && deld.parentNode && deld.tagName != 'BODY'){  
            deld.parentNode.removeChild(deld);  
        }  
        var div = document.createElement('div');
        var pos = getPos(elm);
        div.id = 'version_sz_h';
        div.style.position = 'absolute';
        div.style.zIndex = 99999;
        div.style.top = pos.absoluteTop +'px';
        div.style.left = pos.absoluteLeft +'px';
        div.style.width = '35px';
        div.style.height = '35px';
        var img = '<img src="loading.gif" width="35px" height="35px"/>';
        div.innerHTML = img;
        var image = new Image();
        image.onload = function(){
            var w = this.width;
            var h = this.height;
            var b = w/h;//>1 宽屏图片 <1 长形图片
            div.innerHTML = '<img src="'+ elm.getAttribute('rel') +'" width="100%" height="100%" style="cursor:pointer;" id="hoverImg"/>';
            var Lw = 0;
            var Lh = 0;
            var timer = setInterval(function(){
                if(b >= 1){//宽屏 
                    Lh += 10;
                    Lw += 10*b;
                }else{
                    Lw += 10;
                    Lh += 10*b;
                }
                if((Lh+35) >= h && (Lw+35) >= w){
                    div.style.width = w + 'px';
                    div.style.height = h + 'px';
                    window.clearInterval(timer);
                }else{
                    div.style.width = 35 + Lw +'px';
                    div.style.height = 35 + Lh +'px';
                }
            },10);
            var imgBox = document.getElementById('hoverImg');
            var flag = 1;
            imgBox.onclick = function(){
                if(flag){
                    var Lh = h;
                    var Lw = w;
                    var timer1 = setInterval(function(){
                        if(b >= 1){//宽屏 
                            Lh -= 10;
                            Lw -= 10*b;
                        }else{
                            Lw -= 10;
                            Lh -= 10*b;
                        }
                        if(Lh <= 0 && Lw <= 0){
                            div.style.width = '0px';
                            div.style.height = '0px';
                            window.clearInterval(timer1);
                                if(div && div.parentNode && div.tagName != 'BODY'){  
                                    div.parentNode.removeChild(div);  
                                }  
                        }else{
                            div.style.width = Lw +'px';
                            div.style.height = Lh +'px';
                        }
                    },10);
                    flag = 0;
                }
            }
        }
        image.src = elm.getAttribute('rel');
        document.body.appendChild(div);
    }
</script>

相关阅读:
软件开发面试
 jQuery插件
 基于消息的软件架构
 线程池的原理及实现(转)
java实现生产者消费者问题（转）
并发队列ConcurrentLinkedQueue和阻塞队列LinkedBlockingQueue用法（转）
JAVA CAS原理深度分析(转)
菜鸟nginx源码剖析框架篇（一）从main函数看nginx启动流程（转）
Android中利用Handler实现消息的分发机制（三）
char* 和char[]的差别
原文地址：https://www.cnblogs.com/shizhouyu/p/5066405.html