JS에서 다중 객체 이동을 구현하는 방법(자세한 튜토리얼)-JS 튜토리얼-php.cn

JS에서 다중 객체 이동을 구현하는 방법(자세한 튜토리얼)

亚连

풀어 주다： 2018-06-09 17:32:56

원래의

1330명이 탐색했습니다.

이 글은 다중 객체 이동을 구현하기 위한 JS의 방법을 주로 소개하며, 다중 객체 이동을 구현하기 위한 자바스크립트의 원리와 관련 조작 기술을 예제 형식으로 자세히 분석합니다. 기사에서는 객체가 움직이는 방식을 다중 객체 이동을 구현하기 위해 JS의 예를 분석합니다. 참조용으로 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

기본 단계1. getElementsByTagName

2을 통해 여러 개체로 이동할 요소를 가져옵니다. 그런 다음 for 루프가 요소를 순회하고 이벤트를 추가합니다.

3. startMove 함수를 정의하려면 현재 "이동" 요소와 대상 값 target

이라는 두 개의 매개변수가 필요합니다. 참고:

다중 객체 모션에서는 모든 것을 공유할 수 없습니다.

<script>
    window.onload = function(){
      var liTags = document.getElementsByTagName(&#39;li&#39;); // 第一步
      for(var i=0;i<liTags.length;i++){ // 第二步
         liTags[i].onmouseover = function () {
         startMove(this,400);
         }
         liTags[i].onmouseout = function () {
         startMove(this,200);
         }
      }
    }
    var timer = null;
    function startMove(obj,iTarget) { // 第三步，2个参数
      clearInterval(timer);
      timer = setInterval(function () {
        var iSpeed = (iTarget - obj.offsetWidth)/10;
        iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);// 缓冲运动注意取整处理
        if(obj.offsetWidth == iTarget){
          clearInterval(timer);
        }else{
          obj.style.width = obj.offsetWidth+iSpeed+&#39;px&#39;;
        }
      },30);
    }
</script>

로그인 후 복사

문제: 이동할 때 제거 속도가 상대적으로 빠르면 일부 li가 원래 상태로 돌아갈 수 없고 중간에 멈추는 것처럼 보입니다.

이것은 모든 li가 타이머를 공유하기 때문입니다.

마우스가 첫 번째로 이동할 때; li가 이동하면 startMove를 호출하여 마우스가 li를 제거할 때 타이머를 시작하고 li가 중간에 도달하면 두 번째 li로 이동하고 타이머도 시작해야 합니다. 이때 첫 번째 리가 중간에 막혔습니다.

이 문제를 해결하세요.

for 루프 중에 각 li에 대해 타이머를 정의하세요.

liTags[i].timer = null;// 给每个li都添加一个timer

로그인 후 복사

그런 다음 starMove에서 매번 타이머를 사용하세요. 타이머는 모두 현재 li의 것입니다. 소유하므로 서로 간섭하지 않습니다.

여기의 이전 타이머는

(현재 개체의 자체 타이머)로 변경되었습니다. 여기에는 문제가 없습니다.

obj.timer 완전한 코드는 다음과 같습니다:

<body>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
</body>

로그인 후 복사

일부 스타일 추가:

<style>
    ul{list-style: none;}
    ul li{
      margin: 10px;
      width: 200px;height: 50px;
      background: lightblue;
    }
</style>

로그인 후 복사

JS 코드 완성

<script>
    window.onload = function(){
      var liTags = document.getElementsByTagName(&#39;li&#39;);
      for(var i=0;i<liTags.length;i++){
         liTags[i].timer = null;// 给每个li都添加一个timer
         liTags[i].onmouseover = function () {
         startMove(this,400);
         }
         liTags[i].onmouseout = function () {
         startMove(this,200);
         }
      }
    }
    function startMove(obj,iTarget) {
      clearInterval(obj.timer);
      obj.timer = setInterval(function () {
        var iSpeed = (iTarget - obj.offsetWidth)/10;
        iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
        if(obj.offsetWidth == iTarget){
          clearInterval(obj.timer);
        }else{
          obj.style.width = obj.offsetWidth+iSpeed+&#39;px&#39;;
        }
      },30);
    }
</script>

로그인 후 복사

그런 다음 예를 살펴보겠습니다. 다중 객체 이동 - 투명도 변경

<script>
  window.onload = function () {
    var aImgs = document.getElementsByTagName(&#39;img&#39;);
    for(var i=0;i<aImgs.length;i++){
      aImgs[i].timer = null;
      aImgs[i].alpha = 100; // 把公用的alpha改成每个img对象都有的属性
      aImgs[i].onmouseover = function () {
        startMove(this,30);
      }
      aImgs[i].onmouseout = function () {
        startMove(this,100);
      }
    }
  }
  // var alpha = 100; 这里alpha在多物体运动里 不能公用
  function startMove(obj,iTarget) {
    clearInterval(obj.timer);
    var iSpeed = (iTarget - obj.alpha)/10;
      iSpeed = iSpeed>0 ? Math.ceil(iSpeed): Math.floor(iSpeed);
    obj.timer = setInterval(function(){
      if(obj.alpha == iTarget){
        clearInterval(obj.timer);
      }else{
        obj.alpha += iSpeed;
        obj.style.opacity =obj.alpha/100;
        obj.style.filter = &#39;alpha(opacity:&#39;+obj.alpha+&#39;)&#39;;
      }
    },30);
  }
</script>

로그인 후 복사

위는 제가 모든 사람을 위해 컴파일한 것입니다. , 앞으로 도움이되는 모든 사람에게 도움이되기를 바랍니다.