집 > 기사 > 웹 프론트엔드 > 자바스크립트의 다중 객체 이동에 대한 예제 코드

자바스크립트의 다중 객체 이동에 대한 예제 코드

不言원래의: 2018-08-31 11:14:161289검색

이 기사의 내용은 JavaScript의 다중 객체 이동 예제 코드에 대한 것입니다. 필요한 친구가 참고할 수 있기를 바랍니다.

이전에는 타이머를 사용하여 단일 개체 이동을 구현했습니다. 프로젝트에서는 단일 개체 이동이 아닌 여러 개체 및 여러 값 변경을 수행하는 경우가 많습니다.
여기서는 매개변수를 변경하여 여러 개체의 움직임과 임의의 값을 구현해 보겠습니다. 개체의 너비, 높이, 테두리, 글꼴 크기, 투명도 등을 변경할 수 있는 모션 프레임워크입니다.

Note: 위의 장에서는 사용법이 간단하기 때문에 모두 offsetWidth(offsetWidth에는 테두리와 패딩 등이 포함됨)를 사용하여 스타일을 설정하고 가져왔습니다. 객체에 테두리, 패딩 등의 스타일을 적용하면 오류가 보고되므로 여기서는 currentStyle 및 getCompulatedStyle의 보다 엄격한 메서드를 사용하여 스타일을 가져옵니다.
Note: 우리는 실제로 0.07*100과 같은 일부 특정 값을 컴퓨터에 저장할 수 없습니다. 최종 결과는 7이 아닙니다. 아래에서는 정수로 반올림됩니다.
Attention: 여러 개체가 움직일 때 타이머와 일부 매개변수를 공유해서는 안 됩니다. 그렇지 않으면 움직임이 완료되기 전에 지워지고 다른 움직임이 트리거되며 일부 매개변수는 또한 공유할 수 없으므로 일부 매개변수가 고정 값에 도달하기 전에 다시 작동하게 됩니다. 따라서 다음 예제의 타이머는 요소에 배치됩니다.

다음은 우리가 한 일의 예입니다

<!DOCTYPE html>
<html>

<head>
  <title>运动改变宽度、高度、边框、字体、透明度</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background: red;
      margin: 10px;
      float: left;
      border:1px solid #000;
      font-size:14px;
    }
    div:nth-child(5) {
      filter: alpha(opacity:30);
      opacity:0.3;
    }
  </style>
  <script>
    window.onload = function() {
      var oDiv1 = document.getElementById("div1");
      var oDiv2 = document.getElementById("div2");
      var oDiv3 = document.getElementById("div3");
      var oDiv4 = document.getElementById("div4");
      var oDiv5 = document.getElementById("div5");
      oDiv1.onmouseover=function(){
        startMove(this,"height", 400)
      }
      oDiv1.onmouseout=function(){
        startMove(this,"height", 200)
      }
      oDiv2.onmouseover=function(){
        startMove(this,"width", 400)
      }
      oDiv2.onmouseout=function(){
        startMove(this, "width",200)
      }
      oDiv3.onmouseover=function(){
        startMove(this,"fontSize", 50)
      }
      oDiv3.onmouseout=function(){
        startMove(this, "fontSize",14)
      }

      oDiv4.onmouseover=function(){
        startMove(this,"borderWidth", 100)
      }
      oDiv4.onmouseout=function(){
        startMove(this, "borderWidth",1)
      }
      oDiv5.onmouseover=function(){
        startMove(this,"opacity", 100)
      }
      oDiv5.onmouseout=function(){
        startMove(this, "opacity",30)
      }
    }

    function getStyle(obj,name){
      if(obj.currentStyle){
        return obj.currentStyle[name];
      }
      else{
        return getComputedStyle(obj,false)[name];
      }
    }

    function startMove(obj, attr, iTarget) {
      clearInterval(obj.timer);
      obj.timer = setInterval(function() {
        var cur=0;
        if(attr==="opacity"){
          cur=Math.round(parseFloat(getStyle(obj,attr))*100);//有可能会出现误差0.07*100
        }
        else{
          cur=parseInt(getStyle(obj,attr));
        }
        var speed = (iTarget - cur) / 6;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        if (cur === iTarget) {
          clearInterval(obj.timer);
        } else {
          if(attr==="opacity"){
            obj.style.filter="alpha(opacity:"+cur+speed+")";
            obj.style.opacity=(cur+speed)/100;
          }else{
            obj.style[attr]=cur+speed+"px";
          }
        }
      }, 30)
    }
  </script>
</head>

<body>
  <div id="div1">变宽</div>
  <div id="div2">变高</div>
  <div id="div3">文字变大</div>
  <div id="div4">borderwidth</div>
  <div id="div5">透明度</div>
</body>

</html>

자바스크립트의 다중 객체 이동에 대한 예제 코드

다음은 우리가 한 일의 예입니다

관련 기사