How to realize the easing effect of suspension following frame by javascript
Today, the editor will share with you the relevant knowledge points about how to achieve the suspension following box ease effect in javascript. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.
1. Define a motion function that is called when triggered, and pass a target position as an argument
2. Inside the motion function, the timing function is called. Inside the timing function, the distance difference between the element position and the target position is calculated first, and then divided by a numerical value as the speed (because the distance difference has been shrinking, the speed value has been decreasing all the time. In order to achieve the slow effect)
3. Since the minimum unit of the location setting on the web page is 1px, the operation in step 2 may have a decimal, so we need to deal with the decimal, otherwise there is always a 1px gap between the location of the element and the target location.
New Web Project # div1 {width:100px; height:150px; background: red; border:1px solid # 008000; right:0px; position: absolute;} # div2 {width:1920px; height:1px Background:red; position: absolute;} window. "nl" ad=function () {var oDiv=document.getElementById ('div1'); var oDiv1=document.getElementById (' div2'); var timer=null ODiv.style.top= (document.documentElement.clientHeight-oDiv.offsetHeight) / 2 documentation. DocumentElement.scrollTopographic ll=function ll=function () {var scrolltop=document.documentElement.scrollTop | | document.body.scrollTop; var iTarget= (document.documentElement.clientHeight-oDiv.offsetHeight) / 2 documentation scrolltop; iTarget=Math.floor (iTarget) ODiv1.style.top=iTarget+'px'; startMove (iTarget);}; function startMove (itarget) {clearInterval (timer); timer=setInterval (function () {var iDis=itarget-oDiv.offsetTop) Var speed=iDis/5; if (iDis > = 0) {speed=Math.ceil (speed) / / when speed is less than 1, change it to 1, thus moving the position of the element by one pixel, because pixels less than 1 will be approximated to 0} else {speed=Math.floor (speed) } if (oDiv.offsetTop==itarget) {clearInterval (timer);} else {oDiv.style.top=oDiv.offsetTop+speed+'px' } document.title=oDiv.offsetTop;}, 30);}}
Run result diagram:
These are all the contents of the article "how to achieve the suspension following box effect in javascript". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.
