图片预加载功能
图片预加载技术简介---这是迅雷官网的源代码的一句，在img里面有一个src属性，这里放的是代替的图片，大小为1px*1px，其实就相当于是没有这个图片，另外的一个_src才是真实的图片地址（自定义属性）。当鼠标向下滚动时，加载真实的图片，利用Js里的onscroll事件判断。
1 <img alt="花开半夏" src="http://images.movie.xunlei.com/img_default.gif" _src="http://img2.kankan.kanimg.com/gallery2/block/2013/12/03/f2163d024767a0a8bf39bb2dbb56e37b.jpg">
图片预加载策略：预判加载（预判前一张/后一张图片）、延迟加载（先加载HTML，然后再加载页面图片）
onload和onerror判断图片加载情况：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>图片预加载</title> 6 <script> 7 window.onload=function () 8 { 9 var oImg=new Image(); 10 11 oImg.onload=function () 12 { 13 alert('图片预加载完成'); 14 }; 15 oImg.onerror=function () 16 { 17 alert('失败'); 18 }; 19 oImg.src='http://pic25.nipic.com/20121126/668573_145010549116_2.jpg'; 20 }; 21 </script> 22 </head> 23 24 <body> 25 <img width="400" height="300" src="http://www.duose.com/p/2007/0405/46516_046875.jpg" onmouseover="this.src='http://pic25.nipic.com/20121126/668573_145010549116_2.jpg';" onmouseout="this.src='http://www.duose.com/p/2007/0405/46516_046875.jpg';" /> 26 </body> 27 </html>
Mac电脑菜单效果
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <style> 5 body {margin:0;} 6 #div1 {width:100%; position:absolute; bottom:0; text-align:center;} 7 </style> 8 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 9 <title>无标题文档</title> 10 <script> 11 document.onmousemove=function (ev) 12 { 13 var oEvent=ev||event;//事件对象 14 var oDiv=document.getElementById('div1'); 15 var aImg=document.getElementsByTagName('img'); 16 var aTxt=document.getElementsByTagName('input'); 17 var i=0; 18 19 for(i=0;i<aImg.length;i++)//循环所有的元素 20 { 21 var x=aImg[i].offsetLeft+aImg[i].offsetWidth/2; 22 //offsetLeft正确，计算图片中心点的距离，所以加上本身的一半-------图片中心点距离可视区边缘的距离 23 var y=aImg[i].offsetTop+oDiv.offsetTop+aImg[i].offsetHeight/2; 24 //offsetTop计算该元素距离父级元素的距离，所以要加上父级元素的offsetTop 25 var a=x-oEvent.clientX; 26 var b=y-oEvent.clientY; 27 28 var dis=Math.sqrt(a*a+b*b);//开平方，或者使用pow(a,2)+pow(b,2)进行开平方 29 var scale=1-dis/300;//本来是dis/100;但是使用1-dis/100的话，比例更加有效 30 if(scale<0.5)//如果，比例小于50%；强行的让比例等于50% 31 { 32 scale=0.5; 33 } 34 aImg[i].width=scale*128;//scale最大可能是1 35 aTxt[i].value=scale.toFixed(2);//toFixed()函数保留两位小数 36 } 37 }; 38 </script> 39 </head> 40 41 <body> 42 <input type="text" /> 43 <input type="text" /> 44 <input type="text" /> 45 <input type="text" /> 46 <input type="text" /> 47 <div id="div1"> 48 <img src="images/1.png" width="64" /> 49 <img src="images/2.png" width="64" /> 50 <img src="images/3.png" width="64" /> 51 <img src="images/4.png" width="64" /> 52 <img src="images/5.png" width="64" /> 53 </div> 54 </body> 55 </html>