Home >Web Front-end >JS Tutorial >JS makes folding and unfolding animation (with code)

JS makes folding and unfolding animation (with code)

php中世界最好的语言Original: 2018-05-14 14:38:142649browse

This time I will bring you JS to make a folding and unfolding animation (with code). What are the precautions for making a folding and unfolding animation with JS (with code). The following is a practical case, let’s take a look. one time.

<!DOCTYPE = html>
<html>
 <head>
  <title> JS折叠展开动画</title>
  <style>
  body{
   margin: 0px;
   padding: 0px;
  }
  .red{
   background-color:red;
   width:200px;
   height:200px;
   position:relative;
   left:-200px;
   top:0px;
  }
  .blue{
   background:blue;
   width:20px;
   height:50px;
   position:absolute;
   left:200px;
   top:75px;
  }
  </style>
 </head>
 <body>
  <p class="red" id="cf1"><p class="blue" id="cf">分享</p></p>
  <script>
  window.onload = function(){
   var onp = document.getElementById("cf1");
   onp.onmouseover = function(){
    startmove(0);
   }
   onp.onmouseout = function(){
    startmove(-200);
   }
  }
  var timer ;
  function startmove(target){
   clearInterval(timer);//清除定时器，以免多次触发定时器导致速度越来越快而不是匀速前进
   var onp1 = document.getElementById("cf1");
   timer = setInterval(function(){
   var speed = 0;
   if(onp1.offsetLeft<target){
    speed = 10;
   }else{
    speed = -10;
   }
   if(onp1.offsetLeft==target){
    clearInterval(timer);
   }
   else{
   onp1.style.left = onp1.offsetLeft+speed+&#39;px&#39;;
   }
   },30)
  }
  </script>
 </body>
</html>

Summary:

1. CSS part:

1. Don’t forget style initialization;
2. Review the reference method of css files; (class reference method)
3. Review absolute positioning and relative positioning relationship (parent relationship uses relative; use absolute for sub-relationships)

2. js part:

1, element.style. left & element.offsetLeftDifference:

① The unit of the former is px, which is a string; the unit of the latter is a numerical value;

2. Idea It was not clear enough at first, and failed to abstract the key variables of placing and moving the mouse - the target position is just different

3, Function parametersas few as possible (if the goal can be achieved)

4. It is best to set the mouse action object to the parent p, otherwise flickering will occur (onmouseover was just called, the target was removed, and onmouseout was called)

5. Pay attention to clearing the timer (①, to prevent unstable speed when moving ②, stop moving when reaching the target position)

3. Others:

Q: Can Google Chrome unblock pop-up windows?

A: Settings-Advanced Settings-Privacy Settings-Content Settings-Pop-up window to make relevant settings.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

JS makes folding and unfolding animation (with code)

Related articles