<!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>