This article mainly introduces the simple implementation method of javascript's elastic movement effect. The example analyzes the principle of JavaScript's implementation of elastic movement, and involves the use techniques related to JavaScript's mathematical operations and time functions, if you need it, refer to the example in this article to describe the simple implementation method of javascript elastic movement effect. We will share this with you for your reference. The details are as follows:
Principle of elastic movement: acceleration, deceleration, and friction
The running effect is as follows:
The instance code is as follows:
Untitled documentScript window. onload = function () {var oBtn = document. getElementById ('btn1 '); var oDiv = document. getElementById ('p1'); oBtn. onclick = function () {startMove (oDiv, 300) ;};}; var iSpeed = 0; var left = 0; function startMove (obj, iTarget) {clearInterval (obj. timer); obj. timer = setInterval (function () {iSpeed + = (iTarget-obj. offsetLeft)/5; iSpeed * = 0.7; left + = iSpeed; if (Math. abs (iSpeed) <1 & Math. abs (left-iTarget) <1) {clearInterval (obj. timer); obj. style. left = iTarget + 'px ';} else {obj. style. left = obj. offsetLeft + iSpeed + 'px '; }}, 30);} script