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];
        }
    }
    
    //运动