JS桌面应用

一、图片预加载

     var oImg = new Image();

     oImg.onload=function(){
         //alert('success');
     }
     oImg.onerror=function(){
         alert('failture');
     }
     oImg.src='images/5.jpg';

二、仿google自定义首页：集布局转换、拖拽、碰撞检测、交换位置于一体

     var oUl1=document.getElementById('ul1');
     var aLi=oUl1.getElementsByTagName('li');
     var aPos=[];
     var iMinZindex=2;//设置最小层级
     var i=0;
     //布局转换
     for(i=0;i<aLi.length;i++){
         aPos[i]={left:aLi[i].offsetLeft,top:aLi[i].offsetTop};//console.log(aPos);
     }
     for(i=0;i<aLi.length;i++){
         aLi[i].style.left=aPos[i].left+'px';
         aLi[i].style.top=aPos[i].top+'px';

         aLi[i].style.position='absolute';
         aLi[i].style.margin='0';
         aLi[i].index=i;
     }

     //拖拽
     for(i=0;i<aLi.length;i++){
         setDrag(aLi[i]);
     }
     function setDrag(obj){
         obj.onmousedown=function(ev){
             this.style.zIndex=iMinZindex++;//保证当前对象的层级最高
             var oEvent=ev||event;

             var disX=oEvent.clientX-obj.offsetLeft;
             var disY=oEvent.clientY-obj.offsetTop;

             document.onmousemove=function(ev){
                 var oEvent=ev||event;

                 obj.style.left=oEvent.clientX-disX+'px';
                 obj.style.top=oEvent.clientY-disY+'px';

                 for(i=0;i<aLi.length;i++){
                     aLi[i].className='';
                 }

                 var oNear=findNearest(obj);

                 if(oNear){
                     oNear.className='active';
                 }
                 /*for(i=0;i<aLi.length;i++){
                     if(obj==aLi[i]) continue;
                     if(cdTest(obj,aLi[i])){
                         aLi[i].className='active';
                     }else{
                         aLi[i].className='';
                     }
                 }*/
             };
             document.onmouseup=function(){
                 document.onmousemove=null;
                 document.onmouseup=null;

                 var oNear=findNearest(obj);

                 if(oNear){
                     /*oNear->obj
                     obj->oNear*/
                     oNear.className='';

                     startMove(oNear,aPos[obj.index]);
                     startMove(obj,aPos[oNear.index]);

                     var tmp=0;

                     tmp=oNear.index;
                     oNear.index=obj.index;
                     obj.index=tmp;
                 }else{
                     startMove(obj,aPos[obj.index]);//aPos[obj.index]=={left:aPos[obj.index].left,top:aPos[obj.index].top}
                 }
             };

             return false;

         };
     }

     //碰撞检测
     function cdTest(obj1,obj2){
         var l1=obj1.offsetLeft;
         var r1=obj1.offsetLeft+obj1.offsetWidth;
         var t1=obj1.offsetTop;
         var b1=obj1.offsetTop+obj1.offsetHeight;

         var l2=obj2.offsetLeft;
         var r2=obj2.offsetLeft+obj2.offsetWidth;
         var t2=obj2.offsetTop;
         var b2=obj2.offsetTop+obj2.offsetHeight;

         if(r1<l2 || l1>r2 || t1>b2 || b1<t2){
             return false;
         }else{
             return true;
         }
     }

     function getDis(obj1,obj2){
         var a=obj1.offsetLeft-obj2.offsetLeft;
         var b=obj1.offsetTop-obj2.offsetTop;

         return Math.sqrt(Math.pow(a,2)+Math.pow(b,2));
     }

     function findNearest(obj){
         var iMin=999999;
         var iMinIndex=-1;

         for(i=0;i<aLi.length;i++){
             if(obj==aLi[i]) continue;

             if(cdTest(obj,aLi[i])){
                 var dis=getDis(obj,aLi[i]);

                 if(iMin>dis){
                     iMin=dis;
                     iMinIndex=i;
                 }
             }
         }

         if(iMinIndex==-1){
             return null;
         }else{
             return aLi[iMinIndex];
         }
     }

     //运动