js에서 포토월 기능 구현 example_javascript 기술

이 글의 예시에서는 js에서 포토월 기능을 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

   
       
       
       
       
       
       
       
       
       
            *{패딩: 0; 여백: 0;}
            li{목록 스타일: 없음;}
            ul{너비: 660px; 높이:510px; 배경:#ccc;여백: 20px 자동;}
            li{폭:200px; 높이: 150px; 여백: 10px; 플로트: 왼쪽; }
        스타일>
       
        /*
            var arr=['a','b','c','d','e','d','f'];
            var pos = arr.lastIndexOf('d');
            경고(pos);
            */
            window.onload=function(){
                var aLi = document.querySelectorAll('li');
                var oInput =  document.querySelector('#btn');
                var 위치 = [];
                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 = 무작위Arr[i];
                    }
                }
                //拖拽
                함수 setDrag(obj){
                    obj.onmousedown =function(ev){
                        이즈인덱스 ;
                        obj.style.zIndex= izIndex;
                        var ev = ev || 이벤트;
                        var disX = ev.clientX - obj.offsetLeft;
                        var disY = ev.clientY - obj.offsetTop;
                        document.onmousemove=function(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='없음';
                            }
                            var nL = NearLi(obj);
                            if(nL){
                                nL.style.border='2px 단색 빨간색';
                            }                        
                        }
                        document.onmouseup= function(){
                            document.onmousemove = null;
                            document.onmouseup = null;
                            var nL = NearLi(obj);
                            if(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='';
                            }그밖에{
StartMove(obj,{left:pos[obj.index][0],top:pos[obj.index][1]});
~ | |                  }
                }
//충돌 여부 감지
                    함수 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){
|                       }그밖에{
                                 true를 반환합니다.
                 }
                }
//가장 가까운 노드 찾기
함수 NearLi(obj){
                  var index= -1;
                  var 값 =9999;
for(var i=0; i If(isDump(obj,aLi[i]) && obj !=aLi[i]){
                                                var c = getDis(obj,aLi[i]);
If(c                                             값 = c; 인덱스 = i;
| | ~                                                 If(색인 !=-1){
aLi[index];
반환                       }그밖에{
|                  }
                }
                    함수 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));
                }
            }
       
    머리>
   
    클릭
       

           
• 

           
• 

           
• 

           
• 

           
• 

           
• 

           
• 

           
• 

           
•