JS Motion-Free Fall

Simulated physics in the free fall: nonsense not much to say, first look at the effect!!

Picture effect is not very good, some cards, you can put the code to test out their own run to see the effect!!

Basic process: The mouse can drag div, when the mouse lifted up, the div will be free to fall, and then bounce down, until the speed of 0 movement stop, drop and bounce until the process of stopping is simulated free fall

Complete the test code:

<div id= "box" ></div>

<style>        #box {            position:absolute;left:0;top:0;            width:100px;height:100px;            Background:green;        } </style>

<script> window.onload = function () {var odiv = document.getElementById (' box ');        var disx = 0, Disy = 0;            /* Drag event */Odiv.onmousedown = function (ev) {disx = Ev.clientx-odiv.offsetleft;            Disy = Ev.clienty-odiv.offsettop;                Document.onmousemove = function (EV) {var ev = EV | | window.event;                ODiv.style.left = ev.clientx-disx + ' px ';            ODiv.style.top = Ev.clienty-disy + ' px ';                } document.onmouseup = function () {document.onmousemove = null;                Startmove (ODIV);            Document.onmouseup = null;        }} var ispeed = 0;//Free Fall start speed is 0 var timer = null;            function Startmove (obj) {clearinterval (timer); var clienth = Document.documentElement.clientHeight | |            Document.body.clientHeight; var maxt = clienth-obj.offsetheight; When the top value of the div equals the height of the browser's visible areaSubtract the height of the div itself when it touches the bottom of the visible area timer = setinterval (function () {ispeed + = 3;//Drop process speed is about                var T = obj.offsettop + ispeed;                    if (T > maxt) {t = Maxt;                    Ispeed *= -1;//When touching the bottom edge, the speed is negative ispeed *= 0.75;//analog Friction} if (T < 0) {                    T = 0;                Ispeed *=-1;            } oDiv.style.top = T + ' px ';        },30); }}</script>

For some of the implementation of the drag-and-drop explanation, please refer to the "JS drag" this article

Free Fall points:

1. Calculate the distance the object can fall: Maxt

2. Turn on the timer change the top value of the object by changing the speed ispeed

3. When the object falls to the maximum distance, the rebound starts, and the friction is simulated by ispeed*0.75, so that the object can stop

JS Motion-Free Fall