JS桌面应用

一、图片预加载

1     var oImg = new Image();
2     
3     oImg.onload=function(){
4         //alert('success');
5     }
6     oImg.onerror=function(){
7         alert('failture');
8     }
9     oImg.src='images/5.jpg';

 

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

  1     var oUl1=document.getElementById('ul1');
  2     var aLi=oUl1.getElementsByTagName('li');
  3     var aPos=[];
  4     var iMinZindex=2;//设置最小层级
  5     var i=0;
  6     //布局转换
  7     for(i=0;i<aLi.length;i++){
  8         aPos[i]={left:aLi[i].offsetLeft,top:aLi[i].offsetTop};//console.log(aPos);
  9     }
 10     for(i=0;i<aLi.length;i++){
 11         aLi[i].style.left=aPos[i].left+'px';
 12         aLi[i].style.top=aPos[i].top+'px';
 13         
 14         aLi[i].style.position='absolute';
 15         aLi[i].style.margin='0';
 16         aLi[i].index=i;
 17     }
 18     
 19     //拖拽
 20     for(i=0;i<aLi.length;i++){
 21         setDrag(aLi[i]);
 22     }
 23     function setDrag(obj){
 24         obj.onmousedown=function(ev){
 25             this.style.zIndex=iMinZindex++;//保证当前对象的层级最高
 26             var oEvent=ev||event;
 27             
 28             var disX=oEvent.clientX-obj.offsetLeft;
 29             var disY=oEvent.clientY-obj.offsetTop;
 30             
 31             document.onmousemove=function(ev){
 32                 var oEvent=ev||event;
 33                 
 34                 obj.style.left=oEvent.clientX-disX+'px';
 35                 obj.style.top=oEvent.clientY-disY+'px';
 36                 
 37                 for(i=0;i<aLi.length;i++){
 38                     aLi[i].className='';
 39                 }
 40                 
 41                 var oNear=findNearest(obj);
 42                 
 43                 if(oNear){
 44                     oNear.className='active';
 45                 }
 46                 /*for(i=0;i<aLi.length;i++){
 47                     if(obj==aLi[i]) continue;
 48                     if(cdTest(obj,aLi[i])){
 49                         aLi[i].className='active';
 50                     }else{
 51                         aLi[i].className='';
 52                     }
 53                 }*/
 54             };
 55             document.onmouseup=function(){
 56                 document.onmousemove=null;
 57                 document.onmouseup=null;
 58                 
 59                 var oNear=findNearest(obj);
 60                 
 61                 if(oNear){
 62                     /*oNear->obj
 63                     obj->oNear*/
 64                     oNear.className='';
 65                     
 66                     startMove(oNear,aPos[obj.index]);
 67                     startMove(obj,aPos[oNear.index]);
 68                     
 69                     var tmp=0;
 70                     
 71                     tmp=oNear.index;
 72                     oNear.index=obj.index;
 73                     obj.index=tmp;
 74                 }else{
 75                     startMove(obj,aPos[obj.index]);//aPos[obj.index]=={left:aPos[obj.index].left,top:aPos[obj.index].top}
 76                 }
 77             };
 78             
 79             return false;
 80             
 81         };
 82     }
 83     
 84     //碰撞检测
 85     function cdTest(obj1,obj2){
 86         var l1=obj1.offsetLeft;
 87         var r1=obj1.offsetLeft+obj1.offsetWidth;
 88         var t1=obj1.offsetTop;
 89         var b1=obj1.offsetTop+obj1.offsetHeight;
 90         
 91         var l2=obj2.offsetLeft;
 92         var r2=obj2.offsetLeft+obj2.offsetWidth;
 93         var t2=obj2.offsetTop;
 94         var b2=obj2.offsetTop+obj2.offsetHeight;
 95         
 96         if(r1<l2 || l1>r2 || t1>b2 || b1<t2){
 97             return false;
 98         }else{
 99             return true;
100         }
101     }
102     
103     function getDis(obj1,obj2){
104         var a=obj1.offsetLeft-obj2.offsetLeft;
105         var b=obj1.offsetTop-obj2.offsetTop;
106         
107         return Math.sqrt(Math.pow(a,2)+Math.pow(b,2));
108     }
109     
110     function findNearest(obj){
111         var iMin=999999;
112         var iMinIndex=-1;
113         
114         for(i=0;i<aLi.length;i++){
115             if(obj==aLi[i]) continue;
116             
117             if(cdTest(obj,aLi[i])){
118                 var dis=getDis(obj,aLi[i]);
119                 
120                 if(iMin>dis){
121                     iMin=dis;
122                     iMinIndex=i;
123                 }
124             }
125         }
126         
127         if(iMinIndex==-1){
128             return null;
129         }else{
130             return aLi[iMinIndex];
131         }
132     }
133     
134     //运动

 

posted on 2014-01-17 19:19  狂流  阅读(583)  评论(0)  编辑  收藏  举报