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