>  기사  >  웹 프론트엔드  >  js는 모든 요소를 ​​지정된 위치로 이동합니다.

js는 모든 요소를 ​​지정된 위치로 이동합니다.

不言
不言원래의
2018-07-09 17:17:416595검색

이 글은 주로 js를 사용하여 요소를 특정 위치로 이동하는 방법을 소개합니다. 특정 참조 값이 있습니다. 이제 도움이 필요한 친구들이 참조할 수 있습니다.

아이디어: 요소를 지정된 위치로 이동== == ==2개의 매개변수를 전달해야 합니다. 하나는 이동할 요소이고, 다른 하나는 지정된 위치 대상입니다.

요소의 현재 위치를 가져오고, 각 동작에 대한 거리 단계를 설정하고, 타이머를 설정하고, 여러 번의 원형 동작을 통해 목표 위치에 도달합니다. 현재 위치와 대상 위치 사이의 거리를 기준으로 루프를 실행해야 하는지 결정하세요.

이 기사를 예로 들면 다음과 같습니다. 여기에는 몇 가지 함정이 있습니다.

1 요소를 이동하려면 요소를 분리해야 합니다. 즉, CSS 스타일에서 절대 위치 지정을 사용해야 합니다

2. 버튼을 계속 클릭할 때마다 타이머가 생성됩니다

. ===》해결 방법: 타이머를 하나만 설정하고 타이머를 실행하세요. 타이머를 미리 청소하여 마지막 작업이 영향을 주지 않도록 하세요.

개체의 속성에 따라 하나의 타이머만 설정할 수 있습니다. 개체에 클릭된 속성은 하나만 있습니다. 즉, element.timer1=setInterval();

3 요소의 현재 위치를 얻으려면 offsetLeft / offsetTop / offsetWidth / offsetHeight를 사용해야 합니다. 결과는 px

이 아닙니다.

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>    
        <style>
            div{
                width: 200px;
                height: 130px;
                background: red; 
                position: absolute;
                left: 20px;
                }
        </style>
    </head>
    
    <body>
        <input type="button" value="按钮1" id="btn"/>
        <input type="button" value="按钮2" id="btn2"/>
        <div id="dv">
            
        </div>
        <script>
            document.getElementById("btn").onclick=function(){
                animate(document.getElementById("dv"),400);
                
            };            
            document.getElementById("btn2").onclick=function(){
                animate(document.getElementById("dv"),1600);
            };
            //把任意元素移动到指定的目标位置
            function animate(element,target){
                clearInterval(element.timer1);
                element.timer1=setInterval(function(){//element是一个对象,对象点出来的属性有且只有一个,避免多次点击按钮产生多个定时器
                    var current=element.offsetLeft;    //获取当前位置,数字类型,没有px。
                    //不可以用element.style.left,因为该写法只能获取到行内样式,不能获取到<style></style>标签内的样式
                    var step=10;//每次移动的距离
                    step=current<target?step:-step;//step的正负表示了向左或是向右移动
                    current+=step;    //计算移动到的位置,数字类型,没有px                
                    if(Math.abs(target-current)>Math.abs(step)){//当离目标位置的距离大于一步移动的距离
                        element.style.left=current+"px";//移动
                    
                    }else{//当间距小于一步的距离,则清理定时器,把元素直接拿到目标位置
                        clearInterval(element.timer1);
                        element.style.left=target+"px";
                        
                    }
                },20);
            }
        </script>
    </body>    
</html>

이상이 이 글의 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 참고해주세요!

관련 권장 사항:

JS 효과 함수 구현 정보

js 배열을 무작위로 정렬하는 방법

위 내용은 js는 모든 요소를 ​​지정된 위치로 이동합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.