1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 #box{ 8 width: 100px; 9 height: 100px; 10 background: url(img/1.jpg); 11 } 12 </style> 13 </head> 14 <body> 15 <div id="box"> 16 17 </div> 18 </body> 19 20 <script type="text/javascript"> 21 // http://pic70.nipic.com/file/20150618/21278791_104700147417_2.jpg 22 23 var box = document.getElementById("box"); 24 // 创建一个 image 对象 25 var img = new Image; 26 img.width = 100; 27 img.height = 100; 28 // img对象只要设置 src 属性就开始加载图片,为了避免图片加载太快的问题,图片的src 属性在最后设置 29 img.onload= function(){ 30 // 加载完毕之后,替换图片 31 box.appendChild(img); 32 img.height = 0; 33 var timer = setInterval(function(){ 34 img.height+= 10; 35 if(img.height == 100){ 36 box.style.background = "none"; 37 clearInterval(timer); 38 } 39 },30); 40 } 41 42 img.src = "http://www.infinistudio.cn/uploads/allimg/160318/1-16031Q922210-L.jpg"; 43 44 45 46 47 </script> 48 </html>
时间: 2024-10-29 19:10:40