Home >Web Front-end >JS Tutorial >How to solve the anti-shake problem and suspended couplets in JavaScript motion framework (2)

How to solve the anti-shake problem and suspended couplets in JavaScript motion framework (2)

黄舟Original: 2017-05-21 13:21:471844browse

This article mainly introduces the second part of JavaScriptMotionFramework in detail to solve the problem of anti-shake and suspended couplets. It has certain reference value and is of interest. Friends can refer to

The example in this article is the application of JavaScript motion framework (1)

scrollTop:Sometimes the web page is very Long, its height is greater than the height of the monitor, which will cause scrolling. Then in the height direction, the part that "rolls away" is scrollTop

var scrollTop = document.documentElement.scrollTop | | document.body.scrollTop;

offsetTop：Thisattributecan get the closest distance to the top outer edge of the element Position the distance from the inner wall of the parent element. If positioning is not used in the parent element, the distance between the upper outer edge and the inner wall of the document is obtained. The so-called positioning means that the position attribute value is relative, absolute or fixed.

How to solve the anti-shake problem and suspended couplets in JavaScript motion framework (2)

##In the picture, the black box is the web document, its height:

document.documentElement.scrollHeight;

The green box is the currently visible part of the client area (excluding toolbars,

status columns, etc.), and the red box is the couplet to be fixed in the center of the client area. If the height of the web page is very high, The user keeps scrolling and requires the couplet to be kept in the center of the right side of the client area in the form of buffering motion (postion: fixed; it can be done, and it can be done very stably. When scrolling the web page, the p will remain motionless).

But we want its mobility to finally settle at the target position:

1: The position can be calculated directly and hard assigned; 2: Buffer movement To the target position, the effect is softer.

Generally, the first method is not used because the visual effect is very poor and very stiff.

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>运动框架（二）</title>
 <style type="text/css">
  * {
   padding: 0;
   margin: 0;
  }
  #p1 {
   width: 100px;
   height: 200px;
   background: orange;
   position: absolute;
   right: 0;
  }
 </style>
</head>
<body style="height: 30000000px;">
 <p id="p1"></p>
 <script type="text/javascript">
  var op = document.getElementById(&#39;p1&#39;);
  var timer = null;
  window.onscroll = function() {
   //每次滚动网页，都要重新计算目标值，当前值就是offsetTop
   var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
   var target = (document.documentElement.clientHeight - op.offsetHeight)/2 + scrollTop;
   //下面是硬赋值,计算好位置后，直接将值付给style.top,太生硬
   //op.style.top = target;

   startMove(target);
  };
  function startMove(iTarget) {
   clearInterval(timer);
   timer = setInterval(function() {
    var speed = (iTarget - op.offsetTop) / 10;
    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    if (iTarget == op.offsetTop) {
     clearInterval(timer);
    } else {
     op.style.top = op.offsetTop + speed + &#39;px&#39;;
     document.title = iTarget + &#39;,&#39; + op.offsetTop;
    }
   }, 30);
  }
 </script>
</body>
</html>

There is a problem with the running results. The couplet keeps shaking, up and down, that is, the offsetTop keeps changing back and forth, as shown in the following two pictures:

How to solve the anti-shake problem and suspended couplets in JavaScript motion framework (2)

Observe the two pictures above and look at the title. The calculated target value is a decimal: 267.5px, which is the style.top value where the couplet should stay at the end. speed = (267.5 - 267)/10 –> 1, span 1px to 268,

speed = (267.5 - 268)/10 –> -1, go back 1px to 267, but never reach the target value of 267.5 , in the previous article, the speed could only be rounded, and the computer did not move decimal px, so it never reached 267.5. It was just like this: one step forward, passed, one step back, terrible! Shake back and forth!
How to solve it is very simple. The target value is not allowed to be a decimal: round!

var target = (document.documentElement.clientHeight - op.offsetHeight)/2 + scrollTop;

Changed to:

var target = parseInt((document.documentElement.clientHeight - op.offsetHeight)/2 + scrollTop);

The above is the detailed content of How to solve the anti-shake problem and suspended couplets in JavaScript motion framework (2). 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：How to solve the problem of positive and negative speed rounding in JavaScript motion framework (1)Next article：How to solve the problem of positive and negative speed rounding in JavaScript motion framework (1)

See more

How to solve the anti-shake problem and suspended couplets in JavaScript motion framework (2)

Related articles