JS를 활용한 다중 객체 이동 예시 공유-JS 튜토리얼-php.cn

JS를 활용한 다중 객체 이동 예시 공유

小云云

풀어 주다： 2018-01-24 09:02:11

원래의

1262명이 탐색했습니다.

이 글은 주로 JS에서 다중 객체 이동을 구현하는 방법을 소개하고, 다중 객체 이동을 구현하는데 있어서 자바스크립트의 원리와 관련 동작 기법을 예제 형식으로 자세하게 분석하고 있으니, 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

기본 단계

1. getElementsByTagName
2을 통해 여러 개체로 이동할 요소를 얻습니다. 그런 다음 for 루프가 요소를 순회하고 이벤트를 추가합니다.
3. 현재 요소 "동작 중"과 대상 값 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가 중간에 도달하면 타이머가 먼저 지워지고 그 다음 첫 번째가 지워집니다. 나는 중간에 막힐 것이다.

이 문제를 해결하세요. 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>

로그인 후 복사