Example code for multi-object movement in javascript-JS Tutorial-php.cn

Example code for multi-object movement in javascript

不言

Release： 2018-08-31 11:14:16

Original

1376 people have browsed it

The content of this article is about the example code of multi-object movement in JavaScript. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Previously we used timers to implement single object movement. In projects, we often do not do single object movement, but multiple objects and multiple value changes.
Here we will realize the movement of multiple objects and arbitrary values by changing parameters. A motion framework that can change the object's width, height, borders, font size, transparency, and more.

Note: In the above chapters, we all use offsetWidth (offsetWidth includes border and padding, etc.) to set and obtain styles, because the usage is simple, but if the object contains border, padding, etc. When styling, an error will be reported, so here we use a more rigorous method currentStyle and getComputedStyle to obtain the style.
Note: We cannot really store some specific values in the computer. We store some approximate values, such as 0.07*100. The final result is not 7, so we will round and convert below. is an integer.
Note: When multiple objects are moving, the timer and some parameters must not be shared, otherwise the movement will be cleared before it is completed and other movements will be triggered, and some parameters cannot be shared. , which will cause some parameters to be re-operated before they reach fixed values. Therefore, the timers in the following examples are placed on elements.

The following is an example we made

<!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>

Copy after login

Related recommendations:

javascript multi-object motion implementation method analysis_javascript skills

JS implementation of multi-object movement example sharing

The above is the detailed content of Example code for multi-object movement in javascript. For more information, please follow other related articles on the PHP Chinese website!