js實作照片牆功能實例_javascript技巧

本文實例講述了js實作照片牆功能的方法。分享給大家供大家參考。具體實作方法如下：

複製程式碼 程式碼如下:

   
       
       
       
       
       
       
       
       
       
            *{填入：0；邊距：0；}
            li{列表樣式：無;}
            ul{寬度：660px;高度：510px；背景：#ccc；邊距：20px 自動；}
            li{寬度：200px;高度：150px；邊距：10 像素；浮動：向左； }
        樣式>
       
        /*
            var arr=['a','b','c','d','e','d','f'];
            var pos = arr.lastIndexOf('d');
            警報（位置）；
            */
            window.onload=function(){
                var aLi = document.querySelectorAll('li');
                var oInput =  document.querySelector('#btn');
                var pos = [];
                var len= aLi.length;
                var izIndex= 2;
                //配置轉換

                for(var i=0;i                     pos.push([aLi[i].offsetLeft,aLi[i].offsetTop]);
                }
                for(var i=0;i                     aLi[i].style.left=pos[i][0] 'px';
                    aLi[i].style.top=pos[i][1] 'px';
                    aLi[i].style.position = '絕對';
                    aLi[i].style.margin = '0px';
                }
                for(var i=0;i                      aLi[i].index = i;
                     setDrag(aLi[i]);
                }
                oInput.onclick=function(){
                    var randomArr = [0,1,2,3,4,5,6,7,8];
                    randomArr.sort(函數(num1,num2){
                        return Math.random()-0.5;
                    })
                    for(var i=0;i                         // 增加隨機位置的狀況
                       startMove(aLi[i],{left:pos[randomArr[i]][0],top:pos[randomArr[i]][1]});
                       // 修改索引
                       aLi[i].index = randomArr[i];
                    }
                }
                //拖曳
                函數 setDrag(obj){
                    obj.onmousedown =function(ev){
                        izIndex ;
                        obj.style.zIndex= izIndex;
                        var ev = ev ||事件；
                        var disX = ev.clientX - obj.offsetLeft;
                        var disY = ev.clientY - obj.offsetTop;
                        document.onmousemove=函數(ev){
                            var ev = ev ||事件；
                            obj.style.left = ev.clientX- disX 'px';
                            obj.style.top = ev.clientY - disY 'px';
                            for(var i=0; i                                 aLi[i].style.border='none';
                            }
                            var nL = closeLi(obj);
                            如果(nL){
                                nL.style.border='2px 純紅色';
                            }                         
                        }
                        document.onmouseup= function(){
                            document.onmousemove = null;
                            document.onmouseup = null;
                            var nL = closeLi(obj);
                            如果(nL){
                                nL.style.border='2px 純紅色';
                                startMove(obj,{left:pos[nL.index][0],top:pos[nL.index][1]});
                                startMove(nL,{left:pos[obj.index][0],top:pos[obj.index][1]});
                                var tmp =nL.index;
                                nL.index = obj.index;
                                obj.index = tmp;
                                nL.style.border='';
                            }其他{
                                                            }
                        }
                        return alse;
                    }
                }
                //偵測是否有碰撞中
                function isDump(obj1,obj2){
                    var l1= obj1.offsetLeft;
                    var r1= l1 obj1.offsetWidth;
                    var t1= obj1.offsetTop;
                    var b1 =obj1.offsetHeight t1;

                    var l2= obj2.offsetLeft;
                    var r2= l2 obj2.offsetWidth;
                    var t2= obj2.offsetTop;
                    var b2 =obj2.offsetHeight t2;
                    if(b2r1 || r2b1){
                        return alse;
                    }else{
                        return true;
                    }
                }
                //尋找最近的節點
                function nearLi(obj){
                    var index= -1;
                    var value =9999;
                   for(var i=0; i                         if(isDump(obj,aLi[i]) && obj !=aLi[i]){
                            var c = getDis(obj,aLi[i]);
                            if(c                                 value = c;
                                index = i;
                            }
                        }
                    }
                    if(index !=-1){
                        return aLi[index];
                    }else{
                        return alse;
                    }
                }
                function getDis(obj1,obj2){
                    var x = obj1.offsetLeft - obj2.offsetLeft;
                    var y = obj1.offsetTop - obj2.offsetTop;
                    return  Math.sqrt(Math.pow(x,2) Math.pow(y,2));
                }
            }
        >腳本
    頭>
   
    點選按鈕>
       

           
• 

           
• 

           
• 

           
• 

           
• 

           
• 

           
• 

           
• 

           
• 

       

    正文> 

希望本文對大家介紹的javascript程式設計有幫助。