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

JS에서 다중 객체 이동을 구현하는 방법에 대한 자세한 설명

韦小宝

풀어 주다： 2018-01-24 09:55:49

원래의

1053명이 탐색했습니다.

이 글에서는 JS에서 다중 객체 움직임을 구현하는 방법을 주로 소개하고, 이를 예제 형식으로 자세히 분석합니다. javascript 다중 객체 움직임을 구현하는 원리와 관련 조작 기법은 JavaScript에 관심이 있는 친구들이 할 수 있습니다. 이 글을 참고하세요

이 글은 JS에서 다중 객체 이동을 구현하는 방법을 예제를 통해 분석한 것입니다. 참조용으로 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

기본 단계

1. getElementsByTagName
2를 통해 다중 객체 이동을 위한 요소를 얻습니다. 그런 다음 for 루프가 요소를 순회하고 추가합니다. events
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에 도달하면 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>

로그인 후 복사

이것이 이 문서의 모든 내용입니다. JavaScript를 배우는 모든 분들에게 도움이 되기를 바랍니다. 도움말이 제공됩니다! !