Home > Article > Web Front-end > Chain movement in JS (detailed tutorial)

Chain movement in JS (detailed tutorial)

亚连Original: 2018-06-09 16:15:391477browse

This article mainly introduces the chain motion of JS motion special effects, and analyzes the principles and specific implementation techniques of javascript chain motion in the form of examples. Friends in need can refer to it

The examples in this article describe JS Chain movement of motion special effects. Share it with everyone for your reference, the details are as follows:

Continue to toss in the previous article "Methods to add motion to any value of JS motion effects"

Chain Movement: One movement after another. For example: when the mouse is moved into p, the width will be enlarged first, then the height will be enlarged, and then the transparency will be changed, etc. A series of movements are performed in succession. Without further ado, let’s get to the chestnuts! !

When the mouse moves into p, p first becomes wider, then becomes taller, and then changes the transparency; when it is moved out, it returns to its original state one by one;

Implementation chain style movement, you need to continue to improve the startMove() function in the previous article

function startMove(obj,attr,iTarget,fn) Pass in one more fn parameter means that after one movement ends, continue to the next movement. Of course, needs to judge, if there is a next Movement, execute the next movement, if not, continue downward execution

if(fn){
  fn();
}

Complete test code:

HTML part:

<body>
<p id="p1"></p>
</body>

css part:

<style>
  #p1{
   width: 200px;height: 200px;
   background: green;
  }
</style>

js part:

<script>
  window.onload = function(){
   var op = document.getElementById(&#39;p1&#39;);
   op.onmouseover = function () {
    startMove(op,&#39;width&#39;,300,function () {
     startMove(op,&#39;height&#39;,300, function () {
      startMove(op,&#39;opacity&#39;,30);
     });
    });
   }
   op.onmouseout = function () {
    startMove(op,&#39;opacity&#39;,100, function () {
     startMove(op,&#39;height&#39;,200, function () {
      startMove(op,&#39;width&#39;,200);
     });
    });
   }
  }
  function getStyle(obj,attr){
   return getComputedStyle ? getComputedStyle(obj,false)[attr] : obj.currentStyle[attr];
  }
  function startMove(obj,attr,iTarget,fn) {//fn：执行下一个运动的函数
   clearInterval(obj.timer);
   obj.timer = setInterval(function () {
    var objAttr = 0;
    if(attr == "opacity"){
     objAttr = Math.round(parseFloat(getStyle(obj,attr))*100);
    }else{
     objAttr = parseInt(getStyle(obj,attr));
    }
    var iSpeed = (iTarget -objAttr)/10;
    iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
    if(objAttr == iTarget){
     clearInterval(obj.timer);
     if(fn){// 如果传了 “下一个运动的函数” 就执行
      fn();
     }
    }else{
     if(attr == "opacity"){
      obj.style.filter = &#39;alpha(opacity:&#39;+(objAttr+iSpeed)+&#39;)&#39;;
      obj.style.opacity = (objAttr+iSpeed)/100;
     }else{
      obj.style[attr] = objAttr+iSpeed+&#39;px&#39;;
     }
    }
   },30);
  }
</script>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Cross-domain issues with proxyTable in the vue-cli project

express builds query server

Use js custom trim function to delete spaces at both ends

JavaScript running principle

Detailed explanation of using jest to test react native Component

The above is the detailed content of Chain movement in JS (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JS motion effectsNext article：JS motion effects

See more

Chain movement in JS (detailed tutorial)

Related articles